進行了各種準備與(yu) 配置後，來到首頁開發。首先需要實現首頁效果圖如下：

Template 名片很多，需要用模板、
這裏需要微信提供的基礎組件大致是 input（搜索框）、
action-sheet（右邊是個(ge) 底部下拉菜單，需要下拉菜單）、
Scroll-view (右邊 ABC 跳轉)、（這個(ge) 目前實現還有點問題，正在攻克中）。

View是塊元素，整個(ge) 搜索框的一個(ge) 樣式。

* 名片夾：由於(yu) 該項目主打名片功能，故很多地方使用，所以需要把名片以 template 分離出來。
* Template：定義(yi) 一個(ge) 模板，name 模板的名字其實是個(ge) 作用域。
* Block：循環控製，名片很多，必須用循環出來，和很多操作數據的前端框架循環差不多。
* 支持自定義(yi) 屬性 data，這裏用作判斷線上名片以及線下名片。
* View 裏麵是一些數據引入，裏麵是支持三目運算符。

引入 template 時非常方便，is 和 name 一樣，data 是 nameData 傳(chuan) 遞過來的數據填充。

一切都綁定數據為(wei) 中心點。

取到數據具體(ti) 操作根據你數據結構：

這裏的數據結構和 json 數據結構一樣，

這裏如要傳(chuan) 到頁麵的話即是

```
this.setData({
nameData:card_list_name.data.cards,
timeData:card_list_time.data.cards
});
```

因為(wei) 頁麵遍曆的是 nameData,timeData

可以看下打印出來的數據結構，根據你的結構進行解析與(yu) 傳(chuan) 遞。

也可以看下這裏對數據的一些操作。（這裏須根據定義(yi) 的 json 數據格式來操作的）

名片的樣式由於(yu) 很多頁麵需要使用放在 common.css 裏麵，這個(ge) common.css 是所有頁麵都需要用到，一些初始化設置。它是在 app.wxss 裏麵引用之後才能被映射到全局 APP。

搜索框：其中 bindChange 為(wei) 輸入框發生改變事件。微信提供的 bindchange 在支持方麵還有小問題，目前是失去焦點才能觸發到此事件的發生，待後續完善吧，先實現功能再說。

在 index.js 裏麵寫(xie) 事件

```
bindInputChange:function(e){
//發生搜索事情
var self = this; //this綁定，這個(ge) this指向微信的提供window
var Text = e.detail.value.toUpperCase(); //取到輸入的內(nei) 容
if(Text==""){ //如果輸入為(wei) 空 一些東(dong) 西需要顯示 否則不顯示
show_letter = "block";
}else{
show_letter = "none";
}
this.setData({
show_letter:show_letter,
showSheet:true
});
var res = nameData; 獲取到傳(chuan) 遞的數據
if(data_type=="name"){
}else if(data_type=="time"){
res = timeData; 
};
for(var k in res){ //for-in循環取到data裏麵的cards
var data = res[k].cards;
for(var i = 0;iIf(data[i].userName!=null && data[i].userName.indexOf(Text)!=-1){
data[i]["display"] = "block"; //存在就是賦值顯示
}else{
data[i]["display"] = "none"; // 不存在賦值不顯示
}
}
}
}
```

菜單欄：做到菜單欄，使用微信提供的下拉菜單組件 action-sheet，它被觸發的條件在這裏。

一切以綁定事件為(wei) 起點：

```
bindButtonTapSheet:function(e){
//調取底部下拉菜單欄
}
```

還是得先布好局才能被調動

Js 配置：

Data 初始化數據：

這裏得取非，直接設置 false 調不出來: 調用事件。

調出來還得去掉它啊：如下相同即可

取消直接上事件即可。（分為(wei) 菜單欄外部與(yu) 底部）

//好了，就是這麽(me) 簡單。實現效果簡單，體(ti) 驗效果確實非常不錯。

還需要個(ge) loading 效果（暫時沒做動畫，後期再考慮。）
Loading 布局

首頁的最外層 view

根據微信的生命周期

```
Onload:function(e){
this.setData({
toastDisplay:”block”,
htmlWrapDisplay:”none”
})
},
onShow:function(e){
this.setData({
toastDisplay:”none”,
htmlWrapDisplay:”block”
})
}
```

加載條完成。

掃一掃，直接調用拍照功能，從(cong) 這裏看到微信提供的拍照 api 使用起來非常快速，隻需根據需求配置即可。

點擊掃一掃之後，在開發者工具即可看到如下效果。

做到這裏說明下，dom 長度有限製，頁麵的結構太長，也是無法渲染的，暫且把公司排序暫時先去掉了。

左邊的 ABC 跳轉（還在繼續完善中）。
這裏還有個(ge) 左滑刪除名片功能，微信沒有提供這個(ge) 在移動端很實用的功能真的比較遺憾