小程序開發框架WePY與mpvue

前言

微信小程序原生開發主要有三大元素：框架、組件、API，而小程序開發框架，其主要功能就是將以該框架支持的語法編寫的代碼編譯轉換爲小程序原生框架所能支持的。

本人曾在生產項目中使用太小程序原生框架開發，後見WePY發展不錯，確承認投入生產使用，便在項目設計改版之際，改用WePY編寫代碼，同時使用代碼分包，至於mpvue，只是初步瞭解，暫未實際使用。如下簡單對兩個框架作一些對比，以期對選用哪一個框架開發小程序有更多的認識與考量。

WePY

• 一個類Vue開發風格的小程序框架

• 特性：

  • 類Vue開發風格
  • 支持組件化開發
  • 支持NPM
  • 支持Promise, 主動選擇是否開啓
  • 支持ES2015
  • 編譯器：支持less/sass/TypeScript等開發
  • 小程序性能優化
  • 框架大小：24.3k+8.9k
  • wepy-redux數據管理
• 構建與編譯工具：wepy-cli，編譯配置：wepy.config.js
• 項目目錄結構：

├── dist                   小程序運行代碼目錄（該目錄由WePY的build指令自動編譯生成，請不要直接修改該目錄下的文件）
├── node_modules           
├── src                    代碼編寫的目錄（該目錄爲使用WePY後的開發目錄）
|   ├── components         WePY組件目錄（組件不屬於完整頁面，僅供完整頁面或其餘組件引用）
|   |   ├── com_a.wpy      可複用的WePY組件a
|   |   └── com_b.wpy      可複用的WePY組件b
|   ├── pages              WePY頁面目錄（屬於完整頁面）
|   |   ├── index.wpy      index頁面（經build後，會在dist目錄下的pages目錄生成index.js、index.json、index.wxml和index.wxss文件）
|   |   └── other.wpy      other頁面（經build後，會在dist目錄下的pages目錄生成other.js、other.json、other.wxml和other.wxss文件）
|   └── app.wpy            小程序配置項（全局數據、樣式、聲明鉤子等；經build後，會在dist目錄下生成app.js、app.json和app.wxss文件）
└── package.json           項目的package配置
└── wepy.config.json       項目的編譯配置
└── project.config.json    小程序開發工具的配置

WePY原理示意圖

請查看其使用手冊

![WePY文件編譯示意圖]()
WePY文件編譯示意圖

![WePY組件實現示意圖]()
WePY組件實現示意圖

WePY大概作了這些工做：

• 編譯代碼爲原生框架支持的形式

  • .wpy單文件開發簡化文件目錄
  • 優化數據綁定語法與性能
  • 優化事件綁定語法與傳參
  • 優化代碼複用，組件化代替原生的模板
  • 支持less/sass/typescript等，優化開發體驗
• 將大部分API promise化
• 支持npm外部依賴，ESLink代碼規範等

小結

所以，使用WePY開發小程序，除遵循WePY的語法外，

• 仍可保留原生的開發方式，好比按原生自定義組件的方式開發，WePY會將 .js/.json/.wxml原封不動複製到輸出目錄下，將.less編譯爲同名的.wxss
• 對於繼承自wepy.app/wepy.page/wepy.component的以.wpy爲文件後綴名的，則數據賦值需按照WePY的方式，必要時使用$apply, $nextTick, 而不是用setData, 至於事件綁定語法、API調用，可根據喜愛與需求，保留原生語法 or 使用WePY優化語法

一點經驗

• WePY的文檔更新會有必定的延遲。

  • 好比1.7.0正式添加$nextTick支持前，是在1.6.1-alphax版本中實現，若需急用，更新到該版本便可，但在文檔中是得不到這一信息的，在相關的issue中也不必定會說明要安裝哪一個版本；好比wepy-cli 1.7.0版本後，建立項目命令是 wepy init 而不是 wepy new, 輸出配置的屬性是 target 而不是 output；好比methods中只放視圖響應事件，自定義事件需放在其外面，文檔是後來才增長說明的。
  • 所以，對於文檔中未更新的新的支持，要麼耐心等待正式版本發佈，要麼到相關issue下參與討論獲取最新支持狀況；對於文檔中親試有誤的地方，多是新版修改了實現；遇到文檔未說明的問題，可搜索相關issue.
• 一些新的支持除了wepy-cli需更新版本，項目中的wepy也要相應更新版本，兩者版本號通常是對應的，alpha版本除外。
• wepy預留了輸出web版本的能力，但至目前爲止，還不適合投入生產，畢竟每一個端有每一個端的特性。

mpvue

• 命名意思：mp, nimi program的縮寫，mpvue, Vue.js in mini program
• 框架基於 Vue.js 核心，mpvue 修改了 Vue.js 的 runtime 和 compiler 實現，使其能夠運行在小程序環境中，從而爲小程序開發引入了整套 Vue.js 開發體驗。

• 特性：

  • 組件化開發
  • 完整Vue.js開發體驗，所有.vue單文件組件
  • Vuex數據管理方案
  • webpack構建機制：自定義構建策略、開發階段hotReload
  • 支持npm
  • 使用 Vue.js 命令行工具 vue-cli 快速初始化項目
  • H5代碼轉換編譯成小程序目標代碼能力（可以使用html開發）
