簡介：
總結：
1. 邏輯層使用js引擎，視圖層使用webview渲染
2. 微信小程序已經支持了絕大部分的 ES6 API
3. 可以自動補全css的兼容語法
文檔：https://developers.weixin.qq.com/miniprogram/dev/framework/details.html
一. 設計
總結：
設計圖750px， 1px = 1rpx，方便計算
二. 小程序頁面結構
wxml:
功能類似html，描述節點，但小程序的 WXML 用的標簽是 view, button, text 等等，這些標簽就是小程序給開發者包裝好的基本能力，我們還提供了地圖、視頻、音頻等等組件能力
wxss:
類似css，有css大部分屬性：
1. 單位rpx
2. 樣式導入和less等css預處理器一致，用@import
3. 不能用嵌套選擇器
js:
微信小程序的 JavaScript 運行環境即不是 Browser 也不是 Node.js。它運行在微信 App 的上下文中，不能操作DOM，沒有window, document, 也不能通過 Node.js 相關接口訪問操作系統 API
JS 腳本文件通過改變數據來處理用戶的操作
Page({ data: { msg: '' }, clickMe: function() { this.setData({ msg: "Hello World" }) } })
json:
頁面配置文件，可選
比如配置組件，配置下拉刷新功能等
{ "usingComponents": { "login-page": "/components/login-page/login-page" }, "enablePullDownRefresh": true }
Q&A
三. 工作原理
微信小程序View層用來渲染頁面結構，AppService層用來邏輯處理、數據請求、接口調用，它們在兩個進程（兩個Webview）里運行。
視圖層和邏輯層通過系統層的JSBridage進行通信，
邏輯層把數據變化通知到視圖層，觸發視圖層頁面更新，
視圖層把觸發的事件通知到邏輯層進行業務處理。
視圖層和邏輯層的數據傳輸，實際上通過兩邊提供的 evaluateJavascript 所實現。
即用戶傳輸的數據，需要將其轉換為字符串形式傳遞，同時把轉換后的數據內容拼接成一份 JS 腳本，再通過執行 JS 腳本的形式傳遞到兩邊獨立環境。
而 evaluateJavascript 的執行會受很多方面的影響，數據到達視圖層並不是實時的。
為什么小程序最多允許打開5個層級的頁面？
類MVVM開發模式
JS 直接操控
DOM，
JS 只需要管理狀態，再通過一種模板語法（{{ }}）來描述狀態和界面結構的關系
Q&A
原理詳解：https://www.jianshu.com/p/b50ed8fc49d6
JsCore詳解：http://www.cnblogs.com/meituantech/p/9528285.html
四. 開發工具
項目設置：
Q&A：
為什么要代碼保護？
第一次打開小程序，微信會把整個小程序包下載到本地，命名為： _1992529666_112.wxapkg 形式，在本地進行解壓編譯操作。
所以我們可以在文件系統找到此包，進行反編譯，如下為反編譯后的小程序源碼：
但源碼的js部分會被混淆或者丟失
詳解：https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.htm
五. 小程序能力--分包加載
目的： 用戶在使用時按需進行加載，減少啟動時間
主包：放置默認啟動頁面/TabBar 頁面，以及一些所有分包都需用到公共資源/JS 腳本
分包：可以有多個分包。每個分包小程序必定含有一個主包
在小程序啟動時，默認會下載主包並啟動主包內頁面，當用戶進入分包內某個頁面時，客戶端會把對應分包下載下來，下載完成后再進行展示。
目前小程序分包大小有以下限制：
- 整個小程序所有分包大小不超過 8M
- 單個分包/主包大小不能超過 2M
獨立分包：是小程序中一種特殊類型的分包，可以獨立於主包和其他分包運行。從獨立分包中頁面進入小程序時，不需要下載主包。當用戶進入普通分包或主包內頁面時，主包才會被下載。
所有的分包，獨立分包，都是在同一套源碼內，通過app.json配置進行划分
{ "pages": [ "pages/index", "pages/logs" ], "subpackages": [ { "root": "moduleA", "pages": [ "pages/rabbit", "pages/squirrel" ] }, { "root": "moduleA", "pages": [ "pages/pear", "pages/pineapple" ], "independent": true } ] }
分包預下載：
在主包內預下載分包，在獨立分包內預下載主包
{ "pages": ["pages/index"], "subpackages": [ { "root": "important", "pages": ["index"], }, { "root": "sub1", "pages": ["index"], }, { "name": "hello", "root": "path/to", "pages": ["index"] }, { "root": "sub3", "pages": ["index"] }, { "root": "indep", "pages": ["index"], "independent": true } ], "preloadRule": { "pages/index": { "network": "all", "packages": ["important"] }, "sub1/index": { "packages": ["hello", "sub3"] }, "sub3/index": { "packages": ["path/to"] }, "indep/index": { "packages": ["__APP__"] } } }
6. 小程序支付
wx.requestPayment( { 'timeStamp': '', 'nonceStr': '', 'package': '', 'signType': 'MD5', 'paySign': '', 'success':function(res){}, 'fail':function(res){}, 'complete':function(res){} })
文檔：https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=7_3&index=1
7. 小程序登錄
實際項目登錄時序圖：
授權彈框兩種形式：
1. 判斷skey不存在，直接顯示登錄按鈕
<button class="btn" open-type="getUserInfo" bindgetuserinfo="login">登錄</button>
點擊按鈕直接彈出微信授權框，授權成功后調用wx.login()等上述流程
微信授權彈框：
2. 接口返回未登錄狀態，彈起自定義登錄框
自定義登錄彈框內的登錄按鈕依然為：
<button class="btn" open-type="getUserInfo" bindgetuserinfo="login">登錄</button>
自定義登錄彈框：
Unionid機制
注意：
這里要注意下UnionID的獲取，如果這個用戶沒有關注你的公眾號，那你直接從code2session中是拿不到unionId的，所以就看上面的第一點，從getUserInfo中獲取加密數據傳到后台解密后再獲取unionId才行。
了解更多小程序，建議再看下小程序避坑指南