张帅良个人博客-文章详情

小程序使用web-view方式嵌套H5解决小程序支付问题

最后更新时间：2025-05-05 16:47:01

# 小程序使用web-view方式嵌套H5解决小程序支付问题
## 场景描述:
客户有个H5项目,现在想用这套程序部署到微信小程序使用, 之前的项目使用的H5支付和微信公众号支付,现在要求小程序的功能和之前的功能一样可以正常的支付
## 认识误区:
小程序环境和微信浏览器环境支付是不相同的,在小程序下只能使用小程序支付
## 两种环境下支付的相同点:
两种环境下都使用的是JSAPI支付, 参数是一样的
## 两种环境下支付的不同点:
最大的区别在于支付时所需的openID, 公众号支付使用公众号的openID, 小程序使用小程序的openID,所以在小程序中需要支付场景是跳入小程序支付,支付完成后跳转到H5, 目前微信官方还没有给到更好的解决方案
## 解决方案:
先看张图
![流程图](http://blog.zslyoo.top/editormd/7081320147efc253a24ba3ef2184c909.jpg "流程图")

核心代码：
![](http://blog.zslyoo.top/editormd/3d0518710c3722161b005ff0971c30c0.png)
```javascript
	var u = navigator.userAgent;
	if(u.indexOf("miniProgram") != -1){
		//在微信小程序
		// zeai.msg('在微信小程序..');
		// 小程序跳转方
		return wx.miniProgram.navigateTo({
					"url":"../wePay/wePay?payDataStr="+ JSON.stringify(rs.jsApiParameters),        
					// 指定跳转至小程序页面的路径
					success: function(res){
					zeai.msg('页面跳转成功的回调函数..');
					// 页面跳转成功的回调函数
					},
					fail:  function(err) {
					zeai.msg('页面跳转失败的回调函数..');  // 页面跳转失败的回调函数
					}
		});
	}
```
[参考链接](https://developers.weixin.qq.com/community/develop/article/doc/00044eb007c2c8dd1509a4e1656413 "参考链接")

小程序使用web-view方式嵌套H5解决小程序支付问题

留言条数·0