服務(wù)項目
品牌網(wǎng)站建設(shè)
深度理解品牌
多維度調(diào)研分析
網(wǎng)站視覺設(shè)計
多維度策劃
開發(fā)與運維
短視頻推廣
抖音短視頻營銷
短視頻競價
軟文營銷
短視頻矩陣
SEO優(yōu)化系統(tǒng)平臺開發(fā)
系統(tǒng)定制
APP設(shè)計開發(fā)
小程序開發(fā)數(shù)字產(chǎn)品
服務(wù)項目
TEL：021-61554458
小程序?qū)崟r運行工具 wept 的開發(fā)已經(jīng)基本完成了， 你可以通過我的代碼對小程序的 web 環(huán)境實現(xiàn)有更全面的認識。下面我將介紹它的實現(xiàn)過程以及實時更新的原理。
我在 wept 的開發(fā)中使用 koa 提供 web 服務(wù)，以及 et-improve 提供模板渲染。
我們需要三個頁面，一個做為控制層 index.html，一個做為 service 層service.html，還有一個做為 view 層的 view.html
index.html:
集錦站群管理系統(tǒng)
數(shù)字化內(nèi)容管理系統(tǒng)
集錦ERP管理系統(tǒng)
集錦電商系統(tǒng)
集錦知識付費系統(tǒng)
數(shù)字化運維
網(wǎng)站等保服務(wù)
網(wǎng)站首頁
<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> 用 koa 實現(xiàn)的代碼邏輯非常簡單：
server.js
// 日志中間件 app.use(logger()) // gzip app.use(compress({ threshold: 2048, flush: require('zlib').Z_SYNC_FLUSH })) // 錯誤提醒中間件 app.use(notifyError) // 使用當(dāng)前目錄下文件處理 404 請求 app.use(staticFallback) // 各種 route 實現(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)建啟動服務(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)) { // 動態(tài)編譯為 css 和相應(yīng) js } else if (/\.wxml/.test(file)) { // 動態(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`) } } }) 實現(xiàn)完上面兩步，就可以訪問 view 頁面了，但是你會發(fā)現(xiàn)它只能渲染，并不會有任何功能，因為 view 層功能依賴于控制層進行的通訊， 如果控制層收不到消息，它不會響應(yīng)任何事件。
控制層是整個實現(xiàn)過程中最復(fù)雜的一塊，因為官方工具的代碼與 nwjs 以及 react 等第三方組件耦合過高，所以無法拿來直接使用。 你可以在 wept 項目的 src 目錄下找到控制層邏輯的所有代碼，總體上控制層要負責(zé)以下幾個功能：
wept 里面 iframe 之間的通訊是通過 message.js 模塊實現(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 // 這是個遺留方法，基本廢棄掉了 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!`) } }) 具體實現(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ù)雜，主要困難在與理解微信這一整套通訊方式。
wept 使用了 chokidar 模塊監(jiān)視文件變化，變化后使用 WebSocket 告知所有客戶端進行更新操作。 具體實現(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 }) 前端需要對 4 種（wxml wxss json javascript）不同類型文件進行 4 種不同的熱更新處理，其中 wxss 和 json 相對簡單。
wxss 文件變化后前端控制層通知（postMessage 接口）對應(yīng)頁面（如果是 app.wxss 則是所有 view 頁面）進行刷新，view 層收到消息后只需要更改對應(yīng) 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 設(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 進行渲染 header.reset() console.info(`Reset header for ${p.replace(/\.json$/, '')}`) } } } wxml 使用 VirtualDom API 提供的 diff apply 進行處理。首先需要一個接口獲取新的 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ù)進行 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), // 進行 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ù)雜一些, 首先依然是一個接口來獲取新的 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ù)后才可運行
最后在 view 層初始化后把 Page 函數(shù)切換到 Reload 函數(shù)(當(dāng)然你也可以在請求返回 javascript 前把 Page 重命名為 Reload) 。
<body> <script> window._____sendMsgToNW({ sdkName: 'APP_SERVICE_COMPLETE' }) </script> </body> 總算是把這個坑填上了。希望通過這一系列的分析帶給前端開發(fā)者更多思路。
立即咨詢