微信小程序嵌入H5頁(yè)面(web-view)的方法詳解

更新時(shí)間：2022年09月01日 09:01:38 作者：三個(gè)木馬人

使用<web-view>標(biāo)簽?zāi)茉谛〕绦蛑写蜷_(kāi)外部網(wǎng)頁(yè),但是要打開(kāi)的網(wǎng)頁(yè)的域名必須跟小程序的業(yè)務(wù)域名(業(yè)務(wù)域名可以在小程序的后臺(tái)管理界面添加)一致,否則在真機(jī)上是打不開(kāi)的,下面這篇文章主要給大家介紹了關(guān)于微信小程序嵌入H5頁(yè)面(web-view)的相關(guān)資料,需要的朋友可以參考下

前言

在開(kāi)發(fā)微信小程序的時(shí)候，我們有時(shí)候會(huì)遇到將 H5 頁(yè)面嵌入到小程序頁(yè)面中的情況；微信小程序自帶的 web-view 組件相當(dāng)于 HTML

頁(yè)面中的 iframe ，方便我們?cè)谖⑿判〕绦蛑写蜷_(kāi)一個(gè) H5 頁(yè)面；

官網(wǎng)描述：

承載網(wǎng)頁(yè)的容器；會(huì)自動(dòng)鋪滿(mǎn)整個(gè)小程序頁(yè)面，個(gè)人類(lèi)型的小程序暫不支持使用；所以使用這個(gè)組件，必須是在企業(yè)號(hào)小程序里面；

使用：

1、配置業(yè)務(wù)域名

在微信小程序后臺(tái)，開(kāi)發(fā)-開(kāi)發(fā)管理-開(kāi)發(fā)設(shè)置-業(yè)務(wù)域名 這里添加需要嵌入到小程序里面 H5 頁(yè)面的合法域名（最多200個(gè)）；

2、使用組件

每個(gè)頁(yè)面只能有一個(gè) web-view組件，并且 web-view組件將默認(rèn)展示在最高層級(jí)；

<web-view src="xxxxxxxxxx"></web-view>

它的屬性如下：

1、原生小程序提供屬性

2、uni-app提供屬性

3、H5 跳轉(zhuǎn)回小程序

在內(nèi)嵌網(wǎng)頁(yè)中跳回小程序，需引入JS-SDK；這里以vue項(xiàng)目為例：

//安裝插件
npm i -S weixin-js-sdk 
//引入
import wx from 'weixin-js-sdk'

在需要返回小程序的H5頁(yè)面使用下面代碼：

wx.miniProgram.navigateTo({
  url: "/pages/index", //小程序地址
});

注意：

1、web-view 網(wǎng)頁(yè)與小程序之間不支持除 JSSDK 提供的接口之外的通信；

2、在 iOS 中，若存在JSSDK接口調(diào)用無(wú)響應(yīng)的情況，可在 web-view 的 src 后面加個(gè)#wechat_redirect解決；

3、避免在鏈接中帶有中文字符，在 iOS 中會(huì)有打開(kāi)白屏的問(wèn)題，建議加一下 encodeURIComponent；

4、小程序和H5之間傳參

小程序和H5之間互相跳轉(zhuǎn)，我們?nèi)绻枰獋鬟f參數(shù)的話可以通過(guò) url 路徑拼接的方式來(lái)傳遞參數(shù)；

url:'/page/index?id=1'

參數(shù)傳遞之后，下面是參數(shù)的獲?。?/p>

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];
   }
}