在微信小程序裡跑 h5 頁面，不會又是說使用 web-view 組件來搞吧？确實，使用 web-view 組件可以達到跑 h5 頁面的要求，但是 web-view 組件在使用上還是有一些限制：不支持個人類型與海外類型的小程序、不支持全屏、頁面與小程序通信不方便、很多小程序接口無法直接調用等。

　　那麼，還有其他的法子麼？此處先給答案，有的。

　　運行環境

　　h5 頁面是運行在 web 環境下，小程序本身也是基于 web 的，那為什麼一直沒有辦法讓 h5 在小程序裡直接運行呢？原因在于小程序特有的運行環境。

　　以一個小程序的頁面為例，通常一個小程序的頁面至少包含三個文件：wxss 文件、 wxml 文件和 js 文件。其中 wxml 文件和 wxss 文件組成了頁面的視圖層，js 文件則屬于頁面的邏輯層，在小程序中，視圖層和邏輯層是在不同的線程中執行的。小程序裡所有頁面的邏輯層都在一個 js 線程中運行，而視圖層則分别在不同的 view 線程中。通常一個頁面對應一個 view 線程，為了對性能的控制，不會允許用戶無節制的啟動 view 線程，所以也就有了頁面棧數量的限制（目前最多允許打開十層頁面）。

　　在 view 線程中是有類似浏覽器一樣的環境，但是隻有頁面的視圖層在上面跑，頁面的渲染完全基于另一個 js 線程傳輸過來的數據。js 線程是一個純淨的 js 環境，那些你想要調的 document.getElementById、location.href 等 dom/bom 接口通通都沒有，你隻能在這裡執行 js 代碼，調用官方提供的接口，而頁面的邏輯層就是在這樣的線程中跑。這樣問題就出來了，頁面會渲染成什麼樣子，完全基于初始模闆和數據，你想調接口來修改頁面結構，門都沒有～

　　方案制定

　　小程序的運行環境如此特殊，以至于它的開發模式也比較另類，但是還是有很多人希望能夠将開發過程大一統，一份代碼各端運行。那麼在限制如此之大的情況下，要怎麼做的？

　　現在市面上有一些基于 react 或 vue 搞出來的工具，它們要求你使用 react 或者 vue 來寫頁面，由構建工具來編譯到各個環境上可運行的目标代碼，因為 react 和 vue 本身是基于數據來驅動的組件化框架，在一定程度上限制開發者直接調用 dom/bom 接口，所以可以比較方便的實現代碼的編譯轉化。

　　PS：因為小程序本身的限制，react 和 vue 的小部分功能也是無法做到完全兼容的，不過大部分的實現都是 OK 的。

　　不過這不是我想要的，因為它們雖然實現得很漂亮，但是仍有不小的開發局限，你必須選擇 vue、react 等框架的其中一種來使用。我想要的是更原生、更底層的大一統方案，底層到除了 vue、react 之外，你甚至可以在小程序中使用 jQuery。

　　目标太大會扯着蛋，至少得先有一個思路才行。

　　回到先前提到，小程序的邏輯層是在一個純淨的 js 線程中跑，那裡沒有 do可。m/bom 接口，隻能運行頁面邏輯層的代碼，那麼我們想辦法在邏輯層建一棵 dom 樹，把基本的 dom/bom 接口都模拟出來不就行了麼？

　　乍一想好像可以，但是這裡隐藏着一個問題：邏輯層中 dom 樹的變更要如何轉變成數據并更新到視圖層呢？

　　這裡很重要的一點：小程序提供了自定義組件，并且支持遞歸引用。也就是說，我們可以将 h5 中的 div、span、ul 等 dom 節點轉成自定義組件，邏輯層裡的每個 dom 節點都會對應一個視圖層中的自定義組件實例，節點更新了，我們找到對應的自定義組件實例進行更新即

歡迎轉載，本文标題：搭建微信小程序h5版有哪些方法，轉載請注明原文網址：搭建微信小程序h5版有哪些方法

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!