WePY-小程式框架設計

去年11月初，微信小程式開始公測，小程式是一種新的開放能力，開發者可以一用Web相關技術快速開發小程式。這次分享內容包括：小程式開發基礎內容；WePY框架說明，為什麼要做這個框架以及框架介紹；WePY框架在我們業務開發中的實際應用和經驗分享。

2016年8月，我們有手機充值、自選股、理財通、信用卡還貸和騰訊體育這五個團隊參加了小程式的封閉內測。根據這五個產品形態可以看出小程式的一些特點，它面向的是一種服務，一種輕應用，它還是一種Web開發模式，上手簡單。

我們平時做公眾號開發或做一些混合應用時，Native層是必須的，在呼叫一些底層能力的時候，一定會用到JSBridge。

小程式和Web開發最大的區別就在於它的檢視層和邏輯層完全分離。

優勢：

1、檢視操作基於資料繫結。

2、支援模組化。模組化最大的特點就是可以依賴於第三方。

3、豐富的內建元件。

4、登入API獲取code，提升使用者體驗。

5、優秀的系統呼叫能力。

6、樣式支援自適應單位rpx。

限制：

1、無法動態建立檢視節點。

2、不支援元件開發。

3、不支援NPM包。

4、頁面最多隻能開啟5層。

5、5個併發網路請求。

6、http特性不完善。

7、無法外跳。

小程式框架唯一的缺陷就是缺少元件系統，無法支援元件化開發。

WePY通過預編譯手段使小程式支援元件化，類Vue.js風格的開發模式，讓開發者可以像普通Web應用一樣開發小程式。它是一款Github開源框架。

寫過幾篇關於WePY的文章，被一些社群轉載，然後WePY框架先後被CSDN和開源中國首頁推薦。

WePY使用者交流群目前大概有1100人左右，並且有使用者自發地開發第三方WePY元件。

從開發角度來說，小程式有自己的一套固定的開發模式，我希望使用者能夠像開發H5一樣開發小程式，這是我的初衷。

第二個是框架。一方面是因為小程式不支援元件化，另一方面是因為其它框架有一些比較好的特性在小程式裡是沒有的。我們想借鑑其它框架的優秀特性，把它們引入到小程式的開發當中去。

小程式出現以後，由於原來的程式碼無法遷移到小程式，所以需要重新開發一套H5業務，開發者要同時維護兩套程式碼，這是比較令人頭疼的問題。

小程式和H5所要實現的功能其實是一樣的。我們現在不僅有H5，還有Native端，H5裡還包含了微信端、QQ端。我們在考慮是否能有一個適配層，讓小程式業務程式碼執行在微信、手Q甚至是原生APP之上。

增強庫類：開發者對原生小程式進行二次分裝，對小程式進行功能補充。

腳手架類：組織專案風格，並且會提供簡單的編譯打包功能。

預編譯類：完全擁有自己的開發模式。

在框架選型的時候參考了一些網上現有的框架，主要是從單檔案元件、輕量級、學習成本低、社群與資源這幾點去考慮。

這是WePY的一個程式碼對比圖。

WePY編譯過程

首先它拿到的是一個wpy格式檔案，通過拆分分成Style、Template和Script。這部分進入編譯器通過型別進行編譯，生成四個檔案，這四個檔案會進入外掛處理系統，最終生成了index.wxss、index.wxml、index.js、index.json，就是我們真正執行在小程式的檔案。

做小程式開發的人一般都會考慮H5程式碼是否可以無痛轉成小程式，但研究發現要做到這一步其實是很難的。

於是我們採取了一個折中的方法，用一份WePY程式碼去生成不同的型別，讓它可以執行在小程式端。對於小程式就生成小程式可以執行的內容，對於Web端就生成Web端可以執行的內容。

小程式轉Web時存在的問題

1、小程式的開發模式與Web端的開發模式不一樣。

2、標籤和樣式存在差異。

3、小程式模版中的一些屬性或者表示式在Web端原生並不支援。

4、Web原生不支援模組化。

5、小程式包含大量內建元件和API，但Web端並不支援。

WePY本身是一種類似於Vue的開發方式，所以它的這套程式碼完全可以基於Vue執行在瀏覽器，基於小程式執行在微信端。開發模式通過WePY達到了統一。

標籤相近可以直接通過替換來實現，但小程式標籤有些小程式特有的屬性，在Web端沒有，所以它的有些標籤的處理不是通過替換去做的。

rpx單位在Web端是沒有的。rpx是以iPhone6為基礎的1334×750的解析度上，有750個物理畫素，預設單位是750rpx，換算時1rpx=0.5px。

模版語法幾乎都是相似的，只有一些特殊語法需要進行轉換。

這一塊我參考了webpack，因為Web端現在模組化打包已經比較成熟了。

首先這裡舉了一個例子，是模組化引用的關係。在做編譯的過程中，我會梳理它的模組依賴關係，給每一個模組做編號。在打包bundle的時候會把它輸出到同一個檔案的陣列裡，拆分入口程式碼去定義wepy_require，再把原有程式碼中的require改成require陣列1，呼叫陣列1就可以了。這是整個模組化打包的原理。

因為小程式元件和API在Web端是沒有的，所以我們要想辦法在Web端去補齊它的這個差異。Web端是基於Vue執行的，可以使用Vue元件去完成它所有的元件。

只需要處理好介面讓Vue程式碼可以直接注入到bundle裡，讓它可以完美執行。

只要把小程式的所有元件通過Vue實現一遍，那麼這部分元件就可以在Web端執行。

基礎API完全有能力在Web端實現，還有一部分不能在Web端實現的，比如呼叫使用者屬性，可以通過它提供的對應的JS API去實現。微信瀏覽器和QQ瀏覽器提供的JS API完全可以實現小程式API這一塊，所以就分了兩層，第一層是基礎層，第二層是適配層。假如程式碼要執行在QQ端就用wepy-web-qq，這一塊就包括了所有API在QQ端的實行。適配層可以讓程式碼執行在不同的瀏覽器環境。

這裡有一個我自己製作的DEMO小程式chong.qq.com/mobile/wepy…，大家可以體驗一下。

我今天的分享就到這裡，感謝聆聽！