微信小程序嵌入H5頁面(web-view)的方法詳解
前言
在開發(fā)微信小程序的時候,我們有時候會遇到將 H5 頁面嵌入到小程序頁面中的情況;微信小程序自帶的 web-view
組件相當(dāng)于 HTML
頁面中的 iframe ,方便我們在微信小程序中打開一個 H5 頁面;
官網(wǎng)描述:
承載網(wǎng)頁的容器;會自動鋪滿整個小程序頁面,個人類型的小程序暫不支持使用;所以使用這個組件,必須是在企業(yè)號小程序里面;
使用:
1、配置業(yè)務(wù)域名
在微信小程序后臺,開發(fā)-開發(fā)管理-開發(fā)設(shè)置-業(yè)務(wù)域名 這里添加需要嵌入到小程序里面 H5 頁面的合法域名(最多200個);
2、使用組件
每個頁面只能有一個 web-view
組件,并且 web-view
組件將默認(rèn)展示在最高層級;
<web-view src="xxxxxxxxxx"></web-view>
它的屬性如下:
1、原生小程序提供屬性
2、uni-app提供屬性
3、H5 跳轉(zhuǎn)回小程序
在內(nèi)嵌網(wǎng)頁中跳回小程序,需引入JS-SDK;這里以vue項目為例:
//安裝插件 npm i -S weixin-js-sdk //引入 import wx from 'weixin-js-sdk'
在需要返回小程序的H5頁面使用下面代碼:
wx.miniProgram.navigateTo({ url: "/pages/index", //小程序地址 });
注意:
1、web-view 網(wǎng)頁與小程序之間不支持除 JSSDK 提供的接口之外的通信;
2、在 iOS 中,若存在JSSDK接口調(diào)用無響應(yīng)的情況,可在 web-view 的 src 后面加個#wechat_redirect解決;
3、避免在鏈接中帶有中文字符,在 iOS 中會有打開白屏的問題,建議加一下 encodeURIComponent;
4、小程序和H5之間傳參
小程序和H5之間互相跳轉(zhuǎn),我們?nèi)绻枰獋鬟f參數(shù)的話可以通過 url 路徑拼接的方式來傳遞參數(shù);
url:'/page/index?id=1'
參數(shù)傳遞之后,下面是參數(shù)的獲取:
1、微信小程序
onLoad:function(options){ console.log(options) }
2、H5
mounted(){ let name = this.getQueryString('name') console.log(name ) }, methods:{ //解析url獲取指定參數(shù)的值 getQueryString(name) { const reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i'); const search = window.location.search.split('?')[1] || ''; const r = search.match(reg) || []; return r[2]; } }
總結(jié)
到此這篇關(guān)于微信小程序嵌入H5頁面(web-view)的文章就介紹到這了,更多相關(guān)微信小程序嵌入H5頁面內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
學(xué)習(xí)javascript文件加載優(yōu)化
這篇文章主要為大家詳細(xì)介紹了javascript文件加載優(yōu)化,三種方式實現(xiàn)js文件加載優(yōu)化,感興趣的小伙伴們可以參考一下2016-02-02JS?new操作原理及手寫函數(shù)模擬實現(xiàn)示例
這篇文章主要為大家介紹了JS?new操作原理及手寫函數(shù)模擬實現(xiàn)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-07-07