感謝朋友們的支援！這兩天博卡君收到了很多支援和安慰，也認識了很多志同道合的朋友。目前微信公佈的工具和程式碼都不是正式版，隨時有可能調整，大家先體驗和學習為主吧。最近這個教程搞得我也心力交瘁了，雖然苦逼，但很開心。
第五章：微信小程式名片夾詳情頁開發
今天加了新干貨！除了開發日誌本身，還回答了一些朋友的問題。
閒話不多說，先看下「名片盒」詳情頁的效果圖：
備註下大致需求：頂部背後是輪播圖，二維碼按鈕彈出模態框資訊、點選微信欄、點選存入手機，位址列需要地圖展示，名片分享也是模態框指引。
首先是輪播圖，autoplay 自動播放，interval 輪播的時間，duration 切換速度，可以根據自己需求去新增。
- Delete：是刪除按鈕，載入進來是隱藏的，需使用者點輪播圖進去後，輪播圖全屏顯示才出來。
- noClickImg 與 ClickImg：切換全屏與非全屏輪播圖，繫結了點選事件 changeClick 來切換，只是改變樣式即可。
- Block：圖片列表。
- Number_img：當前輪播 index（currentNumber），與圖片 length 集合（cardnum）。
其中 currentNumber：
|
1 2 3 4 5 6 7 8 9 10 11 |
//輪播圖發生改變時改變數字 //初始化資料 Data: { currentNumber: 1 } slidechange: function(e) { var number = e.detail.current; this.setData({ currentNumber: number + 1 }) }, |
這裡可以看到全屏狀態下當關閉按鈕被點選後 getBackStyle，把 changeClick 切換到 imgFullScrenn 待命。
再次點選返回原樣式，
切換後事件又走回到 getBackStyle 了，靈活運用。
重新整理下開發者工具可以看到具體效果如下：
詳情頁可以看到資訊基本都是樣式一樣，可以使用微信提供的迴圈 block。
下面是詳情頁裡面的個人資訊資料，
如果有資訊就顯示出來，沒有資料的不顯示，這裡使用
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
//中文資訊 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狀態。那裡需要它直接繫結資料即可：
|
1 2 3 |
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 即可。
下一章：微信小程式編輯名片頁面開發（涉及要點：檢索、排序、滑動及頁面互動）。