微信小程式開發教程！博卡君第二彈【微信小程式專案結構以及配置】
前面我們轉了博卡君通宵吐血趕稿的微信小程式開發教程，當時只更新了兩章，現在接著釋出第三章：微信小程式專案結構以及配置，第四章：微信小程式首頁面開發，以下是微信小程式教程
找到建立的 demo 資料夾，把專案匯入到你的編輯器，這裡使用的是 Sublime Text 編輯器。
這個時候需要根據自己的專案需求結構進行更改了，專案根目錄下面是首頁渲染的幾個 tabBar 頁面，以及 app 的一些配置檔案，如名片盒專案的 tabBar 是 3 個切換選單：
我們先找到 app.json 檔案開啟配置好這幾個選單，配置好 tabBar，這個直接把配置檔案改成你自己設計的即可。
App.json 裡面有幾個配置項：
- Pages：這個是編寫的 js 檔案，字尾 .js 這裡不需要使用，配置好正確路徑即可正常應用到（應用不到在重啟微信開發者工具會直接報 page 錯誤）。
- Window：配置頂部的一些樣式，文件介紹比較詳細。
- tabBar：底部的幾項配置，見名知意。
- networkTimeout：暫時沒發現用處，建議看文件。
- 根據實際專案需求進行新增與更改。
- iconPath 和 selectedIconPath：底部選單按鈕圖片與得到切換點選高亮。
- "text"：可以去掉，全部去掉會發現底部 tabar 高度會減少很多。
Json 檔案配置好後，根據專案進行檔案建立，
Demo：存放的是假資料，這一期的開發工具支援 require，假資料使用的是 .js 檔案形式，
裡面的資料結構 json 一致，把 data 暴露出去即可。
然後取資料 require 進來即可，這一點使用很方便；
Images：圖片路徑；
Page：除 tabar 以外的頁面；
Servise：服務交付層（與後臺聯調真實資料時使用）；
Wxss：一些公共的 css 檔案。
看到這裡大家發現每個頁面都被連帶好三個不同的字尾。分別頁面，css，js 目前只能依照這樣，是微信應用號的一個規範吧。
Wxss 檔案是引入你寫的樣式檔案，也可以直接在裡面寫樣式。
Js 檔案需全部配置到 pages 裡面才能生效。
下一章：微信小程式首頁面開發。
第四章：微信小程式首頁面開發
進行了各種準備與配置後，來到首頁開發。首先需要實現首頁效果圖如下：
Template 名片很多，需要用模板。
這裡需要微信提供的基礎元件大致是 input（搜尋框）、
action-sheet（右邊是個底部下拉選單，需要下拉選單）、
Scroll-view (右邊 ABC 跳轉)、（這個目前實現還有點問題，正在攻克中）。
View 是塊元素，整個搜尋框的一個樣式。
- 名片夾：由於該專案主打名片功能，故很多地方使用，所以需要把名片以 template 分離出來。
- Template：定義一個模板，name 模板的名字其實是個作用域。
- Block：迴圈控制，名片很多，必須用迴圈出來，和很多操作資料的前端框架迴圈差不多。
- 支援自定義屬性 data，這裡用作判斷線上名片以及線下名片。
View 裡面是一些資料引入，裡面是支援三目運算子。
引入 template 時非常方便，is 和 name 一樣，data 是 nameData 傳遞過來的資料填充。
一切都繫結資料為中心點。
取到資料具體操作根據你資料結構：
這裡的資料結構和 json 資料結構一樣，
這裡如要傳到頁面的話即是
this.setData({
nameData:card_list_name.data.cards,
timeData:card_list_time.data.cards
});因為頁面遍歷的是 nameData,timeData
可以看下打印出來的資料結構，根據你的結構進行解析與傳遞。
也可以看下這裡對資料的一些操作。（這裡須根據定義的 json 資料格式來操作的）
名片的樣式由於很多頁面需要使用放在 common.css 裡面，這個 common.css 是所有頁面都需要用到，一些初始化設定。它是在 pp.wxss 裡面引用之後才能被對映到全域性 APP。
搜尋框：其中 bindChange 為輸入框發生改變事件。微信提供的 bindchange 在支援方面還有小問題，目前是失去焦點才能觸發到此事件的發生，待後續完善吧，先實現功能再說。
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;i<data.length;i++){ //迴圈取到需要搜尋的關鍵字對比
If(data[i].userName!=null&& data[i].userName.indexOf(Text)!=-1){
data[i]["display"]= "block"; //存在就是賦值顯示
}else{
data[i]["display"]= "none"; // 不存在賦值不顯示
}
}
}
}
選單欄：做到選單欄，使用微信提供的下拉選單元件 action-sheet，它被觸發的條件在這裡。
一切以繫結事件為起點：
bindButtonTapSheet:function(e){
//調取底部下拉選單欄
}還是得先布好局才能被調動。
Js 配置：
Data 初始化資料：
這裡得取非，直接設定 false 調不出來: 呼叫事件。
調出來還得去掉它啊：如下相同即可
取消直接上事件即可。（分為選單欄外部與底部）
//好了，就是這麼簡單。實現效果簡單，體驗效果確實非常不錯。
還需要個 loading 效果（暫時沒做動畫，後期再考慮。）
Loading 佈局
首頁的最外層 view
根據微信的生命週期
Onload:function(e){
this.setData({
toastDisplay:”block”,
htmlWrapDisplay:”none”
})
},
onShow:function(e){
this.setData({
toastDisplay:”none”,
htmlWrapDisplay:”block”
})
}載入條完成。
掃一掃，直接呼叫拍照功能，從這裡看到微信提供的拍照 api 使用起來非常快速，只需根據需求配置即可。
點選掃一掃之後，在開發者工具即可看到如下效果。
做到這裡說明下，dom 長度有限制，頁面的結構太長，也是無法渲染的，暫且把公司排序暫時先去掉了。
左邊的 ABC 跳轉（還在繼續完善中）。
這裡還有個左滑刪除名片功能，微信沒有提供這個在移動端很實用的功能真的比較遺憾，後面得花點時間自己寫下（後續完善）。
好了，今天更新的內容就先到這裡。後續的內容「名片盒」的服務號會按照約定幫我每日更新發布出來。大家每天可以進到這個服務號輸入「應用號」、「小程式」或者「教程」，能獲取教程更新列表。
原文連結：https://my.oschina.net/wwnick/blog/750495