前言

微信小程式提供了新的開放能力！它終於開放了在小程式中內嵌HTML頁面的功能！從微信小程式基礎庫1.6.4開始，我們就可以在小程式內放置一個<web-view>元件來連結我們的HTML頁面了。在這之前，我們在小程式中沒有辦法整合我們已有的HTML程式（比如HTML5文章系統，商城系統等），只能使用小http://www.cppcns.com程式的方式重新開發一套，現在有了<web-view>就可以方便的整合這些系統，為我們減少了可觀的工作量aVaqAPJhDP。

tips:個人型別的小程式暫不支援web-viwe引用H5，同時需要在小程式管理後臺配置H5的域名為業務域名

方法如下

1.直接引入頁面地址；

<web-view :src="url"></web-view>

url為需要跳轉的地址，可以用encodeURIComponent對url進行編碼,小程式用decodeURIComponent解碼，uaVaqAPJhDPrl裡面可以用?和&帶參,小程式可以直接在onLoad中option接收引數;

2.小程式頂部設定透明；

web-view嵌入的H5頁面不能設定透明，只能修改頁面頂部的顏色;

• a.所有頁面設定透明（在app.on裡面的window增加navigationStyle:custom,頂部導航欄就會消失,只保留右上角膠囊狀的按鈕）;
• b.單獨頁面設定透明（在每個單獨的json裡面增加navigationStyle:custom）；

3.小程式跳轉到H5頁面

注意：使用redirectTo跳轉到H5頁面之後，所有嵌入的H5頁面沒有返回按鈕，左側只有一個返回首頁按鈕

4.H5跳轉到小程式頁面

需要引入<script type="text/" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>才能用引數

wx.miniProgram.switchTab({ url:url}); //跳轉到小程式tabbar頁，不能傳參

wx.miniProgram.navigateTo({ url:url,query:{//填寫引數}});//跳轉到小程式非tabbar頁，可以傳參

其他的跳轉參考下圖

5.H5使用bindmessage向小程式傳參

tips：使用bindmessage時只有使用者點選了小程式的後退、分享按鈕或者是小程式嵌入的H5頁面銷燬才能觸發引數的傳遞，否則是不會觸發。

6.www.cppcns.comH5使用其他小程式的介面，可以參考API，因為我自己沒有涉及到，所以給個連結給大家參考

參考連結：developers.weixin.qq.com/miniprogram…

總結

到此這篇關於微信小程式webView嵌入H5的文章就介紹到這了,更多相關微信小程式webView嵌入H5內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！