6
雷鋒網按：本文作者博卡君，一名程序猿。雷鋒網已獲作者授權發布。未經授權拒絕轉載！
今天一波三折，承受了超出預料的壓力和煎熬，最后還是決定繼續放出我的更新教程。我想我一沒有泄露公司的代碼，二沒有提供泄露開發工具下載，只是從程序猿角度寫了篇開發日志。我已經做好了最壞的準備，就算放棄這份工作，也會把完成的教程交給名片盒的團隊繼續更新發布下去！做了就絕不后悔！只是博卡君水平有限，文章還請各位多包容。
以上！開始吧：
小提示：
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 跳轉，還在繼續完善中。
這里還有個左滑刪除名片功能，微信沒有提供這個在移動端很實用的功能真的比較遺憾，后面得花點時間自己寫下后續完善。
雷峰網原創文章，未經授權禁止轉載。詳情見轉載須知。
專題
