之前微信自己和各方頻頻提起「應(yīng)用號(hào)」，應(yīng)用號(hào)作為繼公眾號(hào)之后的又一大風(fēng)口，一開始的半年到一年是紅利期，抓住了紅利期至少少奮斗5年，無論對(duì)個(gè)人還是企業(yè)而言其重要性不言而喻。

9月21日微信悍然發(fā)布了微信「小程序」，并且在小范圍的邀請(qǐng)內(nèi)測，為了讓更多開發(fā)者了解平臺(tái)新能力進(jìn)行開發(fā)小程序和模擬運(yùn)行效果，為尚未獲得內(nèi)測邀請(qǐng)的開發(fā)者提供如下文檔和工具：

1. 小程序開發(fā)文檔

2. 小程序設(shè)計(jì)指南

3. 小程序開發(fā)者工具

具體文檔地址：https://mp.weixin.qq.com/wiki/

張小龍?jiān)谂笥讶@樣說：

這無疑引起各大媒體爭相報(bào)道，產(chǎn)品開發(fā)技術(shù)人員也紛紛進(jìn)行測試模擬運(yùn)行效果并發(fā)表自己的體驗(yàn)的看法。下面小編就根據(jù)自身體驗(yàn)并整合博卡君以「名片盒」公眾號(hào)為材料制作的完整教程發(fā)布給大家。

首先在進(jìn)行小程序開發(fā)之前我們需要了解他是怎么運(yùn)行的，我們就結(jié)合微信小程序「官方示例代碼」進(jìn)行相關(guān)的講解。

微信小程序運(yùn)行機(jī)制

首先你需要有下面的工具啦 

• Mac電腦

• 微信web開發(fā)者工具.app

• WebStorm / 其他編程器 或 IDE，最好可以支持重命名

首先，我們需要右鍵微信web開發(fā)者工具.app，然后顯示包的內(nèi)容，在 Contents/Resources/app.nw下面的內(nèi)容即是我們的代碼，拷貝出來啦：

簡單的說明一下：

• app/ 目錄下放置了app的代碼

• modified_modules/ 即一些修改后的模塊

• node_modules/ 地球人都知道

• package.json 呵呵，你一定是知道的，配置了NW相關(guān)的內(nèi)容

在modified_modules目錄下有兩個(gè)子模塊：

• anyproxy，從名字就可以看起來這是一個(gè)代理模塊

• weinre，遠(yuǎn)程調(diào)試工具

我們已經(jīng)知道了這是一個(gè)NodeWebkit封裝的Web應(yīng)用了。

在package.json中的'main': 'app/html/index.html',，即定義了這個(gè)APP的入口是這個(gè)index.html，而不是別的文件。

很順利的我們看到了他們調(diào)用的文件了：

這里面有一個(gè)init方法，看來他就是NodeWebkit相關(guān)的入口了。用WebStorm的shift f6 RENAME 這些變量好十幾次，終于看到了下面的代碼了：

這是一個(gè)React應(yīng)用，還好我一年多以前學(xué)得不錯(cuò)。掃視了一下代碼，終于看到了這一句：

直接跳轉(zhuǎn)到ContainController.js，跳轉(zhuǎn)到render方法，找到了這個(gè)：

果然Main里面就是大入口了

對(duì)應(yīng)的就是下面這個(gè)界面了：

• edit 就是編輯器及其相關(guān)的事項(xiàng)

• detail就是項(xiàng)目的配置

補(bǔ)充一下咯，其中的編輯環(huán)境是基于Monaco

慢慢的就探索到了打包，其運(yùn)行時(shí)的過程。由于我并沒有拿到內(nèi)測資格，所以我只好邊看邊猜測一下。

在之前的文章中，我們提到了兩點(diǎn)很有意思的東西：wxml和wxss，這兩個(gè)文件會(huì)被分別轉(zhuǎn)換，即wxml -> html，wxss -> css。對(duì)應(yīng)的有幾個(gè)不同的transform:

• transWxmlToJs

• transWxssToCss

• transConfigToPf

• transWxmlToHtml

• transManager

這里的PF指代的是PageFrame的意思，pageFrame有一個(gè)對(duì)應(yīng)的模板文件：

