今天一波三折，承受了超出預料的壓力和煎熬，最後還是決定繼續放出我的更新教程。我想我一沒有洩露公司的代碼，二沒有提供洩露開發工具下載下傳，隻是從程式猿角度寫了篇開發日志。我已經做好了最壞的準備，就算放棄這份工作，也會把完成的教程交給「名片盒」的團隊繼續更新釋出下去！做了就絕不後悔！隻是博卡君水準有限，文章還請各位多包容。
以上！開始吧：
小提示：
http://wxopen.notedown.cn/
這裡面複刻了微信小程式的 api
第三章：微信小程式項目結構以及配置
找到建立的 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 跳轉（還在繼續完善中）。
這裡還有個左滑删除名片功能，微信沒有提供這個在移動端很實用的功能真的比較遺憾，後面得花點時間自己寫下（後續完善）。
好了，今天更新的内容就先到這裡。後續的内容「名片盒」的服務号會按照約定幫我每日更新釋出出來。大家每天可以進到這個服務号輸入「應用号」、「小程式」或者「教程」，能擷取教程更新清單。
感謝「名片盒」團隊的信任和全力支援。
博卡君之是以選擇這個服務号動手術，是因為從服務号角度它更像一個 APP 化的工具，相比我們公司在做的媒體性服務号，更有工具化改造價值：裡面包括調用掃描、檢索、分享、積分等複雜功能。感興趣的朋友可以對照現在的服務号和開發教程印證。
好了，不羅嗦了。教程會在「名片盒」和開源中國保持更新，QQ 群就當做大家互相交流學習的平台吧，有興趣的朋友也可以來。
QQ 群号：
371736433（二群）
383863133（三群
歡迎關注微信公衆平台：上帝派來改造世界的人
如果您覺得本文對你有用，不妨幫忙點個贊，或者在評論裡給我一句贊美，小小成就都是今後繼續為大家編寫優質文章的動力！
歡迎您持續關注我的部落格：)
作者：Ken Wang
出處：http://www.cnblogs.com/Wolfmanlq/
版權所有，歡迎保留原文連結進行轉載：)