進行(xing)了(le)各種(zhong)準(zhun)備與配置后，來到首頁開發。首先需要實現首頁效果圖如下(xia)：

 

 

 

 

 

 

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

 

 

 

 

 

 

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

 

 

 

 

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

 

 

 

 

引(yin)入 template 時非常方(fang)便(bian)，is 和(he) name 一樣，data 是 nameData 傳(chuan)遞(di)過(guo)來的(de)數(shu)據填充。

 

 

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

 

 

 

 

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

 

 

 

 

這里的數據結(jie)構和 json 數據結(jie)構一樣(yang)，

 

 

 

 

這里如要傳到頁面的話即是

 

 

 

 

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

 

 

 

 

因為頁面遍歷的是 nameData,timeData

 

 

 

 

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

 

 

 

 

也可(ke)以看下(xia)這(zhe)里對數據(ju)的(de)一些操作。（這(zhe)里須(xu)根據(ju)定(ding)義的(de) json 數據(ju)格式來操作的(de)）

 

 

 

 

名片的樣(yang)式由于很多(duo)頁面需(xu)要使用放在(zai) common.css 里面，這個 common.css 是所有頁面都需(xu)要用到，一些初始化設置。它是在(zai) app.wxss 里面引用之后才能被映射到全(quan)局 APP。

 

 

 

 

 

 

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

 

 

 

 

在 index.js 里(li)面(mian)寫事件

 

 

 

 

```
bindInputChange:function(e){
//發生搜索事情
var self = this; //this綁定，這個this指向微信的提供window
var Text = e.detail.value.toUpperCase(); //取到輸入的內容
if(Text==""){ //如果輸入為空 一些東西需要顯示 否則不顯示
show_letter = "block";
}else{
show_letter = "none";
}
this.setData({
show_letter:show_letter,
showSheet:true
});
var res = nameData; 獲取到傳遞的數據
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"; // 不存在賦值不顯示
}
}
}
}
```

 

 

 

 

 

 

菜單(dan)欄(lan)：做到菜單(dan)欄(lan)，使用(yong)微信提供的下拉菜單(dan)組件(jian) action-sheet，它被觸發的條件(jian)在這(zhe)里。

 

 

 

 

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

 

 

 

 

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

 

 

 

 

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

 

 

 

 

Js 配置：

 

 

 

 

Data 初始(shi)化數據：

 

 

 

 

這里(li)得(de)取非，直接設置 false 調(diao)不(bu)出來(lai): 調(diao)用(yong)事件(jian)。

 

 

 

 

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

 

 

 

 

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

 

 

 

 

 

 

//好了，就是這么簡單。實(shi)現效果簡單，體(ti)驗效果確實(shi)非(fei)常(chang)不錯(cuo)。

 

 

 

 

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

 

 

 

 

首頁(ye)的最(zui)外層 view

 

 

 

 

根據微(wei)信的生命周期(qi)

 

 

 

 

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

 

 

 

 

加載條完成。

 

 

 

 

掃一掃，直(zhi)接調用拍照(zhao)功能，從這(zhe)里(li)看到微信提供的(de)拍照(zhao) api 使用起來非常快速(su)，只需根據(ju)需求配置即可。

 

 

 

 

點擊掃(sao)一掃(sao)之后，在開發者工(gong)具即可看到(dao)如下效(xiao)果(guo)。

 

 

 

 

做到這里說明下，dom 長度有限制，頁面(mian)的結構太長，也(ye)是無(wu)法渲染(ran)的，暫且(qie)把公司排序暫時先(xian)去掉(diao)了。

 

 

 

 

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