前面我們發布了博卡君的微信小程序開發教程前四章，現在接着更新第五章：微信小程序名片夾詳情頁開發。（第一二章：微信小程序開發教程，第三四章：微信小程序項目結構以及配置&微信小程序首頁面開發）
今天加了新干貨！除了開發日志本身，還回答了一些朋友的問題。
閑話不多說，先看下「名片盒」詳情頁的效果圖：
備注下大致需求：頂部背后是輪播圖，二維碼按鈕彈出模態框信息、點擊微信欄、點擊存入手機，地址欄需要地圖展示，名片分享也是模態框指引。
首先是輪播圖，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 有實現方式）。
可以看下實現的效果：
下一章：微信（小程序）名片盒我的頁面開發。
原文鏈接：https://my.oschina.net/wwnick/blog/750974