第三彈！全球首個微信小程序（應用號）開發教程！通宵吐血趕稿，每日更新！

感謝朋友們的支持！這兩天博卡君收到了不少支持和安慰，也認識了不少志同道合的朋友。目前微信公佈的工具和代碼都不是正式版，隨時有可能調整，你們先體驗和學習爲主吧。最近這個教程搞得我也心力交瘁了，雖然苦逼，但很開心。今天一口氣更新兩章，週末給本身放鬆一下好好睡一覺，你們慢慢研究吧！

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

 
今天加了新干貨！除了開發日誌自己，還回答了一些朋友的問題。

閒話很少說，先看下「名片盒」詳情頁的效果圖：

 

備註下大體需求：頂部背後是輪播圖，二維碼按鈕彈出模態框信息、點擊微信欄、點擊存入手機，地址欄須要地圖展現，名片分享也是模態框指引。

首先是輪播圖，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 便可。

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

QQ 羣號：

371736433（二羣，可加）

383863133（三羣，可加）

375772941（總羣，2000 人已滿）

 

全球首個微信應用號開發教程第一彈！

全球首個微信應用號開發教程第二彈！

全球首個微信應用號開發教程第四彈！(coming soon)