微信小程序web-view与H5之间交互（含支付）

第一章 了解web-view与H5的交互（含支付）

前言

uniapp开发小程序的过程中主、分包有大小限制，随着业务的增加，使用web-view加载H5的方式，往往纯加载并不能满足业务需求，这个时候就得了解小程序与H5的交互。

提示：以下是本篇文章正文内容，下面案例可供参考

一、web-view是什么？

web-view 是微信小程序内置的浏览器组件，用来加载网络html。

二、使用步骤

<template>
	<web-view src="https://www.xxx.com"></web-view>
</template>
1
2
3

注意：

• 小程序web-view会自动铺满全屏，不支持修改组件宽高。
• 小程序加载路径仅支持网络网页，不支持本地的html页面。

三、业务场景

1.小程序带参数跳转链接，H5应用获取参数

<!-- 小程序参数拼接在地址上-->
<!-- 小程序-->
<template>
	<web-view src="https://www.xxx.com?id=1&from=xcx"></web-view>
</template>
1
2
3
4
5

解决：小程序地址路径?传参 — H5onLoad函数接收

// H5
// H5获取拼接的url参数
<script>
export default {
	onLoad(option){
		console.log(option) // {id: 1, from: 'xcx'}
	}
};
</script>

<script>
console.log(window.location.search) // ?id=1&from=xcx
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13

2.H5应用涉及跳转小程序功能，小程序嵌套后功能失效 （原网页环境是微信浏览器，嵌入后为小程序内置环境，api方法不兼容）

解决：H5触发事件并发送内容 — web-view @message事件监听处理

<!-- message事件监听H5触发的消息-->
<!-- 小程序-->
<template>
	<web-view src="https://www.xxx.html" @message="onMessage"></web-view>
</template>
<script>
export default {
	data() {
		return {};
	},
	methods: {
		onMessage(event) {
			console.log('接收到消息：' + JSON.stringify(event.detail.data));
			// 跳转小程序方法
			uni.navigateToMiniProgram({
				appId: data.appId,
				path: data.path,
				extraData: data.extraData
			});
		}
	}
};
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

// H5
// H5触发事件并发送内容
document.addEventListener('click', function() {
	uni.postMessage({
		data: {
			appId: '',
			path: '',
			extraData: ''
		}
	});
})
1
2
3
4
5
6
7
8
9
10
11

3.H5应用涉及微信JSAPI支付，小程序嵌套后功能失效

重点：这里把支付的参数传给到小程序，通过小程序去完成支付，支付完成or失败后跳回原有h5页面

注：（需后端配合增加小程序支付接口，H5通过携带支付参数跳转小程序页面，小程序内接收参数进行支付，并且小程序里支付api可以知道支付状态，那么就能完成整个支付业务）

解决：H5调用支付下单接口 — 携带参数跳转到小程序里去完成支付 — 支付后携带参数回跳H5 — H5接收参数判断支付是否成功

<!-- 小程序-->
<template>
	<web-view :src="url"></web-view>
</template>
<script>
export default {
	data() {
		return {
			url: ''
		};
	},
	onLoad(option){
		//有支付订单进行支付
		if (option.idNo) {
			const item = JSON.parse(decodeURIComponent(option.data));
			this.requestPayment(item);
		}
	},
	methods: {
		requestPayment(item) {
			console.log(item);
			uni.requestPayment({
				provider: 'wxpay',
				signType: item.signType || 'MD5',
				timeStamp: item.timeStamp,
				nonceStr: item.nonceStr,
				package: item.package,
				paySign: item.paySign,
				success: res => {
					// 回跳地址携带支付状态参数，便于H5判断
					// 支付成功
					this.url += '&payStatus=success';
				},
				fail: err => {
					// 支付失败
					this.url += '&payStatus=fail';
				}
			});
		}
	}
};
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

// H5
<script>
onLoad(option){
	if (option.payStatus == ‘success’) {
		// 支付成功
		........
	}else {
		// 支付失败
		........
	}
},
methods: {
	// H5通过jssdk携带支付参数跳转小程序页面
	let path = `/pages/webview_pay/webview_pay`;（注意需和小程序内跳转链接页面路径一致）
	........
	// 接口返回的支付参数
	let navigateToData = {
		timeStamp: response.data.result.timeStamp,
		nonceStr: response.data.result.nonceStr,
		package: response.data.result.package,
		paySign: response.data.result.sign
	};
	let uri = window.location.href.split('#')[0]; //获取当前url;
	path += `?idNo=${response.data.result.orderNo}&data=${encodeURIComponent(JSON.stringify(navigateToData))}&uri=${uri}`;

	//通过JSSDK的api使小程序跳转到指定的小程序页面
	jweixin.miniProgram.getEnv(function(res) {
		if (res.miniprogram) {
			jweixin.miniProgram.redirectTo({
				url: path
			});
		} else {
			uni.showToast({
				title: 'error',
				icon: 'none'
			});
		}
	});
}

</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

总结

本文简单介绍了小程序web-view与H5的一些交互，若有其他更好的交互方式，欢迎评论区补充。

未完待续...