微信應(yīng)用號(hào)，小程序最新開發(fā)教程第二彈

雷鋒網(wǎng)按：本文作者博卡君，一名程序猿。雷鋒網(wǎng)已獲作者授權(quán)發(fā)布。未經(jīng)授權(quán)拒絕轉(zhuǎn)載！

今天一波三折，承受了超出預(yù)料的壓力和煎熬，最后還是決定繼續(xù)放出我的更新教程。我想我一沒(méi)有泄露公司的代碼，二沒(méi)有提供泄露開發(fā)工具下載，只是從程序猿角度寫了篇開發(fā)日志。我已經(jīng)做好了最壞的準(zhǔn)備，就算放棄這份工作，也會(huì)把完成的教程交給名片盒的團(tuán)隊(duì)繼續(xù)更新發(fā)布下去！做了就絕不后悔！只是博卡君水平有限，文章還請(qǐng)各位多包容。

以上！開始吧：

小提示：

http://wxopen.notedown.cn/

這里面復(fù)刻了微信小程序的 api

第三章：微信小程序項(xiàng)目結(jié)構(gòu)以及配置

找到創(chuàng)建的 demo 文件夾，把項(xiàng)目導(dǎo)入到你的編輯器，這里使用的是 Sublime Text 編輯器。

這個(gè)時(shí)候需要根據(jù)自己的項(xiàng)目需求結(jié)構(gòu)進(jìn)行更改了，項(xiàng)目根目錄下面是首頁(yè)渲染的幾個(gè) tabBar 頁(yè)面，以及 app 的一些配置文件，如名片盒項(xiàng)目的 tabBar 是 3 個(gè)切換菜單：

我們先找到 app.json 文件打開配置好這幾個(gè)菜單，配置好 ”tabBar”，這個(gè)直接把配置文件改成你自己設(shè)計(jì)的即可。

App.json 里面有幾個(gè)配置項(xiàng)：

Pages：這個(gè)是編寫的 js 文件，后綴 .js 這里不需要使用，配置好正確路徑即可正常應(yīng)用到（應(yīng)用不到在重啟微信開發(fā)者工具會(huì)直接報(bào) page 錯(cuò)誤）。

• Window：配置頂部的一些樣式，文檔介紹比較詳細(xì)。

• tabBar：底部的幾項(xiàng)配置，見名知意。

• networkTimeout：暫時(shí)沒(méi)發(fā)現(xiàn)用處，建議看文檔。

• 根據(jù)實(shí)際項(xiàng)目需求進(jìn)行添加與更改。

• iconPath 和 selectedIconPath：底部菜單按鈕圖片與得到切換點(diǎn)擊高亮。

• "text"：可以去掉，全部去掉會(huì)發(fā)現(xiàn)底部 tabar 高度會(huì)減少很多。

Json 文件配置好后，根據(jù)項(xiàng)目進(jìn)行文件創(chuàng)建，

Demo：存放的是假數(shù)據(jù)，這一期的開發(fā)工具支持 require，假數(shù)據(jù)使用的是 .js 文件形式，

里面的數(shù)據(jù)結(jié)構(gòu) json 一致，把 data 暴露出去即可。

然后取數(shù)據(jù) require 進(jìn)來(lái)即可，這一點(diǎn)使用很方便；

Images：圖片路徑；

Page：除 tabar 以外的頁(yè)面；

Servise：服務(wù)交付層（與后臺(tái)聯(lián)調(diào)真實(shí)數(shù)據(jù)時(shí)使用）；

Wxss：一些公共的 css 文件。

看到這里大家發(fā)現(xiàn)每個(gè)頁(yè)面都被連帶好三個(gè)不同的后綴。分別頁(yè)面，css，js 目前只能依照這樣，是微信應(yīng)用號(hào)的一個(gè)規(guī)范吧。

Wxss 文件是引入你寫的樣式文件，也可以直接在里面寫樣式。

Js 文件需全部配置到 pages 里面才能生效。

下一章：微信小程序首頁(yè)面開發(fā)。

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

進(jìn)行了各種準(zhǔn)備與配置后，來(lái)到首頁(yè)開發(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，這里用作判斷線上名片以及線下名片。

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è)面的話即是

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è)置。它是在 pp.wxss 里面引用之后才能被映射到全局 APP。

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

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;i<data.length;i++){  //循環(huán)取到需要搜索的關(guān)鍵字對(duì)比

If(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)畫，后期再考慮。）

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)擊掃一掃之后，在開發(fā)者工具即可看到如下效果。

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

左邊的 ABC 跳轉(zhuǎn)，還在繼續(xù)完善中。

這里還有個(gè)左滑刪除名片功能，微信沒(méi)有提供這個(gè)在移動(dòng)端很實(shí)用的功能真的比較遺憾，后面得花點(diǎn)時(shí)間自己寫下后續(xù)完善。

雷峰網(wǎng)原創(chuàng)文章，未經(jīng)授權(quán)禁止轉(zhuǎn)載。詳情見轉(zhuǎn)載須知。