論如何將 h5 頁面快速轉換成微信小程序
微信小程序自開放出來到現(xiàn)在也有一段時間了，相信其底層架構也被琢磨得差不多了。微信小程序本身是雙線程運行的結構，而 h5 頁面是單線程的運行模式，因此兩者無法直接互通。微信小程序的運行模式如下：
微信小程序本身提供了 web-view 組件來支持在微信小程序中嵌入 h5 頁面，但是 web-view 組件在使用上還是有一些限制：不支持個人類型與海外類型的小程序、不支持全屏、頁面與小程序通信不方便、很多小程序接口無法直接調用等。
如果無法使用 web-view，這里還有一條路可以走，利用 h5-to-miniprogram 工具來將 h5 頁面轉換成小程序。
起步
假設你已經有一個 h5 頁面，包含四個文件：
h5 頁面 |---- index.html |---- index.css |---- index.js |---- index.png 復制代碼
這種結構我們再熟悉不過了，具體每個文件的內容可參考這里： github.com/wechat-mini…。頁面渲染出來的效果如下：
頁面很簡單，但是值得一提的時，這個頁面引入了 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="https://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');
});
復制代碼
微信小程序里是不暴露 dom/bom 接口的，說想要使用 jQuery 是非常困難的。盡管難以置信，但是確實是有辦法的，后面會簡述一下原理，讓我先繼續(xù)看下要如何操作。
配置
因為運行環(huán)境的不同，為了在編譯時和運行時對兩者進行一些兼容操作，我們需要一份配置文件：
module.exports = {
index: 'h5', // 首頁
urlMap: { // 每個頁面對應的初始 url
h5: 'https://weixin.qq.com/index?a=1&b=2#hash',
},
resFilter(src, pageKey) {
// 資源過濾，用于替換 h5 中使用到的資源路徑
return pageKey === 'h5' && src === './index.png' ? 'https://raw.githubusercontent.com/wechat-miniprogram/h5-to-miniprogram-demo/master/h5/index.png' : src
},
}
復制代碼
配置文件很簡單，就是一個 js 文件，里面包含各種配置項。例如 index 配置項用于配置首頁； urlMap 用于配置每個頁面的初始 url，這個 url 會被解析到 window.location 中，通常用于頁面跳轉或單頁系統(tǒng)中； resFilter 配置項用于調整資源路徑，這里是因為考慮到微信小程序包大小有限制，默認不會去處理圖片等資源，所以需要提供一個方法來替換資源路徑為網絡路徑。
因為配置文件需要拷貝到微信小程序項目中執(zhí)行，所以配置文件必須是一個純凈的沒有額外依賴的文件（比如 require('fs') 在配置文件中是不允許的）。
構建生成
有了原始的 h5，有了配置文件，那就可以開始進行轉換并生成微信小程序項目了。我們來編寫一個構建腳本，起名為 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)
})
復制代碼
構建腳本也很簡單，引入 h5-to-miniprogram 工具，此工具直接暴露一個 async 方法，調用時將必須的參數(shù)傳入即可。
可以看到參數(shù)中的入口配置是一個 key-value 對象，這里的 value 不能理解，就是頁面的路徑，key 則是頁面的名稱。例子中這個頁面的 key 就是 h5，我們回到上面的配置文件那里就會發(fā)現(xiàn)，很多個地方都需要用到這個 key，這個 key 可以作為頁面的唯一標識。
寫完構建腳本后，后續(xù)就簡單很多了，執(zhí)行：
node build.js 復制代碼
然后就會看到構建腳本中指定的輸出目錄—— miniprogram 目錄被生成出來。完整的 demo 在這里： github.com/wechat-mini…
使用
使用官方提供的開發(fā)者工具打開 miniprogram 目錄，可以看到已經基本達到我們想要的效果了：
原理
原理其實很簡單，h5 頁面在瀏覽器運行的過程就是解析 html 到渲染 dom 樹的過程，然后提供一些 dom/bom 接口給 js 調用。那么在小程序中我們把這一套給模擬一遍就行了，方法很暴力，但是卻意外的有效：因為給 h5 頁面提供了類似瀏覽器的環(huán)境，實現(xiàn)了最底層的適配，所以理論上來說那些通用的框架和庫也能支持運行。上面的例子中就表明了 jQuery 是能夠運行的，像 react、vue 也是可以做到支持的。
微信小程序是雙線程的運行模式，視圖層專注于渲染，邏輯層專注于邏輯。邏輯層是在一個純凈的 js 線程中跑，那里沒有 dom/bom 接口，只能運行頁面邏輯層的代碼。要模擬瀏覽器環(huán)境，最基本的就是要在邏輯層里模擬出一棵 dom 樹，本質上和建立一棵虛擬樹類似，因為它并不是真實的 dom 樹。整個流程簡單來說是這樣的：
不管是頁面中的靜態(tài) html 內容還是使用 innerHTML 等接口動態(tài)插入的 html 內容都可以走上面的流程來進行 dom 樹的創(chuàng)建。dom 樹創(chuàng)建比較簡單，只是細節(jié)比較多，此處的關鍵是將創(chuàng)建好的 dom 節(jié)點映射到微信小程序的自定義組件，利用自定義組件的特性可以輕易的將我們創(chuàng)建好的 dom 樹給渲染出來。
如果你還不清楚微信小程序的自定義組件是什么的話，可以戳官方文檔了解一下。
