用uniapp做微信小程序，内用web-view嵌套uniapp做的h5,实现支付功能

八九十枝花。

于 2024-09-11 17:19:17 发布

阅读量188

点赞数 4

文章标签： uni-app 微信小程序前端

本文链接：https://blog.csdn.net/qq_44766357/article/details/139863471

版权

实现思路：

1.在微信小程序里用web-view的src属性里放个h5链接（需要配置微信小程序的业务域名）
2.在h5项目里点击支付按钮，调用接口，获取支付接口需要的参数，然后跳出h5,在微信小程序里实现微信支付，

具体实现：

1.uniapp小程序里的，webview页面
在这里插入图片描述
2.在h5项目中，

在这里插入图片描述

下载引入wx-js-sdk-1.4.0

npm i wx-js-sdk-1.4.0

检查h5是不是嵌套在小程序里

wx.miniProgram.getEnv((res) => {
	if (res.miniprogram) {
		console.log("在小程序里")
		this.iswechat_pay = true
	} else {
		console.log("不在小程序里")
	}
})

如果是嵌套在微信小程序里，点击“确认付款”按钮，带着支付的一些参数跳回到微信小程序的支付页面


if (this.iswechat_pay) {
	let data = JSON.parse(result.pay_param)
	var pay_param = {
		order_id: result.order_id,
		timeStamp: data.timeStamp,
		nonceStr: data.nonceStr,
		package: data.package,
		signType: data.signType,
		paySign: data.paySign,
		price: this.price
	}
	console.log("pay_param", pay_param)
	wx.miniProgram.navigateTo({
		url: "/pages/webPay/webPay?pay_param=" + encodeURIComponent(JSON.stringify(pay_param))
	})
} else {
	console.log(222);
	window.location.href = result.pay_url
}

3.在支付页面接收参数，/pages/webPay/webPay

onLoad(options) {
	this.pay_param = JSON.parse(decodeURIComponent(options.pay_param))
	this.price = this.pay_param.price
},
methods:{
	//确认支付
	confirmPay() {
		let params = {
			provider: "wxpay",
			timeStamp:this.pay_param.timeStamp,
			nonceStr:this.pay_param.nonceStr,
			package:this.pay_param.package,
			signType:this.pay_param.signType,
			paySign:this.pay_param.paySign
		}
		uni.requestPayment({
			...params,
			success(res) {
				console.log('支付成功处理',res)
				uni.showToast({
					title:"支付成功"
				})
				setTimeout(()=>{
					//支付成功后返回到内嵌的h5页面
					uni.navigateBack()
				},1500)
			},
			fail(err) {
				uni.showToast({
					title:"支付失败",
					icon:"none"
				})
				console.log('支付失败处理',err)
			}
		})

	}
}