小程序架構

兩個主要部分獨立運行:

  • 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元素
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末岖常,一起剝皮案震驚了整個濱河市驯镊,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖阿宅,帶你破解...
    沈念sama閱讀 217,734評論 6 505
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異笼蛛,居然都是意外死亡洒放,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,931評論 3 394
  • 文/潘曉璐 我一進店門滨砍,熙熙樓的掌柜王于貴愁眉苦臉地迎上來往湿,“玉大人,你說我怎么就攤上這事惋戏×熳罚” “怎么了?”我有些...
    開封第一講書人閱讀 164,133評論 0 354
  • 文/不壞的土叔 我叫張陵响逢,是天一觀的道長绒窑。 經(jīng)常有香客問我,道長舔亭,這世上最難降的妖魔是什么些膨? 我笑而不...
    開封第一講書人閱讀 58,532評論 1 293
  • 正文 為了忘掉前任,我火速辦了婚禮钦铺,結果婚禮上订雾,老公的妹妹穿的比我還像新娘。我一直安慰自己矛洞,他們只是感情好洼哎,可當我...
    茶點故事閱讀 67,585評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著沼本,像睡著了一般噩峦。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上抽兆,一...
    開封第一講書人閱讀 51,462評論 1 302
  • 那天壕探,我揣著相機與錄音,去河邊找鬼郊丛。 笑死李请,一個胖子當著我的面吹牛,可吹牛的內容都是我干的厉熟。 我是一名探鬼主播导盅,決...
    沈念sama閱讀 40,262評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼揍瑟!你這毒婦竟也來了白翻?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 39,153評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎滤馍,沒想到半個月后岛琼,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,587評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡巢株,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 37,792評論 3 336
  • 正文 我和宋清朗相戀三年槐瑞,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片阁苞。...
    茶點故事閱讀 39,919評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡困檩,死狀恐怖,靈堂內的尸體忽然破棺而出那槽,到底是詐尸還是另有隱情悼沿,我是刑警寧澤,帶...
    沈念sama閱讀 35,635評論 5 345
  • 正文 年R本政府宣布骚灸,位于F島的核電站糟趾,受9級特大地震影響,放射性物質發(fā)生泄漏甚牲。R本人自食惡果不足惜拉讯,卻給世界環(huán)境...
    茶點故事閱讀 41,237評論 3 329
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望鳖藕。 院中可真熱鬧魔慷,春花似錦、人聲如沸著恩。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,855評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽喉誊。三九已至邀摆,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間伍茄,已是汗流浹背栋盹。 一陣腳步聲響...
    開封第一講書人閱讀 32,983評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留敷矫,地道東北人例获。 一個月前我還...
    沈念sama閱讀 48,048評論 3 370
  • 正文 我出身青樓,卻偏偏與公主長得像曹仗,于是被迫代替她去往敵國和親榨汤。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 44,864評論 2 354

推薦閱讀更多精彩內容

  • 作者什么來頭 渠宏偉怎茫,騰訊前端開發(fā)高級工程師收壕。 小程序特點 類Web,不是HTML5 即用即走,隨手可得 擁有離線...
    少穻閱讀 10,021評論 0 11
  • 一草一木一清秋蜜宪, 三三兩兩路人愁虫埂。 繁星點點清風落, 水似蓮花月如鉤圃验。
    風一樣男子閱讀 355評論 0 1
  • 最輕松的日子掉伏,一定是不需要回顧和展望的。過到哪里是哪里损谦,何須勞神去思前想后岖免?你一定會記得小時候挺煩的作文題目岳颇,就是...
    XinSuting閱讀 107評論 0 0