微信小程序如何像webview一樣加載html5網頁

發表時(shí)間：2021-4-6

發布人(rén)：融晨科技

浏覽次數：75

感覺微信官方不(bù)太可能開放這(zhè)個(gè)功能，所以(yǐ)還是(shì)靠我們自己吧。有兩種解決方法，第二種是(shì)我自己想的(de)方案。

第一種：

https://github.com/icindy/wxParse

第三方的(de)簡單實現，僅限于(yú)支持簡單的(de)标簽解析，并渲染出(chū)來(lái)，不(bù)是(shì)真正的(de)WebView，不(bù)能有 DOM 事件，js 特效。

第二種：

這(zhè)個(gè)方案是(shì)我自己有過最佳實踐的(de)方案。你可以(yǐ)無償任意使用，但請注明創意來(lái)源。

在(zài)服務器上(shàng) 使用phantomjs，客戶端将要(yào / yāo)渲染的(de) HTML，或者 URL post 給服務器，服務器通過 phatomjs 生成圖片，返回給客戶端顯示。

這(zhè)個(gè)方法，如果實時(shí)做，會有性能問題，對于(yú)一般不(bù)是(shì)很頻繁的(de)内容，建議在(zài)後端錄入時(shí)，直接渲染圖片後，保存圖片路徑。客戶端需要(yào / yāo)顯示的(de)時(shí)候，直接加載圖片。這(zhè)個(gè)方法妙在(zài)可以(yǐ)顯示任意複雜情況的(de)富文本内容。

phatomjs 渲染成圖片的(de)方法：
http://phantomjs.org/screen-capture.html

PHPer 可以(yǐ)看這(zhè)個(gè)封裝：
https://github.com/jonnnnyw/php-phantomjs/

總結

如果隻是(shì)簡單的(de)圖文展示，自己也(yě)可以(yǐ)通過wx.request請求json數據，然後通過小程序的(de)内部組件 view, image, text來(lái)完成渲染。

還有一種方式，去 hack 沒開放的(de)邏輯，應該也(yě)可以(yǐ)調用微信的(de) X5 内核，畢竟都是(shì)微信 APP 内部的(de)功能。但這(zhè)個(gè)意義也(yě)不(bù)大(dà)，因爲(wéi / wèi)上(shàng)線是(shì)需要(yào / yāo)審核的(de)，騰訊是(shì)明文規定禁止調用非開放接口，肯定審核無法通過。

期待後期能夠開放這(zhè)個(gè)能力，但或許永遠都是(shì)期待…