小程序web開發框架－weweb介紹

weweb是一個兼容小程序語法的前端框架，你能夠用小程序的寫法，來寫web單面應用。若是你已經有小程序了，經過它你能夠將你的小程序運行在瀏覽器中。在小程序大行其道的今天，它可讓你的小程序代碼獲得最大限度的發揮，他具備如下優勢：

• 跨平臺，一套代碼多端運行（小程序、h五、將來直接打包成安卓、ios app也不是夢)
• 自帶經常使用組件，完美繼承了小程序內置組件
• 兼容小程序rpx語法，使頁面更容易適配各類機型

該項目基於小程序開發者工具內置的小程序運行框架來實現的，咱們在仔細研究了小程序官方的底層框架後，實現了小程序運行在web端的service和view引擎，爲了使[weweb]能適應web端的性能要求，相較小程序原生框架，主要有如下調整：

• 框架核心庫進行了大量精減，剔除web不相關的部分,使核心庫體積大大減少
• 將原有的三層架構精簡爲Service和View兩層架構
• 頁面資源、框架不經常使用內置組件均使用異步加載，減小核心庫體積，提高加載速度
• 支持自定義登陸頁面，代替微信登陸功能
• 去除了小程序對頁面層級的限制
• 實現了js版的wxml和wxss編譯器以適應跨平臺編譯需求並沒有縫整合至weweb

適用場景

• 喜歡小程序的開發方式，或者只懂小程序開發，想經過小程序的開發方式來寫web應用
• 開發出小程序後，同時想擁有一樣功能的h5應用，並但願能複用小程序的代碼
• 代替小程序開發者工具對小程序部分功能在瀏覽器端進行調試

開發

開發方式能夠直接套用你之前開發小程序的方式，不須要另外的學習成本，只是在小程序開發完後，經過下面介紹的二種運行方式，把小程序編譯轉換成相應的h5應用，而後把編譯後的代碼扔到服務器上就好了

運行

請先在系統中安裝node，官方的安裝包會同時爲您裝上依賴管理工具npm

方法一：使用cli命令行工具對小程序直接轉換

安裝：

npm install weweb-cli -g

運行示例：

#./demos/demo20170111/這是小程序的存放路徑
weweb ./demos/demo20170111/

Options:

• -h, --help 輸出幫助信息
• -V, --version 輸出版本信息
• -o, --open 使用 Chrome 打開小程序，僅對 Mac 有效
• -l, --list 使用默認瀏覽器打開更新歷史
• -p, --port <port> 指定服務端口，默認 2000
• -d, --dist <dir> 指定生成的路徑
• -t, --transform 只轉換小程序,不起web服務

方法二：手動構建並運行：

# clone [weweb]項目後安裝依賴
npm i

# 構建核心庫：
npm run build

# 運行示例：
./bin/weweb ./demos/demo20170111/

# 壓縮app代碼：使用環境變量 NODE_ENV=production
NODE_ENV=production ./bin/weweb demos/demo20170111

# 替換編譯器：當默認編譯出錯時使用環境變量 DFT_CMP=true 可切換爲微信開發者工具自帶的編譯器
DFT_CMP=true ./bin/weweb demos/demo20170111

# 環境變量能夠組合使用
NODE_ENV=production DFT_CMP=true ./bin/weweb demos/demo20170111

在線演示demo

demo小程序二維碼以下：

點此查看weweb編譯後的h5在線演示
能夠比較一下小程序和轉換後生成的h5應用的差別
[demo源碼]

注意事項

weweb默認使用咱們本身寫的編譯器對wxml和wxss進行編譯，但目前編譯器還處於試用階段，有些case可能沒測全，使用weweb過程當中若是發現一些異常狀況，能夠嘗試切換成微信官方編譯器，看看是不否能解決問題。出現相似問題歡迎你們給咱們提[issue]。咱們將盡快修正

# 切換成微信開發者工具自帶的編譯器：使用環境變量 DFT_CMP=true 以下：

DFT_CMP=true ./bin/weweb demos/demo20170111

轉換成H5後，會存在跨域訪問接口及脫離微信環境帶來的一些api沒法支持的問題。咱們能夠經過在小程序的app.json文件中增長weweb配置項來解決一些常見的問題：

• 登陸：轉換成H5後將不支持小程序原生的登陸方式，可經過loginUrl項來設置調用wx.login時跳轉到的登陸頁面

/**
 * 此處的loginUrl地址必須是在app.json裏註冊了的小程序地址
 */

"weweb":{
  "loginUrl":"/page/H5login"
}

當登陸成功後調用
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||'登陸失敗');
}
}

• 跨域請求：當後端接口不支持JSONP時，能夠增長requestProxy配置項來設置服務器端代理地址，以實現跨域請求

/**
 * 此處/remoteProxy是weweb自帶server實現的一個代理接口
 * 實際項目中請改爲本身的真實代理地址。若是接口支持返回jsonp格式，則無需作此配置
 */

"weweb":{
  "requestProxy":"/remoteProxy"
}

小程序轉換成h5效果說明

• 轉換成H5後，依賴微信環境的相關接口將沒法支持，好比：登陸等，須要自行改造爲H5兼容方式
• 小程序轉換爲H5後，特殊狀況下，個別樣式可能會有些異常，得自行調整兼容

最後放上咱們github地址

https://github.com/wdfe/weweb。