weweb是一個兼容小程序語法的前端框架，你可以用小程序的寫法，來寫web應用。如果你已經有小程序了，通過它你可以將你的小程序運行在瀏覽器中。在小程序大行其道的今天，它可以讓你的小程序代碼得到最大限度的發揮，他具有以下優點：
- 跨平臺，一套代碼多端運行（小程序、h5、未來直接打包成安卓、ios app也不是夢)
- 自帶常用組件，完美繼承了小程序內置組件
- 兼容小程序rpx語法，使頁面更容易適配各種機型
該項目基于小程序開發者工具內置的小程序運行框架來實現的，我們在仔細研究了小程序官方的底層框架后，實現了小程序運行在web端的service和view引擎，為了使weweb能適應web端的性能要求，相較小程序原生框架，主要有以下調整：
- 框架核心庫進行了大量精減，剔除web不相關的部分,使核心庫體積大大減小
- 將原有的三層架構精簡為Service和View兩層架構
- 頁面資源、框架內置組件均使用異步加載，提升加載速度
- 支持自定義登錄頁面，代替微信登錄功能
- 去除了小程序對頁面層級的限制
- 實現了js版的wxml和wxss編譯器以適應跨平臺編譯需求并無縫整合至weweb
適用場景
- 喜歡小程序的開發方式，或者只懂小程序開發，想通過小程序的開發方式來寫web應用
- 開發出小程序后，同時想擁有同樣功能的h5應用，并希望能復用小程序的代碼
- 代替小程序開發者工具對小程序部分功能在瀏覽器端進行調試
開發
開發方式可以直接套用你以前開發小程序的方式，不需要另外的學習成本，只是在小程序開發完后，通過下面介紹的二種運行方式，把小程序編譯轉換成相應的h5應用，然后把編譯后的代碼扔到服務器上就行了
運行
方法一：使用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,覺得贊的就給個star吧，開源的心需要大家支持:)。
