第二彈！全球首個微信小程序（應用號）開發教程！通宵吐血趕稿！每日更新！

今天一波三折，承受了超出預料的壓力和煎熬，最後仍是決定繼續放出個人更新教程。我想我一沒有泄露公司的代碼，二沒有提供泄露開發工具下載，只是從程序猿角度寫了篇開發日誌。我已經作好了最壞的準備，就算放棄這份工做，也會把完成的教程交給「名片盒」的團隊繼續更新發佈下去！作了就毫不後悔！只是博卡君水平有限，文章還請各位多包容。

以上！開始吧：

小提示：

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（三羣