小程序模板網(wǎng)

微信小程序開(kāi)發(fā)教程第四章:首頁(yè)面開(kāi)發(fā)

發(fā)布時(shí)間:2018-03-20 09:40 所屬欄目:小程序開(kāi)發(fā)教程

進(jìn)行了各種準(zhǔn)備與配置后,來(lái)到首頁(yè)開(kāi)發(fā)。首先需要實(shí)現(xiàn)首頁(yè)效果圖如下:Template 名片很多,需要用模板、這里需要微信提供的基礎(chǔ)組件大致是 input(搜索框)、action-sheet(右邊是個(gè)底部下拉菜單,需要下拉菜單)、S ...

 
 
 

進(jìn)行了各種準(zhǔn)備與配置后,來(lái)到首頁(yè)開(kāi)發(fā)。首先需要實(shí)現(xiàn)首頁(yè)效果圖如下:

 

 

 

 

 

 

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

 

 

 

 

 

 

View是塊元素,整個(gè)搜索框的一個(gè)樣式。

 

 

 

 

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

 

 

 

 

引入 template 時(shí)非常方便,is 和 name 一樣,data 是 nameData 傳遞過(guò)來(lái)的數(shù)據(jù)填充。

 

 

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

 

 

 

 

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

 

 

 

 

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

 

 

 

 

這里如要傳到頁(yè)面的話(huà)即是

 

 

 

 

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

 

 

 

 

因?yàn)轫?yè)面遍歷的是 nameData,timeData

 

 

 

 

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

 

 

 

 

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

 

 

 

 

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

 

 

 

 

 

 

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

 

 

 

 

在 index.js 里面寫(xiě)事件

 

 

 

 

```
bindInputChange:function(e){
//發(fā)生搜索事情
var self = this; //this綁定,這個(gè)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ā)的條件在這里。

 

 

 

 

一切以綁定事件為起點(diǎn):

 

 

 

 

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

 

 

 

 

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

 

 

 

 

Js 配置:

 

 

 

 

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

 

 

 

 

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

 

 

 

 

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

 

 

 

 

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

 

 

 

 

 

 

//好了,就是這么簡(jiǎn)單。實(shí)現(xiàn)效果簡(jiǎn)單,體驗(yàn)效果確實(shí)非常不錯(cuò)。

 

 

 

 

還需要個(gè) loading 效果(暫時(shí)沒(méi)做動(dòng)畫(huà),后期再考慮。)
Loading 布局

 

 

 

 

首頁(yè)的最外層 view

 

 

 

 

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

 

 

 

 

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

 

 

 

 

加載條完成。

 

 

 

 

掃一掃,直接調(diào)用拍照功能,從這里看到微信提供的拍照 api 使用起來(lái)非??焖?,只需根據(jù)需求配置即可。

 

 

 

 

點(diǎn)擊掃一掃之后,在開(kāi)發(fā)者工具即可看到如下效果。

 

 

 

 

做到這里說(shuō)明下,dom 長(zhǎng)度有限制,頁(yè)面的結(jié)構(gòu)太長(zhǎng),也是無(wú)法渲染的,暫且把公司排序暫時(shí)先去掉了。

 

 

 

 

左邊的 ABC 跳轉(zhuǎn)(還在繼續(xù)完善中)。
這里還有個(gè)左滑刪除名片功能,微信沒(méi)有提供這個(gè)在移動(dòng)端很實(shí)用的功能真的比較遺憾



易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開(kāi)源 碼云倉(cāng)庫(kù):starfork
本文地址:http://22321a.com/wxmini/doc/course/22734.html 復(fù)制鏈接 如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢(xún):800182392 點(diǎn)擊咨詢(xún)
QQ在線(xiàn)咨詢(xún)