WePY-小程序框架設計

內容來源：2017年6月24日，騰訊前端高級工程師龔澄在「騰訊Web前端大會 TFC 2017 」進行《WePY-小程序框架設計》演講分享。IT大咖說做爲獨家視頻合做方，經主辦方和講者審閱受權發佈。
閱讀字數：2178 | 4分鐘閱讀

摘要

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

嘉賓演講視頻和PPT地址： t.cn/RC2FIat

小程序基礎

封閉內測

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

小程序架構

咱們平時作公衆號開發或作一些混合應用時，Native層是必須的，在調用一些底層能力的時候，必定會用到JSBridge。

小程序和Web開發最大的區別就在於它的視圖層和邏輯層徹底分離。

優點與限制

優點：

一、視圖操做基於數據綁定。

二、支持模塊化。模塊化最大的特色就是能夠依賴於第三方。

三、豐富的內置組件。

四、登陸API獲取code，提高用戶體驗。

五、優秀的系統調用能力。

六、樣式支持自適應單位rpx。

限制：

一、沒法動態建立視圖節點。

二、不支持組件開發。

三、不支持NPM包。

四、頁面最多隻能打開5層。

五、5個併發網絡請求。

六、http特性不完善。

七、沒法外跳。

主流框架特性

小程序框架惟一的缺陷就是缺乏組件系統，沒法支持組件化開發。

組件化開發框架WePY

WePY簡介

WePY經過預編譯手段使小程序支持組件化，類Vue.js風格的開發模式，讓開發者能夠像普通Web應用同樣開發小程序。它是一款Github開源框架。

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

WePY用戶交流羣目前大概有1100人左右，而且有用戶自發地開發第三方WePY組件。

爲何會有WePY

從開發角度來講，小程序有本身的一套固定的開發模式，我但願用戶可以像開發H5同樣開發小程序，這是個人初衷。

第二個是框架。一方面是由於小程序不支持組件化，另外一方面是由於其它框架有一些比較好的特性在小程序裏是沒有的。咱們想借鑑其它框架的優秀特性，把它們引入到小程序的開發當中去。

小程序出現之後，因爲原來的代碼沒法遷移到小程序，因此須要從新開發一套H5業務，開發者要同時維護兩套代碼，這是比較使人頭疼的問題。

小程序和H5所要實現的功能實際上是同樣的。咱們如今不只有H5，還有Native端，H5裏還包含了微信端、QQ端。咱們在考慮是否能有一個適配層，讓小程序業務代碼運行在微信、手Q甚至是原生APP之上。

小程序開源項目分類

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

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

預編譯類：徹底擁有本身的開發模式。

開發模式選型

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

WePY項目代碼結構

這是WePY的一個代碼對比圖。

WePY配套功能

WePY編譯過程

首先它拿到的是一個wpy格式文件，經過拆分分紅Style、Template和Script。這部分進入編譯器經過類型進行編譯，生成四個文件，這四個文件會進入插件處理系統，最終生成了index.wxss、index.wxml、index.js、index.json，就是咱們真正運行在小程序的文件。

對比

WePY與Web之間的聯繫

小程序與Web

作小程序開發的人通常都會考慮H5代碼是否能夠無痛轉成小程序，但研究發現要作到這一步實際上是很難的。

因而咱們採起了一個折中的方法，用一份WePY代碼去生成不一樣的類型，讓它能夠運行在小程序端。對於小程序就生成小程序能夠運行的內容，對於Web端就生成Web端能夠執行的內容。

小程序轉Web時存在的問題

一、小程序的開發模式與Web端的開發模式不同。

二、標籤和樣式存在差別。

三、小程序模版中的一些屬性或者表達式在Web端原生並不支持。

四、Web原生不支持模塊化。

五、小程序包含大量內置組件和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

由於小程序組件和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…，你們能夠體驗一下。

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

推薦文章

• 京東小程序的三生三世

• XpmJS —— 小程序後端開發思考和實踐
  

近期活動

• 內含贈票福利 | 你可能正在錯過一場下半年最火的互聯網大會