兩個主要部分獨立運行:
- view 模塊和 service 模塊
WeixinJSBridge 相比與之前的微信 webview 多出 publish 和 subscribe 兩個公共方法來發(fā)布和訂閱事件绅作,從而進行雙向通信据沈。
service:WeixinJSBridge ->app/dist/weapp/appservice/asdebug.js 中定義澈段,
view :WeixinJSBridge -> app/dist/inject/jweixindebug.js 中定義匕得。
service 模塊可以直接通過 prompt 方法來通過 prompt調起底層組件
view 層的 WeixinJSBridge 只能發(fā)送消息
view 模塊
- app.nw/app/dist/weapp/tpl/pageFrameTpl.js
service 模塊是
- app.nw/app/dist/weapp/tpl/appserviceTpl.js
web 開發(fā)者工具:
輸入 openVendor() -》打開 WeappVendor這個目錄,view 模塊和 service 模塊使用的幾個核心文件:
wcc : wcc xxx.wxml (wxml -> js )
wcsc: wcsc xxx.wxss (wxss -> css )
WAService.js 提供 service 模塊大部分功能
WAWebview.js 提供 view 模塊大部分功能
service 頁面
- 配置和開發(fā)者編寫的頁面沐祷、app.js篮赢,頁面還在加載了 asdebug.js 和 WAService.js 兩個文件。
asdebug.js
文件位于 nwjs 項目目錄 app/dist/weapp/appservice/asdebug.js建峭。 它包含了兩個部分玻侥,一個是 WeixinJSBridge 針對 service 模塊的實現(xiàn),另一塊是一些方便命令使用的接口亿蒸, 例如:help() 會告訴你一些可用的函數(shù):
總體上控制層要負責以下幾個功能:
- 實現(xiàn) service 層凑兰,view 層以及控制層之間的通訊邏輯
- 依據(jù)路由指令動態(tài)創(chuàng)建 view (wept 使用 iframe 實現(xiàn))
- 根據(jù)當前頁面動態(tài)渲染 header 和 tabbar
- 實現(xiàn)原生 API 調用,返回結果給 service 層
控制頁面(index.html)代碼
src/command.js
src/service.jssrc/sdk/*.js边锁。
對于 view/service 頁面只需把原來 bridge.js 的window.postMessage 改為 window.top.postMessage
view 層的控制邏輯
src/view.js
src/viewManage.js 實現(xiàn)姑食,
viewManage 實現(xiàn)了 navigateTo, redirectTo 以及 navigateBack 來響應 service 層通過名為 publish 的 command 傳來的對應頁面路由事件茅坛。
header.js 和 tabbar.js 包含了基于 react 實現(xiàn)的 header 和 tabbar 模塊(原計劃是使用 vue音半,但是沒找到與原生 js 模塊通訊的 API)
sdk 目錄下包含了 storage,錄音贡蓖,羅盤模塊曹鸠,其它比較簡單一些的原生底層調用我直接寫在 command.js 里面了。
實現(xiàn)小程序實時更新
監(jiān)視文件變化并通知前端
- wept 使用chokidar** 模塊監(jiān)視文件變化斥铺,
- WebSocket 告知客戶端進行更新操作彻桃。
lib/watcher.js 和 lib/socket.js, 發(fā)送內容是 json 字符串
控制層收到 WebSocket 消息postMessage > view/service 層
view/service 層監(jiān)聽 reload
前端對(wxml wxss json javascript)熱更新處理
wxss -postMessage 對應頁面( app.wxss 所有頁面)刷新,view 層更改對應 css 文件的時間戳
json 判斷:是 app.json 》無法熱更新》刷新頁面晾蜘,頁面 json》控制層對 header 設置相應狀態(tài) (渲染 react 處理)
wxml 使用 VirtualDom API 提供的 diff apply 處理邻眷。需要接口獲取新的 generateFunc 函數(shù)(用于生成 VirtualDom),請求接口剔交,執(zhí)行返回函數(shù)進行 diff apply
javascript 相對復雜,接口來獲取新的 javascript 代碼肆饶,最后在 view 層初始化后把 Page 函數(shù)切換到 Reload 函數(shù)(也可以在請求返回 javascript 前把 Page 重命名為 Reload) 。
問題
- 沒有生成原生html元素