第五章：微信小程序名片夾詳情頁開發
今天加了新干貨！除了開發日志本身，還回答了一些朋友的問題。
閑話不多說，先看下「名片盒」詳情頁的效果圖：
/*********************************************************************
微信小程序全套視頻教程下載地址：http://pan.baidu.com/s/1gf1KLEj
本套視頻教程包含了微信小程序開發的基礎知識，特別適合學習微信小程序開發入門使用，請按照順序觀看學習。
本套教程原來銷售199元，現免費奉送，所有內容都是筆者親自錄制。
需要課程講解中用到的示例源碼請關注微信公眾號：“微little程序”，按照提示獲取源碼。關注成功后，也可直接點擊公眾號中的“視頻教程”菜單，詳細了解獲取配套示例源碼的方式。
拿到示例源碼后，自己再做嘗試，學習會更有效果。
也可掃描下方二維碼關注該公眾號：
******************************************************************************/
備注下大致需求：頂部背后是輪播圖，二維碼按鈕彈出模態框信息、點擊微信欄、點擊存入手機，地址欄需要地圖展示，名片分享也是模態框指引。
首先是輪播圖，autoplay 自動播放，interval 輪播的時間，duration 切換速度，可以根據自己需求去添加。
- Delete：是刪除按鈕，加載進來是隱藏的，需用戶點輪播圖進去后，輪播圖全屏顯示才出來。
- noClickImg 與 ClickImg：切換全屏與非全屏輪播圖，綁定了點擊事件 changeClick 來切換，只是改變樣式即可。
- Block：圖片列表。
- Number_img：當前輪播 index（currentNumber），與圖片 length 集合（cardnum）。
//輪播圖發生改變時改變數字//初始化數據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 )
}//為空或者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 即可。
下一章：微信小程序編輯名片頁面開發（涉及要點：檢索、排序、滑動及頁面交互）。
微信小程序微信公眾號“微little程序”，掃碼關注：