weweb兼容小程序語法的前端框架
簡介
weweb是一個兼容小程序語法的前端框架，你可以用小程序的寫法，來寫web應(yīng)用。如果你已經(jīng)有小程序了，通過它你可以將你的小程序運行在瀏覽器中。如果你熟悉vue的語法，也可以使用wepy編寫小程序，再通過weweb轉(zhuǎn)換后將其運行在web端。
優(yōu)點
跨平臺，一套代碼多端運行（小程序、h5、未來還可以直接打包成app)
自帶常用組件，完美繼承了小程序內(nèi)置組件
兼容小程序rpx語法，使頁面更容易適配各種機型
該項目基于小程序開發(fā)者工具內(nèi)置的小程序運行框架來實現(xiàn)的，我們在仔細(xì)研究了小程序官方的底層框架后，實現(xiàn)了小程序運行在web端的service和view引擎，為了使weweb能適應(yīng)web端的性能要求，相較小程序原生框架，主要有以下調(diào)整：
框架核心庫進行了大量精減，剔除web不相關(guān)的部分,使核心庫體積大大減小
將原有的三層架構(gòu)精簡為Service和View兩層架構(gòu)
頁面資源、框架內(nèi)置組件均使用異步加載，提升加載速度
支持自定義登錄頁面，代替微信登錄功能
去除了小程序?qū)撁鎸蛹壍南拗?/p>
實現(xiàn)了js版的wxml和wxss編譯器以適應(yīng)跨平臺編譯需求并無縫整合至weweb
適用場景
喜歡小程序的開發(fā)方式，或者只懂小程序開發(fā)，想通過小程序的開發(fā)方式來寫web應(yīng)用
開發(fā)出小程序后，同時想擁有同樣功能的h5應(yīng)用，并希望能復(fù)用小程序的代碼
代替小程序開發(fā)者工具對小程序部分功能在瀏覽器端進行調(diào)試
開發(fā)
開發(fā)方式可以直接套用你以前開發(fā)小程序的方式，不需要另外的學(xué)習(xí)成本，只是在小程序開發(fā)完后，通過下面介紹的二種運行方式，把小程序編譯轉(zhuǎn)換成相應(yīng)的h5應(yīng)用，然后把編譯后的代碼扔到服務(wù)器上就行了
運行
請先在系統(tǒng)中安裝node，官方的安裝包會同時為您裝上依賴管理工具npm
方法一：使用cli命令行工具
安裝：
npm install weweb-cli -g
運行示例：
weweb ./demos/demo20170111/
Options:
-h, --help 輸出幫助信息
-V, --version 輸出版本信息
-o, --open 使用 Chrome 打開小程序，僅對 Mac 有效
-l, --list 使用默認(rèn)瀏覽器打開更新歷史
-p, --port <port> 指定服務(wù)端口，默認(rèn) 2000
-d, --dist <dir> 指定生成的路徑
-t, --transform 只轉(zhuǎn)換小程序,不起web服務(wù)
方法二：手動構(gòu)建并運行：
# clone此項目后安裝依賴 npm i # 構(gòu)建核心庫： npm run build # 運行示例： ./bin/weweb ./demos/demo20170111/ # 壓縮app代碼：使用環(huán)境變量 NODE_ENV=production NODE_ENV=production ./bin/weweb demos/demo20170111 # 替換編譯器：當(dāng)默認(rèn)編譯出錯時使用環(huán)境變量 DFT_CMP=true 可切換為微信開發(fā)者工具自帶的編譯器 DFT_CMP=true ./bin/weweb demos/demo20170111 # 環(huán)境變量可以組合使用 NODE_ENV=production DFT_CMP=true ./bin/weweb demos/demo20170111
開發(fā)用命令
# 自動執(zhí)行rebuild npm run dev # 自動重啟服務(wù)器 npm run autostart
在線演示demo
注意事項
weweb默認(rèn)使用我們自己寫的編譯器對wxml和wxss進行編譯，但目前編譯器還處于試用階段，有些case可能沒測全，使用weweb過程中如果發(fā)現(xiàn)一些異常情況，可以嘗試切換成微信官方編譯器，看看是不否能解決問題。出現(xiàn)類似問題歡迎大家給我們提issue。我們將盡快修正
# 切換成微信開發(fā)者工具自帶的編譯器：使用環(huán)境變量 DFT_CMP=true 如下： DFT_CMP=true ./bin/weweb demos/demo20170111
轉(zhuǎn)換成H5后，會存在跨域訪問接口及脫離微信環(huán)境帶來的一些api無法支持的問題。我們可以通過在小程序的app.json文件中增加weweb配置項來解決一些常見的問題：
登錄：轉(zhuǎn)換成H5后將不支持小程序原生的登錄方式，可通過
loginUrl項來設(shè)置調(diào)用wx.login時跳轉(zhuǎn)到的登錄頁面
/**
* 此處的loginUrl地址必須是在app.json里注冊了的小程序地址
*/
"weweb":{
"loginUrl":"/page/H5login"
}
/**
* 當(dāng)?shù)卿洺晒笳{(diào)wx.loginSuccess();
* 這個api可以自動返回到來源頁面
*/
success : function(rt){
if(rt.result){
var login = require("../../modules/login/index.js");
app.globalData.userInfo = rt.result;
login.setLoginInfo(rt.result);
wx.loginSuccess();
}else{
toast.show(self,rt.status.status_reason||'登錄失敗');
}
}
跨域請求：當(dāng)后端接口不支持JSONP時，可以增加requestProxy配置項來設(shè)置服務(wù)器端代理地址，以實現(xiàn)跨域請求
/**
* 此處/remoteProxy是weweb自帶server實現(xiàn)的一個代理接口
* 實際項目中請改成自己的真實代理地址。如果接口支持返回jsonp格式，則無需做此配置
*/
"weweb":{
"requestProxy":"/remoteProxy"
}
轉(zhuǎn)換效果說明
轉(zhuǎn)換成H5后，依賴微信環(huán)境的相關(guān)接口將無法支持，比如：登錄等，需要自行改造為H5兼容方式
小程序轉(zhuǎn)換為H5后，特殊情況下，個別樣式可能會有些異常，得自行調(diào)整兼容