## 微信小程序 ### 開發語言 小程序采用 WXML + WXSS + JS 三種開發語言組合，其和網頁編程采用的 HTML + CSS + JS 類似，WXML 用來描述當前這個頁面的結構，WXSS 用來描述頁面的樣式，JS 用來處理這個頁面和用戶的交互。 #### WXML WXML（WeXin Markup Language）和 HTML 類似，也有標簽和屬性，但針對小程序平臺做了些優化。 相較 HTML，小程序的標簽顯得更加簡潔，比如?`div`、`section`?、`header`等塊級標簽統一為?`view`，`p`、`span`、`b`?等文案類標簽統一為?`text`，同時也新增了很多實用標簽，比如?`picker`?滾動選擇器、`map`?地圖、`web-view`?網頁容器等。 可以簡單理解為，小程序所有的標簽都是[原生組件](https://link.juejin.im/?target=https%3A%2F%2Fdevelopers.weixin.qq.com%2Fminiprogram%2Fdev%2Fcomponent%2F)。 WXML 支持數據綁定： ~~~ <view> {{message}} </view> ~~~ 在 JS 中定義?`message`?變量： ~~~ Page({ data: { message: 'Hello MOBIKE!' } }) ~~~ 更多關于 WXML 的介紹請見?[WXML · 小程序](https://link.juejin.im/?target=https%3A%2F%2Fdevelopers.weixin.qq.com%2Fminiprogram%2Fdev%2Fframework%2Fview%2Fwxml%2F)。 #### WXSS WXSS（WeXin Style Sheets）是微信定義的一套樣式語言，其具有 CSS 大部分特性，同時為了更適合開發微信小程序，WXSS 對 CSS 進行了擴充以及修改。 小程序使用 rpx（responsive pixel）作為尺寸單位。屏幕寬度固定為 750rpx，設置了 rpx 單位的元素可以根據屏幕寬度進行自適應，所以設計稿統一以 750px 輸出（iPhone 6 標準）。 小程序沒有?`html`?、`body`標簽，如果想要設置頁面的樣式，可以直接使用?`page`?選擇器： ~~~ page{ background: #FFFFFF; } ~~~ WXSS 對選擇器的支持并沒有 Web 那么豐富，比如屬性選擇器?`[attr]`、相鄰選擇器?`h1 + p`?等都不被支持，只支持以下幾種：  同時，我們也可以在 WXML 中寫內聯樣式： ~~~ <view style="color: #FF9900;" /> ~~~ 也支持變量： ~~~ <view style="color: {{color}};" /> ~~~ 更多關于 WXSS 的介紹請見?[WXSS · 小程序](https://link.juejin.im/?target=https%3A%2F%2Fdevelopers.weixin.qq.com%2Fminiprogram%2Fdev%2Fframework%2Fview%2Fwxss.html)。 #### JS 小程序 JS 中沒有?`window`、`document`?等變量，大部分瀏覽器中全局方法會被禁用，比如?`alert`。但也有部分被支持，比如?`setTimeout`、`encodeURIComponent`等，具體可以在開發者工具中嘗試使用，官方文檔并沒有詳細的介紹。 小程序 JS 添加了“全局”的?`wx`?命名空間，其掛載了很多實用的函數方法，比如?`wx.request`?用來發送網絡請求，`wx.setStorage`?用來本地存儲，`wx.getLocation`?用來獲取用戶位置信息等。 更多?`wx`?提供的方法請見?[API · 小程序](https://link.juejin.im/?target=https%3A%2F%2Fdevelopers.weixin.qq.com%2Fminiprogram%2Fdev%2Fapi%2F)。 ### 生命周期 和大多數前端框架類似，小程序也有生命周期。 #### App 生命周期 整個小程序的生命周期如下圖所示：  說明： | 屬性 | 類型 | 描述 | 觸發時機 | | --- | --- | --- | --- | | onLaunch | Function | 生命周期函數--監聽小程序初始化 | 當小程序初始化完成時，會觸發 onLaunch（全局只觸發一次） | | onShow | Function | 生命周期函數--監聽小程序顯示 | 當小程序啟動，或從后臺進入前臺顯示，會觸發 onShow | | onHide | Function | 生命周期函數--監聽小程序隱藏 | 當小程序從前臺進入后臺，會觸發 onHide | App 的生命周期是在小程序啟動后全局監控的，不隨著頁面切換變化而變化。通過?`App()`?注冊小程序，傳入對應的生命周期函數，具體文檔見[注冊程序](https://link.juejin.im/?target=https%3A%2F%2Fdevelopers.weixin.qq.com%2Fminiprogram%2Fdev%2Fframework%2Fapp-service%2Fapp.html)。 #### Page 生命周期 除了整個小程序 App 的生命周期，每個頁面（Page）也有自己的生命周期：  說明： | 屬性 | 類型 | 描述 | | --- | --- | --- | | onLoad | Function | 生命周期函數--監聽頁面加載 | | onReady | Function | 生命周期函數--監聽頁面初次渲染完成 | | onShow | Function | 生命周期函數--監聽頁面顯示 | | onHide | Function | 生命周期函數--監聽頁面隱藏 | | onUnload | Function | 生命周期函數--監聽頁面卸載 | 當頁面狀態發生變化時，會觸發對應的生命周期函數，可以通過?`Page()`?注冊頁面并傳入監聽函數。具體文檔見[注冊程序 · 小程序](https://link.juejin.im/?target=https%3A%2F%2Fdevelopers.weixin.qq.com%2Fminiprogram%2Fdev%2Fframework%2Fapp-service%2Fpage.html)。 * * * * * [摩拜單車小程序開發實踐與框架分析 - 摩拜前端團隊 - 掘金小冊](https://juejin.im/book/5b30c3b351882574957a788f/section/5b337860f265da59bf7a09b9?from=singlemessage) [mobikeFE/xiaoce-demo: 掘金小冊 demo (??施工中)](https://github.com/mobikeFE/xiaoce-demo) * * * * * [簡易教程 · 小程序](https://developers.weixin.qq.com/miniprogram/dev/) * * * * * last update：2018-7-29 19:17:28