摘要：原理架構作為與之間相互通信的橋梁部分在環境中注入的實現代碼，包含了協議的拼裝發送參數池回調池等一些基礎功能。部分在客戶端中的功能映射代碼，實現了攔截與解析環境信息的注入通用功能映射等功能。

作為native 與 JS 之間相互通信的橋梁
JS部分(bridge): 在JS環境中注入 bridge 的實現代碼，包含了協議的拼裝/發送/參數池/回調池等一些基礎功能。
Native部分(SDK): 在客戶端中 bridge 的功能映射代碼，實現了URL攔截與解析/環境信息的注入/通用功能映射等功能。

1、邏輯層負責計算邏輯處理
2、視圖層負責頁面展示
數據變更驅動視圖更新；視圖交互觸發事件，事件響應函數修改數據再次觸發視圖更新（用戶交互，觸發邏輯計算，最后由視圖更新展示）

vue - data -> 小程序
vue <- 事件響應 - 小程序

1、生命周期關聯：在小程序上觸發數據更新，由vue處理，vue處理完后同步到小程序
為實現數據同步，mpvue 修改了 Vue.js runtime 實現，在 Vue.js 的生命周期中增加了更新小程序數據的邏輯。
2、事件代理機制：用戶交互觸發的數據更新通過事件代理機制完成，在小程序觸發的事件代理到vue的method上
在小程序組件節點上觸發事件后，找到虛擬 DOM 上對應的節點，觸發對應的事件；另一方面，Vue.js 事件響應如果觸發了數據更新，其生命周期函數更新將自動觸發，在此函數上同步更新小程序數據，數據同步也就實現了

Vue代碼
1、將小程序頁面編寫為 Vue.js 實現
2、以 Vue.js 開發規范實現父子組件關聯

小程序代碼
1、以小程序開發規范編寫視圖層模板
2、配置生命周期函數，關聯數據更新調用
3、將 Vue.js 數據映射為小程序數據模型

并在此基礎上，附加如下機制
1、Vue.js 實例與小程序 Page 實例建立關聯
2、小程序和 Vue.js 生命周期建立映射關系，能在小程序生命周期中觸發 Vue.js 生命周期
3、小程序事件建立代理機制，在事件代理函數中觸發與之對應的 Vue.js 組件事件響應

Vue.js 視圖層渲染由 render 方法完成，同時在內存中維護著一份虛擬 DOM，mpvue 無需使用 Vue.js 完成視圖層渲染，通過改造 render 方法，禁止視圖層渲染；在 Vue runtime 時，添加平臺 mpvue

1、在 mpvue 生成的 wxml 文件中，所有的事件都被 handleProxy 的函數接管，在 handleProxy 進行處理后再去調用我們寫的真正的事件處理函數。這個方法在initMp時，作為小程序Page構造函數的一個選項，從而可以在wxml中被正確調用
2、handleProxy將小程序的event對象傳給handleProxyWithVue函數進行進一步處理
3、handleProxyWithVue 的作用

從根實例開始，根據comkey找出事件處理函數所在的mpvue實例(getVm)

通過遍歷找到的vm的vnode，結合eventid找到小程序事件對應的真實的事件處理函數(getHandle)

將小程序的event對象包裝為mpvue的event對象(getWebEventByMP),并添加了preventDefault和stopPropagation方法

將包裝后的event對象傳給真實的處理函數進行調用。

（生成的wxml中綁定事件的節點都有data-comkey和data-eventid屬性，在一個事件觸發時，它們是被用來尋找事件對應的vm實例和對應的事件處理函數的）

1、App對象，主要有onLaunch, onShow和onHide
2、Page對象，主要有onLoad, onShow, onReady, onHide和onUnload

beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, beforeDestroy, destroyed

app啟動：
app-beforeCreate -> app-created -> app-onlaunch -> app-beforeMount -> app-mounted -> app-onShow

進入頁面，更新操作：
page beforeCreate -> page created -> page onLoad -> page onShow -> page onReady -> page beforeMount -> component beforeCreate -> component created -> component onLoad -> component onReady -> component beforeMount -> component mounted -> page mounted

返回（隱藏），沒有觸發destroy：
page onUnload -> component onUnload

page A、B(page tab)、C、D(page tab) (c 是 A 的子組件)
A -> B -> A （按鈕跳轉）
A -> B (點擊左上角返回鍵)

1、App啟動
app-beforeCreate.....
app-created...
app-onlaunch...
app-beforeMount.....
app-mounted.....
app-onShow....
A-beforeCreate.....
A-created....
B-beforeCreate.....
B-created.....
D-beforeCreate.....
D-created.....

2、進入 page A
A-onLoad....
A-onShow....
A-onReady.....
A-beforeMount.....
C-beforeCreate.....
C-created.....
C-onLoad....
C-onReady.....
C-beforeMount.....
C-mounted.....
A-mounted.....

3、離開page A
A-onUnload....
C-onUnload....

