微信小程式如何像webview一樣載入html5網頁

凌梅傲雪發表於2017-10-12

感覺微信官方不太可能開放這個功能,所以還是靠我們自己吧。有兩種解決方法,第二種是我自己想的方案。

第一種:
github.com/icindy/wxPa…

第三方的簡單實現,僅限於支援簡單的標籤解析,並渲染出來,不是真正的WebView,不能有 DOM 事件,js 特效。

第二種:
這個方案是我自己有過最佳實踐的方案。你可以無償任意使用,但請註明創意來源。
在伺服器上 使用phantomjs,客戶端將要渲染的 HTML,或者 URL post 給伺服器,伺服器通過 phatomjs 生成圖片,返回給客戶端顯示。

這個方法,如果實時做,會有效能問題,對於一般不是很頻繁的內容,建議在後端錄入時,直接渲染圖片後,儲存圖片路徑。客戶端需要顯示的時候,直接載入圖片。這個方法妙在可以顯示任意複雜情況的富文字內容。

phatomjs 渲染成圖片的方法:
phantomjs.org/screen-capt…

PHPer 可以看這個封裝:
github.com/jonnnnyw/ph…

總結
如果只是簡單的圖文展示,自己也可以通過wx.request請求json資料,然後通過小程式的內部元件 view, image, text來完成渲染。

還有一種方式,去 hack 沒開放的邏輯,應該也可以呼叫微信的 X5 核心,畢竟都是微信 APP 內部的功能。但這個意義也不大,因為上線是需要稽核的,騰訊是明文規定禁止呼叫非開放介面,肯定稽核無法通過。

期待後期能夠開放這個能力,但或許永遠都是期待…

原文:www.yinqisen.cn/blog-731.ht…

相關文章