微信小程序架構(gòu)分析 (下)

作者：第九程序 2017-06-09 12:58:20

這一篇拖了一段時(shí)間，原因是實(shí)現(xiàn)一個(gè)可以運(yùn)行微信小程序的 web 環(huán)境比我想象中要困難一些，這一方面是因?yàn)槲⑿艑τ诖a進(jìn)行了壓縮混淆，另一方面主要原因是開發(fā)者工具內(nèi)部邏輯調(diào)用比較復(fù)雜（難怪 bug 不少），完全無法拿出來重用。

[[193510]]

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

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

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

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

***步：準(zhǔn)備頁面模板

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

index.html:

<div class="head"> 
</div> 
<div class="scrollable"> 
</div> 
<div class="tabbar-root"> 
</div> 
<script> 
  var __wxConfig__ = {{= _.config}} 
  var __root__ = '{{= _.root}}' 
</script> 
<script src="/script/build.js"></script>

service.html:

<head> 
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  <link href="https://res.wx.qq.com/mpres/htmledition/images/favicon218877.ico" rel="Shortcut Icon"> 
  <script> 
  var __wxAppData = {} 
  var __wxRoute 
  var __wxRouteBegin 
  global = {} 
  var __wxConfig = {{= _.config}} 
  </script> 
  <script src="/script/bridge.js" type="text/javascript"></script> 
  <script src="/script/service.js" type="text/javascript"></script> 
  {{each _.utils as util}} 
  <script src="/app/{{= util}}" type="text/javascript"></script> 
  {{/}} 
  <script src="/app/app.js" type="text/javascript"></script> 
  {{each _.routes as route}} 
  <script> var __wxRoute = '{{= route | noext}}', __wxRouteBegin = true;</script> 
  <script src="/app/{{= route}}" type="text/javascript"></script> 
  {{/}} 
</head> 
<body> 
  <script> 
    window._____sendMsgToNW({ 
      sdkName: 'APP_SERVICE_COMPLETE' 
    }) 
  </script> 
</body>

view.html:

<head> 
  <link href="https://res.wx.qq.com/mpres/htmledition/images/favicon218877.ico" rel="Shortcut Icon"> 
  <meta charset="UTF-8" /> 
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" /> 
  <link rel="stylesheet" type="text/css" href="/css/default.css"> 
  <link rel="stylesheet" type="text/css" href="/app/app.wxss"> 
  <link rel="stylesheet" type="text/css" href="/app/{{= _.path}}.wxss"> 
  <script> var __path__ = '{{= _.path}}'</script> 
  <script src="/script/ViewBridge.js" async type="text/javascript"></script> 
  <script src="/script/view.js" type="text/javascript"></script> 
  <script> 
  {{= _.inject_js}} 
  </script> 
  <script> 
    document.dispatchEvent(new CustomEvent("generateFuncReady", { 
      detail: { 
        generateFunc: $gwx('./{{= _.path}}.wxml') 
      } 
    })) 
  </script> 
</head> 
<body> 
  <div></div> 
</body>

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

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

server.js

// 日志中間件 
app.use(logger()) 
// gzip 
app.use(compress({ 
  threshold: 2048, 
  flush: require('zlib').Z_SYNC_FLUSH 
})) 
// 錯(cuò)誤提醒中間件 
app.use(notifyError) 
// 使用當(dāng)前目錄下文件處理 404 請求 
app.use(staticFallback) 
// 各種 route 實(shí)現(xiàn) 
app.use(router.routes()) 
app.use(router.allowedMethods()) 
// 對于 public 目錄啟用靜態(tài)文件服務(wù) 
app.use(require('koa-static')(path.resolve(__dirname, '../public'))) 
// 創(chuàng)建啟動(dòng)服務(wù) 
let server = http.createServer(app.callback()) 
server.listen(3000)

router.js

router.get('/', function *() { 
  // 加載 index.html 模板和數(shù)據(jù)，輸出 index 頁面 
}) 
 