4、進入page B
B-onLoad....
B-onShow....
B-onReady.....
B-beforeMount.....
B-mounted.....
B-beforeUpdate..... // 更新
B-updated.....

5、離開page B
B-onHide.....

6、重新進入page A（switchTab）
A-onLoad....
C-onLoad....
A-onShow....
C-onShow....
A-onReady.....
C-onReady.....
A-beforeMount.....
A-beforeUpdate.....
A-mounted.....
C-beforeUpdate.....
C-updated.....

7、通過返回鍵返回 page B
A-onUnload....
C-onUnload....
B-onShow....

# 安裝 vue-cli
$ npm install --global vue-cli
# 根據模板項目創建本地項目，目前為內網地址
$ vue init mpvue/mpvue-quickstart my-project
# 安裝依賴和啟動自動構建
$ cd my-project
$ npm install
# 現在支持微信wx、頭條tt、支付寶my、百度swan，運行該命令生成dist文件夾，即小程序
$ npm run dev 

├── build                  編譯配置
├── config                 編譯配置
├── dist                   小程序運行代碼目錄（該目錄由編譯生成）
├── `node_modules`           
├── src                    開發目錄
|   ├── components         組件目錄
|   |   ├── a.vue      組件a
|   |   └── b.vue      組件b
|   ├── pages              頁面目錄
|   |   ├── index          index頁面（默認會在src/main.js主入口生成pages配置，路徑為pages/index/main）
            ├── index.vue  由其入口文件編譯main.js后，生成index/main.js、index/main.wxml和index/main.wxss文件
            ├── main.js     頁面默認入口文件（config屬性會編譯為頁面配置文件index/main.json）
|   |   └── other           other頁面（默認會在src/main.js主入口生成pages配置，路徑為pages/other/main）
            ├── index.vue  由其入口文件編譯main.js后，生成other/main.js、other/main.wxml和other/main.wxss文件
            ├── main.js    頁面默認入口文件（config屬性會編譯為頁面配置文件other/main.json）
|   └── main.js            小程序配置項（全局數據、樣式、聲明鉤子等；經build后，會在dist目錄下生成app.js、app.json和app.wxss文件）
└── static                 靜態文件，會直接被復制到dist/下
└── package.json           項目的package配置
└── project.config.json    小程序開發工具的配置

自己寫的demo，在之前原生微信小程序的基礎上，使用 mpvue 重構了電影模塊：
mpvue-play

以下是一些自己在寫demo時，踩過的坑或是一些需要注意的點（尤其對習慣了vue的童學），具體也可參見mpvue文檔
1、onShow 代替 mounted：從一個頁面返回到前一頁面時，mounted不會再次被調用，因為頁面沒有被銷毀，因而不需要重新掛載
onLoad 代替 created： 啟動項目時，所有頁面的beforeCreatecreated都已調用，并且進入頁面時，不會再調用beforeCreatecreated
雖然建議盡量不要使用小程序中的生命周期的鉤子函數

2、小程序不支持路由，因此，路由跳轉使用小程序的頁面導航api代替
this.$router.push --> wx.navigateTo() //進入子頁面
this.$router.replace --> wx.reLaunch()//打開新頁面

3、微信小程序的頁面的 query 參數是通過 onLoad 獲取的，mpvue 對此進行了優化，直接通過 this.$root.$mp.query 獲取相應的參數數據

4、小程序里所有的 BOM／DOM 都不能用，因此v-html、v-text不能用

5、圖片 src="{{}}" => :src="",才能生效

6、不支持部分復雜的 JavaScript 渲染表達式，mpvue會把 template 中的 {{}} 雙花括號的部分，直接編碼到 wxml 文件中，由于微信小程序的能力限制(數據綁定)，所以無法支持復雜的 JavaScript 表達式。建議使用computed
目前可以使用的有 + - * % ?: ! == === > < [] .，剩下的還待完善。

7、不支持filter過濾器，因為小程序wxml不支持

8、列表渲染需要注意一點，嵌套列表渲染，必須指定不同的索引 :key=""

9、不支持在 template 內使用 methods 中的函數，即

10、獲取當前頁面地址
this.$route.fullPath --> getCurrentPages()[0].route

11、不支持本地圖片用作背景圖，可以使用網絡圖片、或者base64，或者使用img、image標簽

12、上拉加載/下拉刷新，選用小程序的全局api; scroll-view中無法使用

13、不支持css媒體查詢，css樣式避免標簽選擇器，不易于維護，盡量使用類選擇器

14、CSS樣式導入，使用 @import url("")

15、暫不支持在組件上使用 Class 與 Style 綁定

參考：
mpvue文檔
用Vue.js開發微信小程序：開源框架mpvue解析
mpvue小程序開發 - 生命周期梳理
美團小程序框架--mpvue入坑指南
mpVue的使用小技巧之跳轉與傳參
小程序開發框架WePY與mpvue
px2rpx-loader使用和源碼分析