微信小程序開發(fā)教程第四章：首頁面開發(fā)

時間：2016-10-12 23:26:00

進行了各種準備與配置后，來到首頁開發(fā)。首先需要實現(xiàn)首頁效果圖如下：

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

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

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

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

一切都綁定數(shù)據(jù)為中心點。

取到數(shù)據(jù)具體操作根據(jù)你數(shù)據(jù)結(jié)構(gòu)：

這里的數(shù)據(jù)結(jié)構(gòu)和 json 數(shù)據(jù)結(jié)構(gòu)一樣，

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

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

因為頁面遍歷的是 nameData,timeData

可以看下打印出來的數(shù)據(jù)結(jié)構(gòu)，根據(jù)你的結(jié)構(gòu)進行解析與傳遞。

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

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

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

在 index.js 里面寫事件

```
bindInputChange:function(e){
//發(fā)生搜索事情
var self = this; //this綁定，這個this指向微信的提供window
var Text = e.detail.value.toUpperCase(); //取到輸入的內(nèi)容
if(Text==""){ //如果輸入為空一些東西需要顯示否則不顯示
show_letter = "block";
}else{
show_letter = "none";
}
this.setData({
show_letter:show_letter,
showSheet:true
});
var res = nameData; 獲取到傳遞的數(shù)據(jù)
if(data_type=="name"){
}else if(data_type=="time"){
res = timeData;
};
for(var k in res){ //for-in循環(huán)取到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，它被觸發(fā)的條件在這里。

一切以綁定事件為起點：

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

還是得先布好局才能被調(diào)動

Js 配置：

Data 初始化數(shù)據(jù)：

這里得取非，直接設(shè)置 false 調(diào)不出來: 調(diào)用事件。

調(diào)出來還得去掉它?。喝缦孪嗤纯?/font>

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

//好了，就是這么簡單。實現(xiàn)效果簡單，體驗效果確實非常不錯。

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

首頁的最外層 view

根據(jù)微信的生命周期

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