• 構建與編譯工具：vue-cli，編譯配置：build/

• 配套設施

  • mpvue-loader
  • mpvue-webpack-target
  • postcss-mpvue-wxss
  • px2rpx-loader
  • 其餘
• 項目目錄結構：

├── build                  編譯配置
├── config                 編譯配置
├── dist                   小程序運行代碼目錄（該目錄由編譯生成）
├── node_modules           
├── src                    開發目錄
|   ├── components         組件目錄
|   |   ├── com_a.vue      組件a
|   |   └── com_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）
|   └── app.wpy            小程序配置項（全局數據、樣式、聲明鉤子等；經build後，會在dist目錄下生成app.js、app.json和app.wxss文件）
└── static                 靜態文件，會直接被複制到dist/下
└── package.json           項目的package配置
└── project.config.json    小程序開發工具的配置

一點疑問：

• 頁面目錄結構上感受不如WePY簡潔，每一個頁面源代碼由兩個文件組成，且默認其入口文件命名爲main.js, 若換其餘命名的話，須要修改編譯配置 build/webpack.base.conf.js
• 爲何不借鑑小程序原生開發方式，同一頁面的文件命名相同，這樣在目錄上能夠根據喜愛選擇減小一層；若如此，需修改編譯配置pages/下的js文件默認爲入口頁面，但這樣必須保證pages/下的js文件均爲頁面入口文件；或者增長一個entry/目錄，用於存放頁面入口文件，但分包又如何支持？
• pages頁面路徑感受仍是用戶本身配置的好，不要自動生成

mpvue原理

• mpvue 保留了 vue.runtime 核心方法，無縫繼承了 Vue.js 的基礎能力
• mpvue-template-compiler 提供了將 vue 的模板語法轉換到小程序的 wxml 語法的能力
• 修改了 vue 的建構配置，使之構建出符合小程序項目結構的代碼格式： json/wxml/wxss/js 文件

小結

• mpvue與WePY不一樣，除將代碼編譯爲原生框架所支持的外，還支持使用html標籤，所以能夠增長代碼複用性，比較適合須要Web端、小程序端等多端支持的項目，尤爲是已有Vuejs實現的Web端的產品，須要快速開發一個小程序版本的需求場景；且該開發團隊更熟悉Vue.js。
• 熟悉mpvue, 能夠看看 mpvue-weui: mpvue重寫weui

• Web端與小程序如何代碼複用？

  • 對於通常的容易轉換的html標籤，如div/p/ul/li等能夠直接使用，讓mpvue的編譯器幫你完成轉換，但對於如picker/checkbox/radio/switch/slider/swiper/progress/icon等這些與html標籤不能簡單對應的小程序原生組件，mpvue的建議是按小程序原生組件的用法，只不過事件綁定與變量動態賦值的語法要按mpvue的寫法（mpvue使用手冊有涉及，請別踩坑）
  • 基於上一點，Web端UI複用其實也只是侷限於那些容易轉換的標籤，對於差別化較大的UI,是須要按每一個端的特性作修改的
  • 小程序的組件默認樣式是weui風格，所以，小程序一些組件與api功能，好比toast/loading/modal/actionsheet/picker，Web端能夠藉助weui.js來完成
  • 小程序許多API，Web端可對應使用微信的js-sdk

疑問

mpvue的最主要的功能，是Web端與小程序一致的開發體驗，以及儘量地實現UI複用，但據我目前的瞭解，UI複用也只是一些簡單的容易轉換的UI，差別化較大的仍是須要各端各自實現的，那麼，所謂的一套代碼跑多端的目的並無達到，從這個角度來看，mpvue跟WePY的功能實際上是同樣的；

因此，mpvue最大的不一樣，其實在於徹底的Vuejs開發體驗吧？

特性對比

	mpvue	WePY	原生開發
開發風格	單文件組件	類Vue風格	每一個頁面由4個同名文件組成
組件化支持	支持，Vue單文件組件	支持，同時可兼容原生自定義組件	模板(template)，自定義組件
外部依賴npm	支持	支持	不支持
原生API Promise化	基本不支持，請求能夠選用fly	大部分API均支持，選用	無，爲回調函數
優化		優化了setData，npm資源不引用則不會佔用體積	setData不可太頻繁使用，需控制圖片資源大小，第三方資源不用需及時清理
less/sass/es6/typescript/eslint等	均支持	均支持	支持es6
自動化構建	vue-cli, webpack	wepy-cli
數據統一管理	vuex, 選用	wepy-redux, 選用	全局數據globalData, Storage
框架體積	無說明	壓縮後 24.3KB, +8.9KB 可以使用 Promise 和 Async Function	無
web H5支持	已上線H5頁面轉小程序，更改小部分平臺差別代碼和 webpack配置可運行	可輸出web版本，暫不適合投入生產
理想狀態：一套代碼跑多端	WEB、小程序（微信和支付寶）、Native（藉助weex）	Web, 小程序	各端有各端特性，需處理差別化

附

• WePY文檔

  • 使用手冊
  • API文檔
  • github地址

• mpvue文檔

  • 介紹
  • 使用手冊
  • 項目建構文檔
  • 常見問題
  • github地址