這種風(fēng)格一看就是生成字符串Replace的，然后他們寫了一個(gè)名為wcc以及一個(gè)名為wcsc的工具。

• wcc用于轉(zhuǎn)轉(zhuǎn)wxml中的自定義tag為virtual_dom

• wcsc，我觀察到的現(xiàn)象是它為轉(zhuǎn)換wxss為css

這樣的話，我們就可以理解為微信小應(yīng)用有點(diǎn)類似于 Virtual Dom WebView，畢竟上面有個(gè)WAWebView文件 ，還有一個(gè)webviewSDK文件 。

當(dāng)然無論是React WebView，或者Vue WebView都不重要，現(xiàn)在有了 WA WebView了，哈哈。

WeApp采用的是如下圖所示的提交方式，所以：

你在本地寫的WeApp都會(huì)被提交到微信服務(wù)器，然后打包，上傳到服務(wù)器，交給CDN——畢竟為了分發(fā)。

上傳的過程大致如下：

• APP會(huì)被打包成以日期命名  .wx文件

• IDE會(huì)檢測包的大小，并提示：代碼包大小為 xx kb，超過限制 xx kb，請(qǐng)刪除文件后重試。這個(gè)xx好像是1024，所以APP的大小是1M。

• APP將會(huì)上傳到 https:///wxa-dev/commitsource/?appid=xx&user-version=&user-desc=xx

  
  

微信小程序開發(fā)教程

微信官方也給出了相應(yīng)的簡易教程，但很多細(xì)節(jié)、代碼、功能都沒有明確的展示，下面就將博卡君以「名片盒」公眾號(hào)為材料制作的完整教程發(fā)布給大家。

第一章：準(zhǔn)備工作

做好準(zhǔn)備工作很重要。開發(fā)一個(gè)微信應(yīng)用號(hào)，你需要提前到微信的官方網(wǎng)站（weixin.qq.com）下載開發(fā)者工具。

1. 下載最新微信開發(fā)者工具，打開后你會(huì)看到該界面：

2. 點(diǎn)擊「新建 web 」項(xiàng)目，隨后出現(xiàn)如下畫面：

3. 該頁面內(nèi)的各項(xiàng)內(nèi)容需要注意——

• AppID：依照官方解釋來填。
  

• Appname: 項(xiàng)目最外層文件夾名稱，如你將其命名為「ABC」，則之后的全部項(xiàng)目內(nèi)容均將保存在「/ABC/…」目錄下。

• 本地開發(fā)目錄：項(xiàng)目存放在本地的目錄。

注：再次強(qiáng)調(diào)，如果你和團(tuán)隊(duì)成員共同開發(fā)該項(xiàng)目，則建議你們使用同樣的目錄名稱及本地目錄，以確保協(xié)同開發(fā)的統(tǒng)一性。如果你之前已有項(xiàng)目，則導(dǎo)入過程與以上內(nèi)容近似，不再贅述。

4. 準(zhǔn)備工作全部完成后，點(diǎn)擊「新建項(xiàng)目」按鈕，彈出框點(diǎn)「確定」。

5. 如上圖所示，此刻，微信開發(fā)者工具已經(jīng)為你自動(dòng)構(gòu)建了一個(gè)初始的 demo 項(xiàng)目，該項(xiàng)目內(nèi)包含了一個(gè)微信應(yīng)用項(xiàng)目所需具備的基本內(nèi)容和框架結(jié)構(gòu)。點(diǎn)擊項(xiàng)目名稱（圖中即「cards」）進(jìn)入該項(xiàng)目，就能看到整個(gè)項(xiàng)目的基本架構(gòu)了：

第二章：項(xiàng)目構(gòu)架

微信目前用戶群體非常龐大，微信推出公眾號(hào)以后，火爆程度大家都看得到，也同樣推動(dòng)著 Html 5 的高速發(fā)展，隨著公眾號(hào)業(yè)務(wù)的需求越來越復(fù)雜，應(yīng)用號(hào)現(xiàn)在的到來也是恰到好處。

