日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
微信小程序架構(gòu)分析 (下)

【引自第九程序的博客】這一篇拖了一段時間，原因是實現(xiàn)一個可以運行微信小程序的 web 環(huán)境比我想象中要困難一些， 這一方面是因為微信對于代碼進行了壓縮混淆，另一方面主要原因是開發(fā)者工具內(nèi)部邏輯調(diào)用比較復(fù)雜(難怪 bug 不少)，完全無法拿出來重用。

小程序?qū)崟r運行工具 wept 的開發(fā)已經(jīng)基本完成了， 你可以通過我的代碼對小程序的 web 環(huán)境實現(xiàn)有更全面的認識。下面我將介紹它的實現(xiàn)過程以及實時更新的原理。

小程序 web 服務(wù)實現(xiàn)

我在 wept 的開發(fā)中使用 koa 提供 web 服務(wù)，以及 et-improve 提供模板渲染。

***步： 準備頁面模板

我們需要三個頁面，一個做為控制層 index.html，一個做為 service 層service.html，還有一個做為 view 層的 view.html

index.html:

 
 
 
      
  
  
  1.  
    2.
 
  •  
  •  
  •  
  •  
  •  
  •   

    • service.html:

     
 
 
        
  
  
    1.  
      2.   
  
  
    2.    
      3.   
  
  
    3.    
      4.   
  
  
    4.    
      5.   
  
  
    5.    
      6.   
  
  
    6.    
      7.   
  
  
    7.   {{each _.utils as util}} 
      8.   
  
  
    8.    
      9.   
  
  
    9.   {{/}} 
      10.   
  
  
    10.    
      11.   
  
  
    11.   {{each _.routes as route}} 
      12.   
  
  
    12.    
      13.   
  
  
    13.    
      14.   
  
  
    14.   {{/}} 
      15.   
  
  
    15.  
      16.   
  
  
    16.  
      17.   
  
  
    17.    
      18.   
  
  
    18.  
      19.

    view.html:

     
 
 
        
  
  
    1.  
      2.   
  
  
    2.    
      3.   
  
  
    3.    
      4.   
  
  
    4.    
      5.   
  
  
    5.    
      6.   
  
  
    6.    
      7.   
  
  
    7.    
      8.   
  
  
    8.    
      9.   
  
  
    9.    
      10.   
  
  
    10.    
      11.   
  
  
    11.    
      12.   
  
  
    12.    
      13.   
  
  
    13.  
      14.   
  
  
    14.  
      15.   
  
  
    15.   
       
      16.   
  
  
    16.   
      17.

    第二步： 實現(xiàn) http 服務(wù)

    用 koa 實現(xiàn)的代碼邏輯非常簡單：

    server.js

     
 
 
        
  
  
    1. // 日志中間件 
      2.   
  
  
    2. app.use(logger()) 
      3.   
  
  
    3. // gzip 
      4.   
  
  
    4. app.use(compress({ 
      5.   
  
  
    5.   threshold: 2048, 
      6.   
  
  
    6.   flush: require('zlib').Z_SYNC_FLUSH 
      7.   
  
  
    7. })) 
      8.   
  
  
    8. // 錯誤提醒中間件 
      9.   
  
  
    9. app.use(notifyError) 
      10.   
  
  
    10. // 使用當前目錄下文件處理 404 請求 
      11.   
  
  
    11. app.use(staticFallback) 
      12.   
  
  
    12. // 各種 route 實現(xiàn) 
      13.   
  
  
    13. app.use(router.routes()) 
      14.   
  
  
    14. app.use(router.allowedMethods()) 
      15.   
  
  
    15. // 對于 public 目錄啟用靜態(tài)文件服務(wù) 
      16.   
  
  
    16. app.use(require('koa-static')(path.resolve(__dirname, '../public'))) 
      17.   
  
  
    17. // 創(chuàng)建啟動服務(wù) 
      18.   
  
  
    18. let server = http.createServer(app.callback()) 
      19.   
  
  
    19. server.listen(3000)  
      20.

    router.js

     
 
 
        
  
  
    1. router.get('/', function *() { 
      2.   
  
  
    2.   // 加載 index.html 模板和數(shù)據(jù)，輸出 index 頁面 
      3.   
  
  
    3. }) 
      4.   
  
  
    4.  
      5.   
  
  
    5. router.get('/appservice', function *() { 
      6.   
  
  
    6.   // 加載 service.html 模板和數(shù)據(jù)，輸出 service 頁面 
      7.   
  
  
    7. }) 
      8.   
  
  
    8.  
      9.   
  
  
    9. // 讓 `/app/**` 加載小程序所在目錄文件 
      10.   
  
  
    10. router.get('/app/(.*)', function* () { 
      11.   
  
  
    11.   if (/\.(wxss|js)$/.test(file)) { 
      12.   
  
  
    12.     // 動態(tài)編譯為 css 和相應(yīng) js 
      13.   
  
  
    13.   } else if (/\.wxml/.test(file)) { 
      14.   
  
  
    14.     // 動態(tài)編譯為 html 
      15.   
  
  
    15.   } else { 
      16.   
  
  
    16.     // 查找其它類型文件, 存在則返回 
      17.   
  
  
    17.     let exists = util.exists(file) 
      18.   
  
  
    18.     if (exists) { 
      19.   
  
  
    19.       yield send(this, file) 
      20.   
  
  
    20.     } else { 
      21.   
  
  
    21.       this.status = 404 
      22.   
  
  
    22.       throw new Error(`File: ${file} not found`) 
      23.   
  
  
    23.     } 
      24.   
  
  
    24.   } 
      25.   
  
  
    25. })  
      26.

    第三步：實現(xiàn)控制層功能

    實現(xiàn)完上面兩步，就可以訪問 view 頁面了，但是你會發(fā)現(xiàn)它只能渲染，并不會有任何功能，因為 view 層功能依賴于控制層進行的通訊， 如果控制層收不到消息，它不會響應(yīng)任何事件。

    控制層是整個實現(xiàn)過程中最復(fù)雜的一塊，因為官方工具的代碼與 nwjs 以及 react 等第三方組件耦合過高，所以無法拿來直接使用。 你可以在 wept 項目的 src 目錄下找到控制層邏輯的所有代碼，總體上控制層要負責以下幾個功能：

    • 實現(xiàn) service 層，view 層以及控制層之間的通訊邏輯
    • 依據(jù)路由指令動態(tài)創(chuàng)建 view (wept 使用 iframe 實現(xiàn))
    • 根據(jù)當前頁面動態(tài)渲染 header 和 tabbar
    • 實現(xiàn)原生 API 調(diào)用，返回結(jié)果給 service 層

    wept 里面 iframe 之間的通訊是通過 message.js 模塊實現(xiàn)的，控制頁面(index.html)代碼如下：

     
 
 
        
  
  
    1. window.addEventListener('message', function (e) { 
      2.   
  
  
    2.   let data = e.data 
      3.   
  
  
    3.   let cmd = data.command 
      4.   
  
  
    4.   let msg = data.msg 
      5.   
  
  
    5.   // 沒有跟 contentscript 握手階段，不需要處理 
      6.   
  
  
    6.   if (data.to == 'contentscript') return 
      7.   
  
  
    7.   // 這是個遺留方法，基本廢棄掉了 
      8.   
  
  
    8.   if (data.command == 'EXEC_JSSDK') { 
      9.   
  
  
    9.     sdk(data) 
      10.   
  
  
    10.   // 直接轉(zhuǎn)發(fā) view 層消息到 service，主要是各種事件通知 
      11.   
  
  
    11.   } else if (cmd == 'TO_APP_SERVICE') { 
      12.   
  
  
    12.     toAppService(data) 
      13.   
  
  
    13.   // 除了 publish 發(fā)送消息給 view 層以及控制層可以處理的邏輯（例如設(shè)置標題）， 
      14.   
  
  
    14.   // 其它全部轉(zhuǎn)發(fā) service 處理，所有控制層的處理結(jié)果統(tǒng)一先返回 service 
      15.   
  
  
    15.   } else if (cmd == 'COMMAND_FROM_ASJS') { 
      16.   
  
  
    16.     let sdkName = data.sdkName 
      17.   
  
  
    17.     if (command.hasOwnProperty(sdkName)) { 
      18.   
  
  
    18.       command[sdkName](data) 
      19.   
  
  
    19.     } else { 
      20.   
  
  
    20.       console.warn(`Method ${sdkName} not implemented for command!`) 
      21.   
  
  
    21.     } 
      22.   
  
  
    22.   } else { 
      23.   
  
  
    23.     console.warn(`Command ${cmd} not recognized!`) 
      24.   
  
  
    24.   } 
      25.   
  
  
    25. })  
      26.

    具體實現(xiàn)邏輯可以查看 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 來響應(yīng) service 層通過名為 publish 的 command 傳來的對應(yīng)頁面路由事件。

    header.js 和 tabbar.js 包含了基于 react 實現(xiàn)的 header 和 tabbar 模塊(原計劃是使用 vue，但是沒找到與原生 js 模塊通訊的 API)

    sdk 目錄下包含了 storage，錄音，羅盤模塊，其它比較簡單一些的原生底層調(diào)用我直接寫在 command.js 里面了。

    以上就是實現(xiàn)運行小程序所需 webserver 的全部邏輯了，其實現(xiàn)并不復(fù)雜，主要困難在與理解微信這一整套通訊方式。

    實現(xiàn)小程序?qū)崟r更新

    ***步： 監(jiān)視文件變化并通知前端

    wept 使用了 chokidar 模塊監(jiān)視文件變化，變化后使用 WebSocket 告知所有客戶端進行更新操作。 具體實現(xiàn)位于 lib/watcher.js 和 lib/socket.js, 發(fā)送內(nèi)容是 json 格式的字符串。

    前端控制層收到 WebSocket 消息后再通過 postMessage 接口轉(zhuǎn)發(fā)消息給 view/service 層：

     
 
 
        
  
  
    1. view.postMessage({ 
      2.   
  
  
    2.   msg: { 
      3.   
  
  
    3.     data: { 
      4.   
  
  
    4.       data: { path } 
      5.   
  
  
    5.     }, 
      6.   
  
  
    6.     eventName: 'reload' 
      7.   
  
  
    7.   }, 
      8.   
  
  
    8.   command: 'CUSTOM' 
      9.   
  
  
    9. })  
      10.

    view/service 層監(jiān)聽 reload 事件：

     
 
 
        
  
  
    1. WeixinJSBridge.subscribe('reload', function(data) { 
      2.   
  
  
    2.   // data 即為上面的 msg.data 
      3.   
  
  
    3. })  
      4.

    第二步： 前端響應(yīng)不同文件變化

    前端需要對 4 種(wxml wxss json javascript)不同類型文件進行 4 種不同的熱更新處理，其中 wxss 和 json 相對簡單。

    • wxss 文件變化后前端控制層通知(postMessage 接口)對應(yīng)頁面(如果是 app.wxss 則是所有 view 頁面)進行刷新，view 層收到消息后只需要更改對應(yīng) css 文件的時間戳就可以了，代碼如下：
     
 
 
        
  
  
    1. o.subscribe('reload', function(data) { 
      2.   
  
  
    2.     if (/\.wxss$/.test(data.path)) { 
      3.   
  
  
    3.     var p = '/app/' + data.path 
      4.   
  
  
    4.     var els = document.getElementsByTagName('link') 
      5.   
  
  
    5.     ;[].slice.call(els).forEach(function(el) { 
      6.   
  
  
    6.       var href = el.getAttribute('href').replace(/\?(.*)$/, '') 
      7.   
  
  
    7.       if (p == href) { 
      8.   
  
  
    8.         console.info('Reload: ' + data.path) 
      9.   
  
  
    9.         el.setAttribute('href', href + '?id=' + Date.now()) 
      10.   
  
  
    10.       } 
      11.   
  
  
    11.     }) 
      12.   
  
  
    12.   } 
      13.   
  
  
    13. })  
      14.
    • json 文件變化首先需要判斷，如果是 app.json 我們無法熱更新，所以目前做法是刷新頁面，對于頁面的 json， 我們只需要在控制層上對 header 設(shè)置相應(yīng)狀態(tài)就可以了 (渲染工作由 react 幫我們處理)：
     
 
 
        
  
  
    1. socket.onmessage = function (e) { 
      2.   
  
  
    2.   let data = JSON.parse(e.data) 
      3.   
  
  
    3.   let p = data.path 
      4.   
  
  
    4.   if (data.type == 'reload'){ 
      5.   
  
  
    5.     if (p == 'app.json') { 
      6.   
  
  
    6.       redirectToHome() 
      7.   
  
  
    7.     } else if (/\.json$/.test(p)) { 
      8.   
  
  
    8.       let win = window.__wxConfig__['window'] 
      9.   
  
  
    9.       win.pages[p.replace(/\.json$/, '')] = data.content 
      10.   
  
  
    10.       // header 通過全局 __wxConfig__ 獲取 state 進行渲染 
      11.   
  
  
    11.       header.reset() 
      12.   
  
  
    12.       console.info(`Reset header for ${p.replace(/\.json$/, '')}`) 
      13.   
  
  
    13.     } 
      14.   
  
  
    14.   } 
      15.   
  
  
    15. }  
      16.
    • wxml 使用 VirtualDom API 提供的 diff apply 進行處理。首先需要一個接口獲取新的 generateFunc 函數(shù)(用于生成 VirtualDom)， 添加 koa 的 router：
     
 
 
        
  
  
    1. router.get('/generateFunc', function* () { 
      2.   
  
  
    2.   this.body = yield loadFile(this.query.path + '.wxml') 
      3.   
  
  
    3.   this.type = 'text' 
      4.   
  
  
    4. }) 
      5.   
  
  
    5.  
      6.   
  
  
    6. function loadFile(p, throwErr = true) { 
      7.   
  
  
    7.   return new Promise((resolve, reject) => { 
      8.   
  
  
    8.     fs.stat(`./${p}`, (err, stats) => { 
      9.   
  
  
    9.       if (err) { 
      10.   
  
  
    10.         if (throwErr) return reject(new Error(`file ${p} not found`)) 
      11.   
  
  
    11.         // 文件不存在有可能是文件被刪除，所以不能使用 reject 
      12.   
  
  
    12.         return resolve('') 
      13.   
  
  
    13.       } 
      14.   
  
  
    14.       if (stats && stats.isFile()) { 
      15.   
  
  
    15.         // parer 函數(shù)調(diào)用 exec 命令執(zhí)行 wcsc 文件生成 wxml 對應(yīng)的 javascript 代碼 
      16.   
  
  
    16.         return parser(`${p}`).then(resolve, reject) 
      17.   
  
  
    17.       } else { 
      18.   
  
  
    18.         return resolve('') 
      19.   
  
  
    19.       } 
      20.   
  
  
    20.     }) 
      21.   
  
  
    21.   }) 
      22.   
  
  
    22. }  
      23.
    • 有了接口就可以請求接口，然后執(zhí)行返回函數(shù)進行 diff apply：
     
 
 
        
  
  
    1. // curr 為當前的 VirtualDom 樹 
      2.   
  
  
    2. if (!curr) return 
      3.   
  
  
    3. var xhr = new XMLHttpRequest() 
      4.   
  
  
    4. xhr.onreadystatechange = function() { 
      5.   
  
  
    5.   if (xhr.readyState === 4) { 
      6.   
  
  
    6.     if (xhr.status === 200) { 
      7.   
  
  
    7.       var text = xhr.responseText 
      8.   
  
  
    8.       var func = new Function(text + '\n return $gwx("./' +__path__+ '.wxml")') 
      9.   
  
  
    9.       window.__generateFunc__ = func() 
      10.   
  
  
    10.       var oldTree = curr 
      11.   
  
  
    11.       // 獲取當前 data 生成新的樹 
      12.   
  
  
    12.       var o = m(p.default.getData(), false), 
      13.   
  
  
    13.       // 進行 diff apply 
      14.   
  
  
    14.       a = oldTree.diff(o); 
      15.   
  
  
    15.       a.apply(x); 
      16.   
  
  
    16.       document.dispatchEvent(new CustomEvent("pageReRender", {})); 
      17.   
  
  
    17.       console.info('Hot apply: ' + __path__ + '.wxml') 
      18.   
  
  
    18.     } 
      19.   
  
  
    19.   } 
      20.   
  
  
    20. } 
      21.   
  
  
    21. xhr.open('GET', '/generateFunc?path=' + encodeURIComponent(__path__)) 
      22.   
  
  
    22. xhr.send()  
      23.
    • javascript 更新邏輯相對復(fù)雜一些, 首先依然是一個接口來獲取新的 javascript 代碼：
     
 
 
        
  
  
    1. router.get('/generateJavascript', function* () { 
      2.   
  
  
    2.   this.body = yield loadFile(this.query.path) 
      3.   
  
  
    3.   this.type = 'text' 
      4.   
  
  
    4. })  
      5.

    然后我們在 window 對象上加入 Reload 函數(shù)執(zhí)行具體的更換邏輯：

     
 
 
        
  
  
    1. window.Reload = function (e) { 
      2.   
  
  
    2. var pages = __wxConfig.pages; 
      3.   
  
  
    3. if (pages.indexOf(window.__wxRoute) == -1) return 
      4.   
  
  
    4. // 替換原來的構(gòu)造函數(shù) 
      5.   
  
  
    5. f[window.__wxRoute] = e 
      6.   
  
  
    6. var keys = Object.keys(p) 
      7.   
  
  
    7. // 判定是否當前使用中頁面 
      8.   
  
  
    8. var isCurr = s.route == window.__wxRoute 
      9.   
  
  
    9. keys.forEach(function (key) { 
      10.   
  
  
    10.   var o = p[key]; 
      11.   
  
  
    11.   key = Number(key) 
      12.   
  
  
    12.   var query = o.__query__ 
      13.   
  
  
    13.   var page = o.page 
      14.   
  
  
    14.   var route = o.route 
      15.   
  
  
    15.   // 頁面已經(jīng)被創(chuàng)建 
      16.   
  
  
    16.   if (route == window.__wxRoute) { 
      17.   
  
  
    17.     // 執(zhí)行封裝后的 onHide 和 onUnload 
      18.   
  
  
    18.     isCurr && page.onHide() 
      19.   
  
  
    19.     page.onUnload() 
      20.   
  
  
    20.     // 創(chuàng)建新 page 對象 
      21.   
  
  
    21.     var newPage = new a.default(e, key, route) 
      22.   
  
  
    22.     newPage.__query__ = query 
      23.   
  
  
    23.     // 重新綁定當前頁面 
      24.   
  
  
    24.     if (isCurr) s.page = newPage 
      25.   
  
  
    25.     o.page = newPage 
      26.   
  
  
    26.     // 執(zhí)行 onLoad 和 onShow 
      27.   
  
  
    27.     newPage.onLoad() 
      28.   
  
  
    28.     if (isCurr) newPage.onShow() 
      29.   
  
  
    29.     // 更新 data 數(shù)據(jù) 
      30.   
  
  
    30.     window.__wxAppData[route] = newPage.data 
      31.   
  
  
    31.     window.__wxAppData[route].__webviewId__ = key 
      32.   
  
  
    32.     // 發(fā)送更新事件, 通知 view 層 
      33.   
  
  
    33.     u.publish(c.UPDATE_APP_DATA) 
      34.   
  
  
    34.     u.info("Update view with init data") 
      35.   
  
  
    35.     u.info(newPage.data) 
      36.   
  
  
    36.     // 發(fā)送 appDataChange 事件 
      37.   
  
  
    37.     u.publish("appDataChange", { 
      38.   
  
  
    38.       data: { 
      39.   
  
  
    39.         data: newPage.data 
      40.   
  
  
    40.       }, 
      41.   
  
  
    41.       option: { 
      42.   
  
  
    42.         timestamp: Date.now() 
      43.   
  
  
    43.       } 
      44.   
  
  
    44.     }) 
      45.   
  
  
    45.     newPage.__webviewReady__ = true 
      46.   
  
  
    46.   } 
      47.   
  
  
    47. }) 
      48.   
  
  
    48. u.info("Reload page: " + window.__wxRoute) 
      49.   
  
  
    49. }  
      50.

    以上代碼需要添加到 t.pageHolder 函數(shù)后才可運行

    ***在 view 層初始化后把 Page 函數(shù)切換到 Reload 函數(shù)(當然你也可以在請求返回 javascript 前把 Page 重命名為 Reload) 。

     
 
 
        
  
  
    1.  
      2.   
  
  
    2.  
      3.   
  
  
    3.   
      4.

    總算是把這個坑填上了。希望通過這一系列的分析帶給前端開發(fā)者更多思路。


    新聞標題：微信小程序架構(gòu)分析 (下)
    本文路徑：http://www.dlmjj.cn/article/cdpjhig.html