微信目前用戶群體(ti) 非常龐大，微信推出公眾(zhong) 號以後，火爆程度大家都看得到，也同樣推動著 h5 的高速發展，隨著公眾(zhong) 號業(ye) 務的需求越來越複雜，應用號現在的到來也是恰到好處。我們(men) 團隊具體(ti) 看了一兩(liang) 次文檔後發現，它提供給開發者的方式也在發生全麵的改變，從(cong) 操作 DOM 轉為(wei) 操作數據，基於(yu) 微信提供的一個(ge) 過橋工具實現很多 h5 在公眾(zhong) 號很難實現的功能，有點類似於(yu) hybrid 開發，不同於(yu) hybrid 開發的方式是：微信開放的接口更為(wei) 嚴(yan) 謹，結構必須采用他提供給我們(men) 的組件，外部的框架和插件都不能在這裏使用上，讓開發者完全脫離操作 DOM，開發思想轉變很大。

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

生命周期：

在index.js裏麵：

開發者工具上 Console 可以看到：

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

首先是整個(ge) app 的啟動與(yu) 顯示，app 的啟動在 app.js 裏麵可以配置，其次再進入到各個(ge) 頁麵的加載顯示等等。

可以想象到這裏可以處理很多東(dong) 西了，如加載框之類的都可以實現等等。

路由：

路由在項目開發中一直是個(ge) 核心點，在這裏其實微信對路由的介紹很少，可見微信在路由方麵經過很好的封裝，也提供三個(ge) 跳轉方法。

* wx.navigateTo(OBJECT)：保留當前頁麵，跳轉到應用內(nei) 的某個(ge) 頁麵，使用wx.navigateBack可以返回到原頁麵。
* wx.redirectTo(OBJECT)：關(guan) 閉當前頁麵，跳轉到應用內(nei) 的某個(ge) 頁麵。
* wx.navigateBack()：關(guan) 閉當前頁麵，回退前一頁麵。

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

組件：

此次微信在組件提供方麵也是非常全麵，基本上滿足項目需求，故而開發速度非常快，開發前可以認真瀏覽幾次，開發效率會(hui) 很好。

其它：

任何外部框架以及插件基本上無法使用，就算原生的 js 插件也很難使用，因為(wei) 以前我們(men) 的 js 插件也基本上全部是一操作 dom 的形式存在，而微信應用號此次的架構是不允許操作任何 dom，就連以前我們(men) 習(xi) 慣使用的動態設置的 rem.js 也是不支持的。

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

跟公眾(zhong) 號對比我們(men) 發現，開發應用號組件化，結構化，多樣化。新大陸總是充滿著驚喜，更多的彩蛋等著大家來發現。

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

* 找到項目文件夾，導入你的編輯器裏麵。在這裏，我使用了 Sublime Text 編輯器。你可以根據自己的開發習(xi) 慣選擇自己喜歡的編輯器。

* 接下來，你需要根據自己的項目內(nei) 容調整項目結構。在範例項目中，「card_course」目錄下麵主要包含了「tabBar」頁麵以及該應用的一些配置文件。

* 示例項目的「tabBar」是五個(ge) 菜單按鈕：

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

* 你可以根據實際項目需求更改，其中：

* 「Color」是底部字體(ti) 顏色，「selectedColor」是切換到該頁麵高亮顏色，「borderStyle」是切換菜單上麵的一條線的顏色，「backgroundColor」是底部菜單欄背景顏色。文字描述較為(wei) 抽象，建議你一一調試並查看其效果，加深印象。
* 「“list”」下的代碼順序必須依次放置，不能隨便更改。
* 「”pagePath”」之後的文件名內(nei) ，「.wxml」後綴被隱藏起來了，這是微信開發代碼中人性化的一點——幫你節約寫(xie) 代碼的時間，無須頻繁聲明文件後綴。
* 「”iconPath”」為(wei) 未獲得顯示頁麵的圖標路徑，這兩(liang) 個(ge) 路徑可以直接是網絡圖標。
* 「”selectedIconPath”」為(wei) 當前顯示頁麵高亮圖標路徑，可以去掉，去掉之後會(hui) 默認顯示為(wei) 「”iconPath”」的圖標。
* 「”Text”」為(wei) 頁麵標題，也可以去掉，去掉之後純顯示圖標，如隻去掉其中一個(ge) ，該位置會(hui) 被占用。

注意：微信的底部菜單最多支持五欄（五個(ge) icons），所以在你設計微信應用的 UI 和基本架構時就要預先考慮好菜單欄的排布。

* 根據以上代碼規則，我做好了示例項目的基本架構，供你參考：

* 「Json」文件配置好後，「card_course」的基本結構入上圖所示，不需要的子集都可以暫時刪除，缺少的子集則需要你主動新建。刪除子集時記得順帶檢查一下「app.json」裏的相關(guan) 內(nei) 容是否已經一並刪除。

注意：我個(ge) 人建議你新建一個(ge) 「wxml」文件的同時，把對應的「js」和「wxss」文件一起新建好，因為(wei) 微信應用號的配置特點就是解析到一個(ge) 「wxml」文件時，會(hui) 同時在同級目錄下找到同文件名的「js」和「wxss」文件，所以「js」文件需及時在「app.json」裏預先配置好。

編寫(xie) 「wxml」時，根據微信應用號提供的接口編碼即可，大部分就是以前的「div」，而我們(men) 現在就用「view」即可。需要用其它子集時，可以根據微信提供的接口酌情選擇。

使用「class」名來設置樣式，「id」名在這裏基本沒有什麽(me) 用處。主要操作數據，不操作「dom」。

* 以上是示例項目首頁的「wxml」編碼。從(cong) 圖中就可以看出，實現一個(ge) 頁麵代碼量非常少。

* 「Wxss」文件是引入的樣式文件，你也可以直接在裏麵寫(xie) 樣式，示例中采用的是引入方式：

* 修改代碼後刷新一次，可以看到未設背景的「view」標簽直接變成了粉色。

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

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

* 「Js」文件需要在「app.json」文件的「”page”」裏預先配置好。為(wei) 了項目結構清晰化，我在示例項目中的「index」首頁同級目錄新建其它四個(ge) 頁麵文件，具體(ti) 如下：

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