雷鋒網(wǎng) (搜索“雷鋒網(wǎng)”公眾號關(guān)注) 按 ：本文作者博卡君，一名程序猿。雷鋒網(wǎng)已獲作者授權(quán)發(fā)布。未經(jīng)授權(quán)拒絕轉(zhuǎn)載！

本文是微信小程序開發(fā)教程系列第三篇， 讀本文之前可以先看看這兩篇：

重磅 | 微信應(yīng)用號，小程序最新開發(fā)教程

微信應(yīng)用號，小程序最新開發(fā)教程第二彈

感謝朋友們的支持！這兩天博卡君收到了很多支持和安慰，也認識了很多志同道合的朋友。目前微信公布的工具和代碼都不是正式版，隨時有可能調(diào)整，大家先體驗和學習為主吧。最近這個教程搞得我也心力交瘁了，雖然苦逼，但很開心。

第五章：微信小程序名片夾詳情頁開發(fā)

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

閑話不多說，先看下名片盒詳情頁的效果圖：

?

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

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

Delete：是刪除按鈕，加載進來是隱藏的，需用戶點輪播圖進去后，輪播圖全屏顯示才出來。

noClickImg 與 ClickImg：切換全屏與非全屏輪播圖，綁定了點擊事件 changeClick 來切換，只是改變樣式即可。

Block：圖片列表。

Number_img：當前輪播 index（currentNumber），與圖片 length 集合（cardnum）。

其中 currentNumber：

//輪播圖發(fā)生改變時改變數(shù)字

//初始化數(shù)據(jù)

Data:{

currentNumber:1

}

???????? slidechange:function(e){

?????????????????? var number = e.detail.current;

?????????????????? this.setData({

??????????????????????????? currentNumber:number+1

?????????????????? })

???????? },

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

?

再次點擊返回原樣式， ，切換后事件又走回到 getBackStyle 了，靈活運用。

?

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

?

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

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

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

?

//中文信息

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 數(shù)據(jù)格式來處理，我們需要做的就是給它綁定 display 的值，然后我們調(diào)用即可。

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

?

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

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

?

定義一個變量即可。

?

當然這里的數(shù)據(jù)都是 push 上來的。

以下是二維碼彈出信息。

?

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

This.setData({

???????? //模態(tài)框名字:”顯示？隱藏”

})

?

方法是讓它顯示。

?

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

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

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

?

?

下一章：微信（小程序）我的頁面開發(fā)。

第六章：微信小程序我的頁面開發(fā)

效果圖與需求：

?

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

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

Vertical加上就是縱向滑動，去掉即是左右滑動。

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

?

點擊事件綁定的是數(shù)據(jù)切換方式，因為需要支持多次點擊切換。

?

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

?

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

?

因而賦值當前 data.cs+1 即可，再把綁定點擊事件 clickNext 切換成 nextSlideAgain。

?

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

?

具體效果可以看到。

點擊個人名片進去編輯名片頁面，由于需要帶參，故而使用的是 wx.navgateTo。

可以看下效果：

?

最后上點干貨：

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

首先進去是 MD5 加密，requster 交互層。

?

怎么引用 MD5.js？當然是模塊化 require，被引用的 js 不要忘記 module.exports 出來。

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

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

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

?

這時候在全局 app.js 里面引入 require.js 映射到全局 global，這個 global 是全局的。

?

這時候那個頁面需要那個頁面就直接去接受吧，模塊化是不是很好用？

?

可以完整的看下與后臺做數(shù)據(jù)交互的一個請求實現(xiàn)方式如下：

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

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

大家有什么疑問可以多指點，會在下一章說明一些已知疑問。

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

下一章：微信小程序編輯名片頁面開發(fā)（涉及要點：檢索、排序、滑動及頁面交互）。

相關(guān)閱讀：

不必高估微信小程序，也不必低看百度賣91

翻遍“微信小程序”的所有知乎問答，我們整理了