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

pgf發表於2017-09-27
Web框架

weweb是一個相容小程式語法的前端框架，你可以用小程式的寫法，來寫web單面應用。如果你已經有小程式了，通過它你可以將你的小程式執行在瀏覽器中。在小程式大行其道的今天，它可以讓你的小程式程式碼得到最大限度的發揮，他具有以下優點：

  • 跨平臺，一套程式碼多端執行（小程式、h5、未來直接打包成安卓、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 \ 指定服務埠，預設 2000
  • -d, --dist \ 指定生成的路徑
  • -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地址

github.com/wdfe/weweb。

相關文章