Web框架，小程序web開發框架－weweb介紹-函數-匯編語言學習筆記

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 <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。