第三彈！全球首個微信小程式（應用號）開發教程！通宵吐血趕稿，每日更新！...
感謝朋友們的支援！這兩天博卡君收到了很多支援和安慰，也認識了很多志同道合的朋友。目前微信公佈的工具和程式碼都不是正式版，隨時有可能調整，大家先體驗和學習為主吧。最近這個教程搞得我也心力交瘁了，雖然苦逼，但很開心。今天一口氣更新兩章，週末給自己放鬆一下好好睡一覺，大家慢慢研究吧！
第五章：微信小程式名片夾詳情頁開發
今天加了新干貨！除了開發日誌本身，還回答了一些朋友的問題。
閒話不多說，先看下「名片盒」詳情頁的效果圖：
備註下大致需求：頂部背後是輪播圖，二維碼按鈕彈出模態框資訊、點選微信欄、點選存入手機，位址列需要地圖展示，名片分享也是模態框指引。
首先是輪播圖，autoplay 自動播放，interval 輪播的時間，duration 切換速度，可以根據自己需求去新增。
Delete：是刪除按鈕，載入進來是隱藏的，需使用者點輪播圖進去後，輪播圖全屏顯示才出來。
noClickImg 與 ClickImg：切換全屏與非全屏輪播圖，綁定了點選事件 changeClick 來切換，只是改變樣式即可。
Block：圖片列表。
Number_img：當前輪播 index（currentNumber），與圖片 length 集合（cardnum）。
其中 currentNumber：
//輪播圖發生改變時改變數字//初始化資料
Data:{
currentNumber:1
}
slidechange:function(e){
var number = e.detail.current;
this.setData({
currentNumber:number+1
})
},
這裡可以看到全屏狀態下當關閉按鈕被點選後 getBackStyle，把 changeClick 切換到 imgFullScrenn 待命。
再次點選返回原樣式，
切換後事件又走回到 getBackStyle 了，靈活運用。
重新整理下開發者工具可以看到具體效果如下：
詳情頁可以看到資訊基本都是樣式一樣，可以使用微信提供的迴圈 block。
下面是詳情頁裡面的個人資訊資料，
如果有資訊就顯示出來，沒有資料的不顯示，這裡使用
//中文資訊
var chinaMessage = res.card.groups[0].fields;
var personMessage= []
for(var i = 0;i<chinaMessage.length;i++){
personMessage.push(chinaMessage[i])
}
//為空或者null是不顯示判斷
for(var k in personMessage){
if(personMessage[k].value==null || personMessage[k].value==""){
personMessage[k]["display"] = "none";
}else{
personMessage[k]["display"] = "block";
}
}
具體以 json 資料格式來處理，我們需要做的就是給它繫結 display 的值，然後我們呼叫即可。
微信此版本的 setData 不支援非同步更新資料，故而我們在發生真實網路資料請求時一定要在後面加上 forceUpdata()，強制觸發檢視渲染，否則會出現很多莫名其妙的 bug。
這裡說明下：如是伺服器真實資料。
可以看到會報錯，可能是 js 的執行順序，依次往下走，此時網路資料還在請求中。
定義一個變數即可。
當然這裡的資料都是 push 上來的。
以下是二維碼彈出資訊。
這是彈出模態框二維碼資訊，布好局初始化是none狀態。那裡需要它直接繫結資料即可：
This.setData({//模態框名字:”顯示？隱藏”
})
方法是讓它顯示。
需要用他的地方呼叫方法即可。(支援重複呼叫)
詳情頁公司位置地圖直接呼叫微信提供的介面實現（群裡的 demo 有實現方式）。
可以看下實現的效果：
下一章：微信（小程式）名片盒我的頁面開發。
第六章：微信小程式「名片盒」「我」的頁面開發
效果圖與需求：
使用者有多張名片，需要左右切換檢視，往下切換是選單按鈕。
這裡需求兩處滑動，用到了微信提供給我們的滑動元件 swiper，並且進行了巢狀使用，第一層是名片展示與選單按鈕的上下滑動，第二層是名片展示的左右滑動（支援互相巢狀使用的，可以放心使用）。
Vertical 加上就是縱向滑動，去掉即是左右滑動。
整體結構如下所示：
點選事件繫結的是資料切換方式，因為需要支援多次點選切換。
初始化資料是 nextSlide：
再看下 nextSlide 事件。currentSlide 是當前頁面的 index，改變它即可完成切換效果，可以看上圖初始化資料時設定了 cs 是 0。
因而賦值當前 data.cs+1 即可，再把繫結點選事件 clickNext 切換成 nextSlideAgain。
再看下 nextSlideAgain 事件，執行的減去 1 個索引，實現多次點選切換效果。
具體效果可以看到。
點選個人名片進去編輯名片頁面，由於需要帶參，故而使用的是 wx.navgateTo。
可以看下效果：
最後上點乾貨：
我們發出第一篇教程的時候有人就注意到這點了，怎麼做真實資料互動，下面大家可以瞭解下。
首先進去是 MD5 加密，requster 互動層。
怎麼引用 MD5.js？當然是模組化 require，被引用的 js 不要忘記 module.exports 出來。
下面是 requester.js 引用 MD5.js。
ApplicationRoot 是伺服器地址（配置伺服器時在開發設定頁面檢視 AppID 和 AppSecret，配置伺服器域名）。
Require.js 這裡 module.exports 是暴露方法出去。
這時候在全域性 app.js 裡面引入 require.js 對映到全域性 global，這個 global 是全域性的。
這時候那個頁面需要那個頁面就直接去接受吧，模組化是不是很好用？
可以完整的看下與後臺做資料互動的一個請求實現方式如下：
圖一是 requester.js 裡面的封裝。
圖二是需要呼叫資料的頁面渲染。
大家有什麼疑問可以多指點，會在下一章說明一些已知疑問。
應該有一些人喜歡 sublime 編輯器，有人問怎麼切換高亮，在你的右下角直接切換成 html 即可。
下一章：微信小程式編輯名片頁面開發（涉及要點：檢索、排序、滑動及頁面互動）。
QQ 群號：
371736433（二群，可加）
383863133（三群，可加）
375772941（總群，2000 人已滿）
全球首個微信應用號開發教程第四彈！(coming soon)
轉載於:https://my.oschina.net/wwnick/blog/750974