博卡君發(fā)現(xiàn)，微信提供給開發(fā)者的方式也在發(fā)生全面的改變：從操作 DOM 轉(zhuǎn)為操作數(shù)據(jù)，基于微信提供的一個(gè)過橋工具實(shí)現(xiàn)很多 Html 5 在公眾號(hào)很難實(shí)現(xiàn)的功能，有點(diǎn)類似于 hybrid 開發(fā)，不同于 hybrid 開發(fā)的方式是：微信開放的接口更為嚴(yán)謹(jǐn)，結(jié)構(gòu)必須采用他提供給的組件，外部的框架和插件都不能在這里使用上，讓開發(fā)者完全脫離操作 DOM，開發(fā)思想轉(zhuǎn)變很大。

工欲善其事，必先利其器。理解它的核心功能非常重要，先了解它的整個(gè)運(yùn)作流程。

生命周期：

在index.js里面：

開發(fā)者工具上 Console 可以看到：

在首頁 console 可以看出順序是 App Launch-->App Show-->onLoad-->onShow-->onReady。

首先是整個(gè) app 的啟動(dòng)與顯示，app 的啟動(dòng)在 app.js 里面可以配置，其次再進(jìn)入到各個(gè)頁面的加載顯示等等。

可以想象到這里可以處理很多東西了，如加載框之類的都可以實(shí)現(xiàn)等等。

路由：

路由在項(xiàng)目開發(fā)中一直是個(gè)核心點(diǎn)，在這里其實(shí)微信對(duì)路由的介紹很少，可見微信在路由方面經(jīng)過很好的封裝，也提供三個(gè)跳轉(zhuǎn)方法。

wx.navigateTo(OBJECT)：保留當(dāng)前頁面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁面，使用wx.navigateBack可以返回到原頁面。

wx.redirectTo(OBJECT)：關(guān)閉當(dāng)前頁面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁面。

wx.navigateBack()：關(guān)閉當(dāng)前頁面，回退前一頁面。

這三個(gè)基本上使用足夠，在路由方面微信封裝的很好，開發(fā)者根本不用去配置路由，往往很多框架在路由方面配置很繁瑣。

組件：

此次微信在組件提供方面也是非常全面，基本上滿足項(xiàng)目需求，故而開發(fā)速度非?？?，開發(fā)前可以認(rèn)真瀏覽幾次，開發(fā)效率會(huì)很好。

其它：

任何外部框架以及插件基本上無法使用，就算原生的 js 插件也很難使用，因?yàn)橐郧暗?js 插件也基本上全部是一操作 dom 的形式存在，而微信應(yīng)用號(hào)此次的架構(gòu)是不允許操作任何 dom，就連以前開發(fā)者們習(xí)慣使用的動(dòng)態(tài)設(shè)置的rem.js也是不支持的。

此次微信還提供了 WebSocket，就可以直接利用它做聊天，可以開發(fā)的空間非常大。

跟公眾號(hào)對(duì)比博卡君發(fā)現(xiàn)，開發(fā)應(yīng)用號(hào)組件化，結(jié)構(gòu)化，多樣化。新大陸總是充滿著驚喜，更多的彩蛋等著大家來發(fā)現(xiàn)。

接下來開始搞一些簡單的代碼了！

1. 找到項(xiàng)目文件夾，導(dǎo)入你的編輯器里面。在這里，博卡君使用了 Sublime Text 編輯器。你可以根據(jù)自己的開發(fā)習(xí)慣選擇自己喜歡的編輯器。

2. 接下來，你需要根據(jù)自己的項(xiàng)目內(nèi)容調(diào)整項(xiàng)目結(jié)構(gòu)。在范例項(xiàng)目中，「card_course」目錄下面主要包含了「tabBar」頁面以及該應(yīng)用的一些配置文件。

3. 示例項(xiàng)目的「tabBar」是五個(gè)菜單按鈕：

4. 找到「app.json」文件，用來配置這個(gè)五個(gè)菜單。在代碼行中找到「tabBar」：

你可以根據(jù)實(shí)際項(xiàng)目需求更改，其中：

• 「Color」是底部字體顏色，「selectedColor」是切換到該頁面高亮顏色，「borderStyle」是切換菜單上面的一條線的顏色，「backgroundColor」是底部菜單欄背景顏色。文字描述較為抽象，建議你一一調(diào)試并查看其效果，加深印象。

• 「list」下的代碼順序必須依次放置，不能隨便更改。

