感謝朋友們的支援！這兩天博卡君收到了很多支援和安慰，也認識了很多志同道合的朋友。目前微信公布的工具和代碼都不是正式版，随時有可能調整，大家先體驗和學習為主吧。最近這個教程搞得我也心力交瘁了，雖然苦逼，但很開心。今天一口氣更新兩章，周末給自己放松一下好好睡一覺，大家慢慢研究吧！
第五章：微信小程式名片夾詳情頁開發
今天加了新幹貨！除了開發日志本身，還回答了一些朋友的問題。
閑話不多說，先看下「名片盒」詳情頁的效果圖：
備注下大緻需求：頂部背後是輪播圖，二維碼按鈕彈出模态框資訊、點選微信欄、點選存入手機，位址欄需要地圖展示，名片分享也是模态框指引。
首先是輪播圖，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 即可。
轉載自：https://my.oschina.net/wwnick/blog/750974
歡迎關注微信公衆平台：上帝派來改造世界的人
如果您覺得本文對你有用，不妨幫忙點個贊，或者在評論裡給我一句贊美，小小成就都是今後繼續為大家編寫優質文章的動力！
歡迎您持續關注我的部落格：)
作者：Ken Wang
出處：http://www.cnblogs.com/Wolfmanlq/
版權所有，歡迎保留原文連結進行轉載：)