編者按：本文來(lái)源于微信公眾號(hào)“名片盒”（ID：iBeacardbox），作者博卡君。

感謝朋友們的支持！這兩天博卡君收到了很多支持和安慰，也認(rèn)識(shí)了很多志同道合的朋友。目前微信公布的工具和代碼都不是正式版，隨時(shí)有可能調(diào)整，大家先體驗(yàn)和學(xué)習(xí)為主吧。

微信小程序名片夾詳情頁(yè)開(kāi)發(fā)

今天加了新干貨！除了開(kāi)發(fā)日志本身，還回答了一些朋友的問(wèn)題。

閑話不多說(shuō)，先看下「名片盒」詳情頁(yè)的效果圖：

備注下大致需求：頂部背后是輪播圖，二維碼按鈕彈出模態(tài)框信息、點(diǎn)擊微信欄、點(diǎn)擊存入手機(jī)，地址欄需要地圖展示，名片分享也是模態(tài)框指引。

首先是輪播圖，autoplay 自動(dòng)播放，interval 輪播的時(shí)間，duration 切換速度，可以根據(jù)自己需求去添加。

• Delete：是刪除按鈕，加載進(jìn)來(lái)是隱藏的，需用戶點(diǎn)輪播圖進(jìn)去后，輪播圖全屏顯示才出來(lái)。

• noClickImg 與 ClickImg：切換全屏與非全屏輪播圖，綁定了點(diǎn)擊事件 changeClick 來(lái)切換，只是改變樣式即可。

• Block：圖片列表。

• Number_img：當(dāng)前輪播 index（currentNumber），與圖片 length 集合（cardnum）。

其中 currentNumber：

這里可以看到全屏狀態(tài)下當(dāng)關(guān)閉按鈕被點(diǎn)擊后 getBackStyle，把 changeClick 切換到 imgFullScrenn 待命。

再次點(diǎn)擊返回原樣式，

切換后事件又走回到 getBackStyle 了，靈活運(yùn)用。

刷新下開(kāi)發(fā)者工具可以看到具體效果如下：

詳情頁(yè)可以看到信息基本都是樣式一樣，可以使用微信提供的循環(huán) block。

下面是詳情頁(yè)里面的個(gè)人信息數(shù)據(jù)，

如果有信息就顯示出來(lái)，沒(méi)有數(shù)據(jù)的不顯示，這里使用

具體以 json 數(shù)據(jù)格式來(lái)處理，我們需要做的就是給它綁定 display 的值，然后我們調(diào)用即可。

微信此版本的 setData 不支持異步更新數(shù)據(jù)，故而我們?cè)诎l(fā)生真實(shí)網(wǎng)絡(luò)數(shù)據(jù)請(qǐng)求時(shí)一定要在后面加上 forceUpdata()，強(qiáng)制觸發(fā)視圖渲染，否則會(huì)出現(xiàn)很多莫名其妙的 bug。

這里說(shuō)明下：如是服務(wù)器真實(shí)數(shù)據(jù)。

可以看到會(huì)報(bào)錯(cuò)，可能是 js 的執(zhí)行順序，依次往下走，此時(shí)網(wǎng)絡(luò)數(shù)據(jù)還在請(qǐng)求中。

定義一個(gè)變量即可。

當(dāng)然這里的數(shù)據(jù)都是 push 上來(lái)的。

以下是二維碼彈出信息。

這是彈出模態(tài)框二維碼信息，布好局初始化是none狀態(tài)。那里需要它直接綁定數(shù)據(jù)即可：

方法是讓它顯示。

需要用他的地方調(diào)用方法即可。(支持重復(fù)調(diào)用)

詳情頁(yè)公司位置地圖直接調(diào)用微信提供的接口實(shí)現(xiàn)（群里的 demo 有實(shí)現(xiàn)方式）。

可以看下實(shí)現(xiàn)的效果：

微信小程序「名片盒」「我」的頁(yè)面開(kāi)發(fā)

效果圖與需求：

用戶有多張名片，需要左右切換查看，往下切換是菜單按鈕。

這里需求兩處滑動(dòng)，用到了微信提供給我們的滑動(dòng)組件 swiper，并且進(jìn)行了嵌套使用，第一層是名片展示與菜單按鈕的上下滑動(dòng)，第二層是名片展示的左右滑動(dòng)（支持互相嵌套使用的，可以放心使用）。

Vertical 加上就是縱向滑動(dòng)，去掉即是左右滑動(dòng)。

整體結(jié)構(gòu)如下所示：

點(diǎn)擊事件綁定的是數(shù)據(jù)切換方式，因?yàn)樾枰С侄啻吸c(diǎn)擊切換。

初始化數(shù)據(jù)是 nextSlide：

再看下 nextSlide 事件。currentSlide 是當(dāng)前頁(yè)面的 index，改變它即可完成切換效果，可以看上圖初始化數(shù)據(jù)時(shí)設(shè)置了 cs 是 0。

因而賦值當(dāng)前 data.cs+1 即可，再把綁定點(diǎn)擊事件 clickNext 切換成 nextSlideAgain。

再看下 nextSlideAgain 事件，執(zhí)行的減去 1 個(gè)索引，實(shí)現(xiàn)多次點(diǎn)擊切換效果。

具體效果可以看到。

點(diǎn)擊個(gè)人名片進(jìn)去編輯名片頁(yè)面，由于需要帶參，故而使用的是 wx.navgateTo。

可以看下效果：

最后上點(diǎn)干貨：

我們發(fā)出第一篇教程的時(shí)候有人就注意到這點(diǎn)了，怎么做真實(shí)數(shù)據(jù)交互，下面大家可以了解下。

首先進(jìn)去是 MD5 加密，requster 交互層。

怎么引用 MD5.js？當(dāng)然是模塊化 require，被引用的 js 不要忘記 module.exports 出來(lái)。

下面是 requester.js 引用 MD5.js。

ApplicationRoot 是服務(wù)器地址（配置服務(wù)器時(shí)在開(kāi)發(fā)設(shè)置頁(yè)面查看 AppID 和 AppSecret，配置服務(wù)器域名）。

Require.js 這里 module.exports 是暴露方法出去。

這時(shí)候在全局 app.js 里面引入 require.js 映射到全局 global，這個(gè) global 是全局的。

這時(shí)候那個(gè)頁(yè)面需要那個(gè)頁(yè)面就直接去接受吧，模塊化是不是很好用？

可以完整的看下與后臺(tái)做數(shù)據(jù)交互的一個(gè)請(qǐng)求實(shí)現(xiàn)方式如下：

圖一是 requester.js 里面的封裝。

圖二是需要調(diào)用數(shù)據(jù)的頁(yè)面渲染。

大家有什么疑問(wèn)可以多指點(diǎn)，會(huì)在下一章說(shuō)明一些已知疑問(wèn)。

應(yīng)該有一些人喜歡 sublime 編輯器，有人問(wèn)怎么切換高亮，在你的右下角直接切換成 html 即可。

下一章：微信小程序編輯名片頁(yè)面開(kāi)發(fā)（涉及要點(diǎn)：檢索、排序、滑動(dòng)及頁(yè)面交互）。大家在名片盒的公眾號(hào)回復(fù)「應(yīng)用號(hào)」「小程序」「教程」都能獲得最新內(nèi)容。