router.get('/appservice', function *() { 
  // 加載 service.html 模板和數(shù)據(jù)，輸出 service 頁面 
}) 
 
// 讓 `/app/**` 加載小程序所在目錄文件 
router.get('/app/(.*)', function* () { 
  if (/\.(wxss|js)$/.test(file)) { 
    // 動(dòng)態(tài)編譯為 css 和相應(yīng) js 
  } else if (/\.wxml/.test(file)) { 
    // 動(dòng)態(tài)編譯為 html 
  } else { 
    // 查找其它類型文件, 存在則返回 
    let exists = util.exists(file) 
    if (exists) { 
      yield send(this, file) 
    } else { 
      this.status = 404 
      throw new Error(`File: ${file} not found`) 
    } 
  } 
})

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

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

控制層是整個(gè)實(shí)現(xiàn)過程中最復(fù)雜的一塊，因?yàn)楣俜焦ぞ叩拇a與 nwjs 以及 react 等第三方組件耦合過高，所以無法拿來直接使用。你可以在 wept 項(xiàng)目的 src 目錄下找到控制層邏輯的所有代碼，總體上控制層要負(fù)責(zé)以下幾個(gè)功能：

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

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

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

具體實(shí)現(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 實(shí)現(xiàn)，viewManage 實(shí)現(xiàn)了 navigateTo， redirectTo 以及 navigateBack 來響應(yīng) service 層通過名為 publish 的 command 傳來的對應(yīng)頁面路由事件。

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

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

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

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

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

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

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

view.postMessage({ 
  msg: { 
    data: { 
      data: { path } 
    }, 
    eventName: 'reload' 
  }, 
  command: 'CUSTOM' 
})

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

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

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

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

wxss 文件變化后前端控制層通知(postMessage 接口)對應(yīng)頁面(如果是 app.wxss 則是所有 view 頁面)進(jìn)行刷新，view 層收到消息后只需要更改對應(yīng) css 文件的時(shí)間戳就可以了，代碼如下：

o.subscribe('reload', function(data) { 
    if (/\.wxss$/.test(data.path)) { 
    var p = '/app/' + data.path 
    var els = document.getElementsByTagName('link') 
    ;[].slice.call(els).forEach(function(el) { 
      var href = el.getAttribute('href').replace(/\?(.*)$/, '') 
      if (p == href) { 
        console.info('Reload: ' + data.path) 
        el.setAttribute('href', href + '?id=' + Date.now()) 
      } 
    }) 
  } 
})

json 文件變化首先需要判斷，如果是 app.json 我們無法熱更新，所以目前做法是刷新頁面，對于頁面的 json，我們只需要在控制層上對 header 設(shè)置相應(yīng)狀態(tài)就可以了 (渲染工作由 react 幫我們處理)：

socket.onmessage = function (e) { 
  let data = JSON.parse(e.data) 
  let p = data.path 
  if (data.type == 'reload'){ 
    if (p == 'app.json') { 
      redirectToHome() 
    } else if (/\.json$/.test(p)) { 
      let win = window.__wxConfig__['window'] 
      win.pages[p.replace(/\.json$/, '')] = data.content 
      // header 通過全局 __wxConfig__ 獲取 state 進(jìn)行渲染 
      header.reset() 
      console.info(`Reset header for ${p.replace(/\.json$/, '')}`) 
    } 
  } 
}

wxml 使用 VirtualDom API 提供的 diff apply 進(jìn)行處理。首先需要一個(gè)接口獲取新的 generateFunc 函數(shù)(用于生成 VirtualDom)，添加 koa 的 router：

router.get('/generateFunc', function* () { 
  this.body = yield loadFile(this.query.path + '.wxml') 
  this.type = 'text' 
}) 
 
function loadFile(p, throwErr = true) { 
  return new Promise((resolve, reject) => { 
    fs.stat(`./${p}`, (err, stats) => { 
      if (err) { 
        if (throwErr) return reject(new Error(`file ${p} not found`)) 
        // 文件不存在有可能是文件被刪除，所以不能使用 reject 
        return resolve('') 
      } 
      if (stats && stats.isFile()) { 
        // parer 函數(shù)調(diào)用 exec 命令執(zhí)行 wcsc 文件生成 wxml 對應(yīng)的 javascript 代碼 
        return parser(`${p}`).then(resolve, reject) 
      } else { 
        return resolve('') 
      } 
    }) 
  }) 
}

有了接口就可以請求接口，然后執(zhí)行返回函數(shù)進(jìn)行 diff apply：

// curr 為當(dāng)前的 VirtualDom 樹 
if (!curr) return 
var xhr = new XMLHttpRequest() 
xhr.onreadystatechange = function() { 
  if (xhr.readyState === 4) { 
    if (xhr.status === 200) { 
      var text = xhr.responseText 
      var func = new Function(text + '\n return $gwx("./' +__path__+ '.wxml")') 
      window.__generateFunc__ = func() 
      var oldTree = curr 
      // 獲取當(dāng)前 data 生成新的樹 
      var o = m(p.default.getData(), false), 
      // 進(jìn)行 diff apply 
      a = oldTree.diff(o); 
      a.apply(x); 
      document.dispatchEvent(new CustomEvent("pageReRender", {})); 
      console.info('Hot apply: ' + __path__ + '.wxml') 
    } 
  } 
} 
xhr.open('GET', '/generateFunc?path=' + encodeURIComponent(__path__)) 
xhr.send()

javascript 更新邏輯相對復(fù)雜一些, 首先依然是一個(gè)接口來獲取新的 javascript 代碼：

router.get('/generateJavascript', function* () { 
  this.body = yield loadFile(this.query.path) 
  this.type = 'text' 
})

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

window.Reload = function (e) { 
var pages = __wxConfig.pages; 
if (pages.indexOf(window.__wxRoute) == -1) return 
// 替換原來的構(gòu)造函數(shù) 
f[window.__wxRoute] = e 
var keys = Object.keys(p) 
// 判定是否當(dāng)前使用中頁面 
var isCurr = s.route == window.__wxRoute 
keys.forEach(function (key) { 
  var o = p[key]; 
  key = Number(key) 
  var query = o.__query__ 
  var page = o.page 
  var route = o.route 
  // 頁面已經(jīng)被創(chuàng)建 
  if (route == window.__wxRoute) { 
    // 執(zhí)行封裝后的 onHide 和 onUnload 
    isCurr && page.onHide() 
    page.onUnload() 
    // 創(chuàng)建新 page 對象 
    var newPage = new a.default(e, key, route) 
    newPage.__query__ = query 
    // 重新綁定當(dāng)前頁面 
    if (isCurr) s.page = newPage 
    o.page = newPage 
    // 執(zhí)行 onLoad 和 onShow 
    newPage.onLoad() 
    if (isCurr) newPage.onShow() 
    // 更新 data 數(shù)據(jù) 
    window.__wxAppData[route] = newPage.data 
    window.__wxAppData[route].__webviewId__ = key 
    // 發(fā)送更新事件, 通知 view 層 
    u.publish(c.UPDATE_APP_DATA) 
    u.info("Update view with init data") 
    u.info(newPage.data) 
    // 發(fā)送 appDataChange 事件 
    u.publish("appDataChange", { 
      data: { 
        data: newPage.data 
      }, 
      option: { 
        timestamp: Date.now() 
      } 
    }) 
    newPage.__webviewReady__ = true 
  } 
}) 
u.info("Reload page: " + window.__wxRoute) 
}

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

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

<body> 
<script> 
  window._____sendMsgToNW({ 
    sdkName: 'APP_SERVICE_COMPLETE' 
  }) 
</script> 
</body>

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

責(zé)任編輯：龐桂玉來源：第九程序的博客

微信小程序架構(gòu)分析