• 「pagePath」之后的文件名內(nèi)，「.wxml」后綴被隱藏起來了，這是微信開發(fā)代碼中人性化的一點(diǎn)——幫你節(jié)約寫代碼的時(shí)間，無須頻繁聲明文件后綴。

• 「iconPath」為未獲得顯示頁面的圖標(biāo)路徑，這兩個(gè)路徑可以直接是網(wǎng)絡(luò)圖標(biāo)。

• 「selectedIconPath」為當(dāng)前顯示頁面高亮圖標(biāo)路徑，可以去掉，去掉之后會(huì)默認(rèn)顯示為「iconPath」的圖標(biāo)。

• 「Text」為頁面標(biāo)題，也可以去掉，去掉之后純顯示圖標(biāo)，如只去掉其中一個(gè)，該位置會(huì)被占用。

注意：微信的底部菜單最多支持五欄（五個(gè) icons），所以在你設(shè)計(jì)微信應(yīng)用的 UI 和基本架構(gòu)時(shí)就要預(yù)先考慮好菜單欄的排布。

5. 根據(jù)以上代碼規(guī)則，博卡君做好了示例項(xiàng)目的基本架構(gòu)，供你參考：

6. 「Json」文件配置好后，「card_course」的基本結(jié)構(gòu)入上圖所示，不需要的子集都可以暫時(shí)刪除，缺少的子集則需要你主動(dòng)新建。刪除子集時(shí)記得順帶檢查一下「app.json」里的相關(guān)內(nèi)容是否已經(jīng)一并刪除。

注意：博卡君個(gè)人建議你新建一個(gè)「wxml」文件的同時(shí)，把對(duì)應(yīng)的「js」和「wxss」文件一起新建好，因?yàn)槲⑿艖?yīng)用號(hào)的配置特點(diǎn)就是解析到一個(gè)「wxml」文件時(shí)，會(huì)同時(shí)在同級(jí)目錄下找到同文件名的「js」和「wxss」文件，所以「js」文件需及時(shí)在「app.json」里預(yù)先配置好。

編寫「wxml」時(shí)，根據(jù)微信應(yīng)用號(hào)提供的接口編碼即可，大部分就是以前的「div」，而現(xiàn)在就用「view」即可。需要用其它子集時(shí)，可以根據(jù)微信提供的接口酌情選擇。

使用「class」名來設(shè)置樣式，「id」名在這里基本沒有什么用處。主要操作數(shù)據(jù)，不操作「dom」。

7. 以上是示例項(xiàng)目首頁的「wxml」編碼。從圖中就可以看出，實(shí)現(xiàn)一個(gè)頁面代碼量非常少。

8. 「Wxss」文件是引入的樣式文件，你也可以直接在里面寫樣式，示例中采用的是引入方式：

9. 修改代碼后刷新一次，可以看到未設(shè)背景的「view」標(biāo)簽直接變成了粉色。

注意：修改「wxml」和「wxss」下的內(nèi)容后，直接 F5 刷新就能直接看到效果，修改「js」則需點(diǎn)擊重啟按鈕才能看到效果。

10. 另外，公共樣式可以在「app.wxss」里直接引用。

11. 「Js」文件需要在「app.json」文件的「page」里預(yù)先配置好。為了項(xiàng)目結(jié)構(gòu)清晰化，博卡君在示例項(xiàng)目中的「index」首頁同級(jí)目錄新建其它四個(gè)頁面文件，具體如下：

經(jīng)過以上步驟，案例中的五個(gè)底部菜單就全部配置完畢了。

第三章：微信小程序項(xiàng)目結(jié)構(gòu)以及配置

找到創(chuàng)建的 demo 文件夾，把項(xiàng)目導(dǎo)入到你的編輯器，這里使用的是 Sublime Text 編輯器。

這個(gè)時(shí)候需要根據(jù)自己的項(xiàng)目需求結(jié)構(gòu)進(jìn)行更改了，項(xiàng)目根目錄下面是首頁渲染的幾個(gè) tabBar 頁面，以及 app 的一些配置文件，如名片盒項(xiàng)目的 tabBar 是 3 個(gè)切換菜單：

我們先找到 app.json 文件打開配置好這幾個(gè)菜單，配置好 ”tabBar”，這個(gè)直接把配置文件改成你自己設(shè)計(jì)的即可。

