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

時間 2019-11-13

原文原文鏈接

這一篇拖了一段時間，緣由是實現一個能夠運行微信小程序的 web 環境比我想象中要困難一些，這一方面是由於微信對於代碼進行了壓縮混淆，另外一方面主要緣由是開發者工具內部邏輯調用比較複雜（難怪 bug 很多），徹底沒法拿出來重用。javascript

小程序實時運行工具 wept 的開發已經基本完成了，你能夠經過個人代碼對小程序的 web 環境實現有更全面的認識。下面我將介紹它的實現過程以及實時更新的原理。css

小程序 web 服務實現

我在 wept 的開發中使用 koa 提供 web 服務，以及 et-improve 提供模板渲染。html

第一步：準備頁面模板

咱們須要三個頁面，一個作爲控制層 index.html，一個作爲 service 層service.html，還有一個作爲 view 層的 view.html前端

index.html:vue

<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:java

<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:react

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

第二步：實現 http 服務

用 koa 實現的代碼邏輯很是簡單：git

server.jsgithub

// 日誌中間件
app.use(logger())
// gzip
app.use(compress({
  threshold: 2048,
  flush: require('zlib').Z_SYNC_FLUSH
}))
// 錯誤提醒中間件
app.use(notifyError)
// 使用當前目錄下文件處理 404 請求
app.use(staticFallback)
// 各類 route 實現
app.use(router.routes())
app.use(router.allowedMethods())
// 對於 public 目錄啓用靜態文件服務
app.use(require('koa-static')(path.resolve(__dirname, '../public')))
// 建立啓動服務
let server = http.createServer(app.callback())
server.listen(3000)

router.jsweb

router.get('/', function *() {
  // 加載 index.html 模板和數據，輸出 index 頁面
})

router.get('/appservice', function *() {
  // 加載 service.html 模板和數據，輸出 service 頁面
})

// 讓 `/app/**` 加載小程序所在目錄文件
router.get('/app/(.*)', function* () {
  if (/\.(wxss|js)$/.test(file)) {
    // 動態編譯爲 css 和相應 js
  } else if (/\.wxml/.test(file)) {
    // 動態編譯爲 html
  } else {
    // 查找其它類型文件, 存在則返回
    let exists = util.exists(file)
    if (exists) {
      yield send(this, file)
    } else {
      this.status = 404
      throw new Error(`File: ${file} not found`)
    }
  }
})

第三步：實現控制層功能

實現完上面兩步，就能夠訪問 view 頁面了，可是你會發現它只能渲染，並不會有任何功能，由於 view 層功能依賴於控制層進行的通信，若是控制層收不到消息，它不會響應任何事件。

控制層是整個實現過程當中最複雜的一塊，由於官方工具的代碼與 nwjs 以及 react 等第三方組件耦合太高，因此沒法拿來直接使用。你能夠在 wept 項目的 src 目錄下找到控制層邏輯的全部代碼，整體上控制層要負責如下幾個功能：

實現 service 層，view 層以及控制層之間的通信邏輯
依據路由指令動態建立 view （wept 使用 iframe 實現）
根據當前頁面動態渲染 header 和 tabbar
實現原生 API 調用，返回結果給 service 層

wept 裏面 iframe 之間的通信是經過 message.js 模塊實現的，控制頁面（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
  // 這是個遺留方法，基本廢棄掉了
  if (data.command == 'EXEC_JSSDK') {
    sdk(data)
  // 直接轉發 view 層消息到 service，主要是各類事件通知
  } else if (cmd == 'TO_APP_SERVICE') {
    toAppService(data)
  // 除了 publish 發送消息給 view 層以及控制層能夠處理的邏輯（例如設置標題），
  // 其它所有轉發 service 處理，全部控制層的處理結果統一先返回 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!`)
  }
})

