微信小程序webView嵌入H5的方法實例

Posted on by

前言

微信小程序提供瞭新的開放能力！它終於開放瞭在小程序中內嵌HTML頁面的功能！從微信小程序基礎庫1.6.4開始，我們就可以在小程序內放置一個<web-view>組件來鏈接我們的HTML頁面瞭。在這之前，我們在小程序中沒有辦法整合我們已有的HTML程序（比如HTML5文章系統，商城系統等），隻能使用小程序的方式重新開發一套，現在有瞭<web-view>就可以方便的集成這些網頁系統，為我們減少瞭可觀的工作量。

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

方法如下

1.直接引入頁面地址；

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

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

2.小程序頂部設置透明；

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

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

3.小程序跳轉到H5頁面

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

4.H5跳轉到小程序頁面

需要引入<script type="text/javascript" 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.H5使用其他小程序的接口，可以參考API，因為我自己沒有涉及到，所以給個鏈接給大傢參考

參考鏈接：developers.weixin.qq.com/miniprogram…

總結

到此這篇關於微信小程序webView嵌入H5的文章就介紹到這瞭,更多相關微信小程序webView嵌入H5內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：