App.json 里面有幾個(gè)配置項(xiàng)：

• Pages：這個(gè)是編寫的 js 文件，后綴 .js 這里不需要使用，配置好正確路徑即可正常應(yīng)用到（應(yīng)用不到在重啟微信開發(fā)者工具會(huì)直接報(bào) page 錯(cuò)誤）。

• Window：配置頂部的一些樣式，文檔介紹比較詳細(xì)。

• tabBar：底部的幾項(xiàng)配置，見名知意。

• networkTimeout：暫時(shí)沒發(fā)現(xiàn)用處，建議看文檔。

• 根據(jù)實(shí)際項(xiàng)目需求進(jìn)行添加與更改。

• iconPath 和 selectedIconPath：底部菜單按鈕圖片與得到切換點(diǎn)擊高亮。

• 'text'：可以去掉，全部去掉會(huì)發(fā)現(xiàn)底部 tabar 高度會(huì)減少很多。

Json 文件配置好后，根據(jù)項(xiàng)目進(jìn)行文件創(chuàng)建，

Demo：存放的是假數(shù)據(jù)，這一期的開發(fā)工具支持 require，假數(shù)據(jù)使用的是 .js 文件形式，

里面的數(shù)據(jù)結(jié)構(gòu) json 一致，把 data 暴露出去即可。

然后取數(shù)據(jù) require 進(jìn)來即可，這一點(diǎn)使用很方便；

Images：圖片路徑；

Page：除 tabar 以外的頁面；

Servise：服務(wù)交付層（與后臺(tái)聯(lián)調(diào)真實(shí)數(shù)據(jù)時(shí)使用）；

Wxss：一些公共的 css 文件。

看到這里大家發(fā)現(xiàn)每個(gè)頁面都被連帶好三個(gè)不同的后綴。分別頁面，css，js 目前只能依照這樣，是微信應(yīng)用號(hào)的一個(gè)規(guī)范吧。

Wxss 文件是引入你寫的樣式文件，也可以直接在里面寫樣式。

Js 文件需全部配置到 pages 里面才能生效。

第四章：微信小程序首頁面開發(fā)

進(jìn)行了各種準(zhǔn)備與配置后，來到首頁開發(fā)。首先需要實(shí)現(xiàn)首頁效果圖如下：

Template 名片很多，需要用模板。

這里需要微信提供的基礎(chǔ)組件大致是 input（搜索框）、

action-sheet（右邊是個(gè)底部下拉菜單，需要下拉菜單）、

Scroll-view (右邊 ABC 跳轉(zhuǎn))、（這個(gè)目前實(shí)現(xiàn)還有點(diǎn)問題，正在攻克中）。

View 是塊元素，整個(gè)搜索框的一個(gè)樣式。

• 名片夾：由于該項(xiàng)目主打名片功能，故很多地方使用，所以需要把名片以 template 分離出來。

• Template：定義一個(gè)模板，name 模板的名字其實(shí)是個(gè)作用域。

• Block：循環(huán)控制，名片很多，必須用循環(huán)出來，和很多操作數(shù)據(jù)的前端框架循環(huán)差不多。

• 支持自定義屬性 data，這里用作判斷線上名片以及線下名片。

View 里面是一些數(shù)據(jù)引入，里面是支持三目運(yùn)算符。

引入 template 時(shí)非常方便，is 和 name 一樣，data 是 nameData 傳遞過來的數(shù)據(jù)填充。

一切都綁定數(shù)據(jù)為中心點(diǎn)。

取到數(shù)據(jù)具體操作根據(jù)你數(shù)據(jù)結(jié)構(gòu)：

這里的數(shù)據(jù)結(jié)構(gòu)和 json 數(shù)據(jù)結(jié)構(gòu)一樣，

這里如要傳到頁面的話即是

this.setData({

nameData:card_list_name.data.cards,

timeData:card_list_time.data.cards

});

因?yàn)轫撁姹闅v的是 nameData,timeData

可以看下打印出來的數(shù)據(jù)結(jié)構(gòu)，根據(jù)你的結(jié)構(gòu)進(jìn)行解析與傳遞。

也可以看下這里對(duì)數(shù)據(jù)的一些操作。（這里須根據(jù)定義的 json 數(shù)據(jù)格式來操作的）

