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

前言

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

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

官網(wǎng)描述：

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

使用：

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

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

2、使用組件

每個(gè)頁面只能有一個(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)頁中跳回小程序，需引入JS-SDK；這里以vue項(xiàng)目為例：

//安裝插件
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 后面加個(gè)#wechat_redirect解決；

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

4、小程序和H5之間傳參

小程序和H5之間互相跳轉(zhuǎn)，我們?nèi)绻枰獋鬟f參數(shù)的話可以通過 url 路徑拼接的方式來傳遞參數(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];
   }
}