論如何將 h5 頁面快速轉換成微信小程序
微(wei)信(xin)小(xiao)程(cheng)(cheng)序自開放出(chu)來到現在(zai)也有一段時間了，相信(xin)其底(di)層架構(gou)也被琢(zhuo)磨(mo)得差不(bu)多了。微(wei)信(xin)小(xiao)程(cheng)(cheng)序本身是雙線程(cheng)(cheng)運(yun)行(xing)的(de)結(jie)構(gou)，而 h5 頁面是單線程(cheng)(cheng)的(de)運(yun)行(xing)模式，因此(ci)兩者(zhe)無法直(zhi)接互通。微(wei)信(xin)小(xiao)程(cheng)(cheng)序的(de)運(yun)行(xing)模式如下：
微(wei)信(xin)(xin)小程序(xu)本身提(ti)供(gong)了 web-view 組件來支持(chi)在微(wei)信(xin)(xin)小程序(xu)中嵌入 h5 頁面(mian)，但是(shi) web-view 組件在使用上還是(shi)有一(yi)些限制(zhi)：不支持(chi)個人類型與(yu)海(hai)外類型的小程序(xu)、不支持(chi)全屏、頁面(mian)與(yu)小程序(xu)通(tong)信(xin)(xin)不方便、很多小程序(xu)接(jie)口無法直接(jie)調用等。
如果(guo)無法使用 web-view，這里還有一(yi)條路可以(yi)走(zou)，利用 h5-to-miniprogram 工具來將 h5 頁面轉換成小程(cheng)序。
起步
假設(she)你(ni)已(yi)經有一個 h5 頁面，包含四(si)個文(wen)件：
h5 頁面 |---- index.html |---- index.css |---- index.js |---- index.png 復制代碼
這(zhe)種(zhong)結構我們再熟悉不(bu)過了(le)，具體每個文件的(de)(de)內容可參考這(zhe)里(li)： github.com/wechat-mini…。頁(ye)面渲染出來的(de)(de)效果如下：
頁面(mian)很簡單，但是值(zhi)得一提(ti)的時，這個頁面(mian)引(yin)入了 jQuery 庫，所以 index.html 和 index.js 是這樣的：
<!doctype html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta name="format-detection" content="telephone=no, email=no">
<title>demo</title>
<style type="text/css">
html, body {
width: 100%;
height: 100%;
}
</style>
<link rel="stylesheet" href="./index.css">
</head>
<body>
<img class="logo" src="./index.png">
<div class="cnt"></div>
<script src="//juneandgreen.github.io/test/h5-to-miniprogram-demo/demo2/js/jquery-1.12.4.min.js"></script>
<script src="./index.js"></script>
</body>
</html>
復制代碼
$(document).ready(function() {
$('.cnt').text('h5 to miniprogram');
});
復制代碼
微信小程序里(li)是不暴(bao)露 dom/bom 接口(kou)的，說想要使用(yong) jQuery 是非常困難的。盡管難以置信，但(dan)是確實(shi)是有辦法的，后面會簡述一下(xia)原(yuan)理(li)，讓我先繼續看下(xia)要如何操(cao)作。
配置
因為運行(xing)環(huan)境的不同，為了在編譯(yi)時(shi)(shi)和運行(xing)時(shi)(shi)對兩者進(jin)行(xing)一些兼容操作，我們(men)需要一份配置文件(jian)：
module.exports = {
index: 'h5', // 首頁
urlMap: { // 每個頁面對應的初始 url
h5: '//weixin.qq.com/index?a=1&b=2#hash',
},
resFilter(src, pageKey) {
// 資源過濾，用于替換 h5 中使用到的資源路徑
return pageKey === 'h5' && src === './index.png' ? '//raw.githubusercontent.com/wechat-miniprogram/h5-to-miniprogram-demo/master/h5/index.png' : src
},
}
復制代碼
配(pei)置(zhi)(zhi)(zhi)文件很(hen)簡單，就(jiu)是一個 js 文件，里(li)面(mian)包含(han)各種配(pei)置(zhi)(zhi)(zhi)項(xiang)。例如 index 配(pei)置(zhi)(zhi)(zhi)項(xiang)用于(yu)(yu)配(pei)置(zhi)(zhi)(zhi)首頁(ye)； urlMap 用于(yu)(yu)配(pei)置(zhi)(zhi)(zhi)每個頁(ye)面(mian)的初始 url，這(zhe)個 url 會被解(jie)析到 window.location 中，通(tong)常(chang)用于(yu)(yu)頁(ye)面(mian)跳轉(zhuan)或(huo)單頁(ye)系統中； resFilter 配(pei)置(zhi)(zhi)(zhi)項(xiang)用于(yu)(yu)調整(zheng)資(zi)源路(lu)徑，這(zhe)里(li)是因(yin)為考慮到微信小(xiao)程序包大小(xiao)有限制，默認不會去處理圖(tu)片等資(zi)源，所(suo)以需要(yao)提供一個方法來替換資(zi)源路(lu)徑為網絡路(lu)徑。
因為(wei)配(pei)置文(wen)(wen)件需(xu)要拷貝(bei)到微信小程序項目中(zhong)執行，所以(yi)配(pei)置文(wen)(wen)件必須(xu)是一個純凈(jing)的沒有額(e)外依賴的文(wen)(wen)件（比如 require('fs') 在配(pei)置文(wen)(wen)件中(zhong)是不允許的）。
構建生成
有了(le)原始(shi)的 h5，有了(le)配置文件，那就可以開(kai)始(shi)進行(xing)轉(zhuan)換并生成微信小程(cheng)序(xu)項目了(le)。我(wo)們來編寫一個構建腳(jiao)本，起名為 build.js：
const path = require('path')
const toMiniprogram = require('h5-to-miniprogram')
toMiniprogram({
entry: { // 入口 h5 頁面路徑
h5: path.join(__dirname, './h5/index.html'),
},
output: path.join(__dirname, './miniprogram'), // 輸出目錄
config: path.join(__dirname, './config.js'), // 配置文件路徑
}).then(res => {
console.log('done')
}).catch(err => {
console.error(err)
})
復制代碼
構建腳本也很簡(jian)單，引(yin)入(ru) h5-to-miniprogram 工(gong)具，此工(gong)具直(zhi)接暴露一個(ge) async 方(fang)法，調用時將必須的參數傳入(ru)即可。
可(ke)以(yi)(yi)看到參數中的(de)入口配(pei)置(zhi)是(shi)一個(ge) key-value 對象，這(zhe)里的(de) value 不能理解(jie)，就是(shi)頁面的(de)路徑，key 則是(shi)頁面的(de)名稱。例子中這(zhe)個(ge)頁面的(de) key 就是(shi) h5，我們回到上面的(de)配(pei)置(zhi)文件那(nei)里就會發現，很(hen)多個(ge)地方都(dou)需(xu)要用(yong)到這(zhe)個(ge) key，這(zhe)個(ge) key 可(ke)以(yi)(yi)作為頁面的(de)唯(wei)一標識。
寫完構(gou)建腳本后，后續(xu)就簡單很多了，執(zhi)行：
node build.js 復制代碼
然后就(jiu)會看到構建腳本中(zhong)指定的輸出目錄—— miniprogram 目錄被生成(cheng)出來(lai)。完整的 demo 在(zai)這里： github.com/wechat-mini…
使用
使用官方提供的開發者工(gong)具打開 miniprogram 目錄，可以看到(dao)已經(jing)基本達到(dao)我們想要的效果了：
原理
原理其實很(hen)(hen)簡(jian)單，h5 頁面在瀏(liu)覽器(qi)運行(xing)的過程就是(shi)解析 html 到(dao)渲染 dom 樹(shu)的過程，然后提(ti)供一些 dom/bom 接口給(gei) js 調用。那(nei)么在小程序中我們把這一套(tao)給(gei)模(mo)擬一遍(bian)就行(xing)了(le)，方法很(hen)(hen)暴力(li)，但(dan)是(shi)卻(que)意外的有效：因(yin)為給(gei) h5 頁面提(ti)供了(le)類似瀏(liu)覽器(qi)的環境，實現了(le)最底(di)層的適配，所以(yi)(yi)理論上(shang)來說那(nei)些通用的框架和庫也(ye)能支持(chi)(chi)運行(xing)。上(shang)面的例(li)子中就表明了(le) jQuery 是(shi)能夠運行(xing)的，像 react、vue 也(ye)是(shi)可以(yi)(yi)做到(dao)支持(chi)(chi)的。
微信小程(cheng)序是雙(shuang)線程(cheng)的運行模(mo)式，視圖層(ceng)(ceng)(ceng)專注于(yu)渲染，邏(luo)(luo)輯(ji)層(ceng)(ceng)(ceng)專注于(yu)邏(luo)(luo)輯(ji)。邏(luo)(luo)輯(ji)層(ceng)(ceng)(ceng)是在一(yi)個純(chun)凈的 js 線程(cheng)中跑，那里沒有 dom/bom 接口，只能運行頁(ye)面邏(luo)(luo)輯(ji)層(ceng)(ceng)(ceng)的代碼。要模(mo)擬瀏覽器環境(jing)，最基本(ben)的就是要在邏(luo)(luo)輯(ji)層(ceng)(ceng)(ceng)里模(mo)擬出(chu)一(yi)棵 dom 樹(shu)，本(ben)質(zhi)上和建立一(yi)棵虛擬樹(shu)類(lei)似，因為它并不是真實的 dom 樹(shu)。整個流程(cheng)簡單來說是這樣(yang)的：
不管是(shi)頁面(mian)中(zhong)的(de)(de)(de)靜態 html 內容還是(shi)使用 innerHTML 等接口(kou)動態插入的(de)(de)(de) html 內容都(dou)可(ke)以(yi)走上面(mian)的(de)(de)(de)流程來進行 dom 樹的(de)(de)(de)創建(jian)。dom 樹創建(jian)比(bi)較(jiao)簡單，只是(shi)細(xi)節(jie)比(bi)較(jiao)多，此處的(de)(de)(de)關鍵是(shi)將(jiang)創建(jian)好(hao)的(de)(de)(de) dom 節(jie)點映射到微信(xin)小程序(xu)的(de)(de)(de)自(zi)定義組件，利(li)用自(zi)定義組件的(de)(de)(de)特性(xing)可(ke)以(yi)輕易的(de)(de)(de)將(jiang)我們創建(jian)好(hao)的(de)(de)(de) dom 樹給渲(xuan)染出來。
如果你還不清楚(chu)微(wei)信小(xiao)程序的自(zi)定(ding)義組(zu)件是什么的話，可以戳官方文(wen)檔了(le)解(jie)一下(xia)。