名片的樣式由于很多頁面需要使用放在 common.css 里面，這個(gè) common.css 是所有頁面都需要用到，一些初始化設(shè)置。它是在 pp.wxss 里面引用之后才能被映射到全局 APP。

搜索框：其中 bindChange 為輸入框發(fā)生改變事件。微信提供的 bindchange 在支持方面還有小問題，目前是失去焦點(diǎn)才能觸發(fā)到此事件的發(fā)生，待后續(xù)完善吧，先實(shí)現(xiàn)功能再說。

bindInputChange:function(e){

//發(fā)生搜索事情

var self = this; //this綁定，這個(gè)this指向微信的提供window

var Text = e.detail.value.toUpperCase();//取到輸入的內(nèi)容

if(Text==''){   //如果輸入為空一些東西需要顯示否則不顯示

show_letter ='block';

}else{

        show_letter= 'none';

}

this.setData({

        show_letter:show_letter,

        showSheet:true

});

var res = nameData;   獲取到傳遞的數(shù)據(jù)

if(data_type=='name'){

}else if(data_type=='time'){

        res= timeData;

};

for(var k in res){  //for-in循環(huán)取到data里面的cards

var data =res[k].cards;

for(var i =0;i<data.length;i ){  //循環(huán)取到需要搜索的關(guān)鍵字對(duì)比

If(data[i].userName!=null&& data[i].userName.indexOf(Text)!=-1){

data[i]['display']= 'block';  //存在就是賦值顯示

}else{

data[i]['display']= 'none'; // 不存在賦值不顯示

}

}

}

}

菜單欄：做到菜單欄，使用微信提供的下拉菜單組件 action-sheet，它被觸發(fā)的條件在這里。

一切以綁定事件為起點(diǎn)：

bindButtonTapSheet:function(e){

//調(diào)取底部下拉菜單欄

}

還是得先布好局才能被調(diào)動(dòng)。

Js 配置：

Data 初始化數(shù)據(jù)：

這里得取非，直接設(shè)置 false 調(diào)不出來: 調(diào)用事件。

調(diào)出來還得去掉它?。喝缦孪嗤纯?/span>

取消直接上事件即可。（分為菜單欄外部與底部）

//好了，就是這么簡單。實(shí)現(xiàn)效果簡單，體驗(yàn)效果確實(shí)非常不錯(cuò)。

還需要個(gè) loading 效果（暫時(shí)沒做動(dòng)畫，后期再考慮。）

Loading 布局

首頁的最外層 view

根據(jù)微信的生命周期

Onload:function(e){

this.setData({

toastDisplay:”block”,

htmlWrapDisplay:”none”

})

},

onShow:function(e){

this.setData({

toastDisplay:”none”,

htmlWrapDisplay:”block”

})

}

加載條完成。

掃一掃，直接調(diào)用拍照功能，從這里看到微信提供的拍照 api 使用起來非?？焖?，只需根據(jù)需求配置即可。

點(diǎn)擊掃一掃之后，在開發(fā)者工具即可看到如下效果。

做到這里說明下，dom 長度有限制，頁面的結(jié)構(gòu)太長，也是無法渲染的，暫且把公司排序暫時(shí)先去掉了。

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

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

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

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

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

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

• Block：圖片列表。

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

其中 currentNumber：

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

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

Data:{

currentNumber:1

}

slidechange:function(e){

var number = e.detail.current;

this.setData({

currentNumber:number 1

})

},

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

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

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

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

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

下面是詳情頁里面的個(gè)人信息數(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ù)，故而我們?cè)诎l(fā)生真實(shí)網(wǎng)絡(luò)數(shù)據(jù)請(qǐng)求時(shí)一定要在后面加上 forceUpdata()，強(qiáng)制觸發(fā)視圖渲染，否則會(huì)出現(xiàn)很多莫名其妙的 bug。

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

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

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

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

以下是二維碼彈出信息。

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

This.setData({

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

})

方法是讓它顯示。

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

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

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

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

第六章：微信小程序「名片盒」「我」的頁面開發(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)前頁面的 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)去編輯名片頁面，由于需要帶參，故而使用的是 wx.navgateTo。

可以看下效果：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

小程序視頻合集：