具體實現邏輯能夠查看 src/command.js src/service.jssrc/sdk/*.js。對於 view/service 頁面只需把原來 bridge.js 的window.postMessage 改成 window.top.postMessage 便可。

view 層的控制邏輯由 src/view.js 以及 src/viewManage.js 實現，viewManage 實現了 navigateTo， redirectTo 以及 navigateBack 來響應 service 層經過名爲 publish 的 command 傳來的對應頁面路由事件。

header.js 和 tabbar.js 包含了基於 react 實現的 header 和 tabbar 模塊（原計劃是使用 vue，可是沒找到與原生 js 模塊通信的 API）

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

以上就是實現運行小程序所需 webserver 的所有邏輯了，其實現並不複雜，主要困難在與理解微信這一整套通信方式。

實現小程序實時更新

第一步：監視文件變化並通知前端

wept 使用了 chokidar 模塊監視文件變化，變化後使用 WebSocket 告知全部客戶端進行更新操做。具體實現位於 lib/watcher.js 和 lib/socket.js, 發送內容是 json 格式的字符串。

前端控制層收到 WebSocket 消息後再經過 postMessage 接口轉發消息給 view/service 層：

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

view/service 層監聽 reload 事件：

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

第二步：前端響應不一樣文件變化

前端須要對 4 種（wxml wxss json javascript）不一樣類型文件進行 4 種不一樣的熱更新處理，其中 wxss 和 json 相對簡單。

wxss 文件變化後前端控制層通知（postMessage 接口）對應頁面（若是是 app.wxss 則是全部 view 頁面）進行刷新，view 層收到消息後只須要更改對應 css 文件的時間戳就能夠了，代碼以下：

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 設置相應狀態就能夠了 (渲染工做由 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 進行渲染
      header.reset()
      console.info(`Reset header for ${p.replace(/\.json$/, '')}`)
    }
  }
}

wxml 使用 VirtualDom API 提供的 diff apply 進行處理。首先須要一個接口獲取新的 generateFunc 函數（用於生成 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 函數調用 exec 命令執行 wcsc 文件生成 wxml 對應的 javascript 代碼
        return parser(`${p}`).then(resolve, reject)
      } else {
        return resolve('')
      }
    })
  })
}

有了接口就能夠請求接口，而後執行返回函數進行 diff apply：

// curr 爲當前的 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
      // 獲取當前 data 生成新的樹
      var o = m(p.default.getData(), false),
      // 進行 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 更新邏輯相對複雜一些, 首先依然是一個接口來獲取新的 javascript 代碼：

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

而後咱們在 window 對象上加入 Reload 函數執行具體的更換邏輯：

window.Reload = function (e) {
var pages = __wxConfig.pages;
if (pages.indexOf(window.__wxRoute) == -1) return
// 替換原來的構造函數
f[window.__wxRoute] = e
var keys = Object.keys(p)
// 斷定是否當前使用中頁面
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
  // 頁面已經被建立
  if (route == window.__wxRoute) {
    // 執行封裝後的 onHide 和 onUnload
    isCurr && page.onHide()
    page.onUnload()
    // 建立新 page 對象
    var newPage = new a.default(e, key, route)
    newPage.__query__ = query
    // 從新綁定當前頁面
    if (isCurr) s.page = newPage
    o.page = newPage
    // 執行 onLoad 和 onShow
    newPage.onLoad()
    if (isCurr) newPage.onShow()
    // 更新 data 數據
    window.__wxAppData[route] = newPage.data
    window.__wxAppData[route].__webviewId__ = key
    // 發送更新事件, 通知 view 層
    u.publish(c.UPDATE_APP_DATA)
    u.info("Update view with init data")
    u.info(newPage.data)
    // 發送 appDataChange 事件
    u.publish("appDataChange", {
      data: {
        data: newPage.data
      },
      option: {
        timestamp: Date.now()
      }
    })
    newPage.__webviewReady__ = true
  }
})
u.info("Reload page: " + window.__wxRoute)
}

以上代碼須要添加到 t.pageHolder 函數後纔可運行

最後在 view 層初始化後把 Page 函數切換到 Reload 函數(固然你也能夠在請求返回 javascript 前把 Page 重命名爲 Reload) 。

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

總算是把這個坑填上了。但願經過這一系列的分析帶給前端開發者更多思路。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

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

小程序 web 服務實現

第一步： 準備頁面模板

第二步： 實現 http 服務