uni-app实现微信公众号h5调起微信支付

准备:

微信商户平台设置JSAPI授权目录,设置位置如下:

uni-app实现微信公众号h5调起微信支付_第1张图片

index.html引入js文件:
<!-- 微信支付api -->
<script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
吊起支付:
// 微信支付
const wechatPay = () => {
	loading.value = true;
	homeApi.wxpay({
		goodsId: '订单id'
	}).then(res => {
		let data = res.data.params;
		if (res.code == 0) {
			WeixinJSBridge.invoke(
				'getBrandWCPayRequest', {
				appId: data.appId, // 公众号id
				timeStamp: data.timeStamp,
				nonceStr: data.nonceStr,
				package: data.package,
				signType: data.signType,
				paySign: data.paySign,
			}, function (response: any) {
				console.log(response.errMsg)
				if (response.err_msg == "get_brand_wcpay_request:ok") {
					uni.showToast({
						title: '微信支付成功',
						icon: 'none'
					})
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/bill/details/allbill',
						});
					}, 1500);
				} else if (response.err_msg == "get_brand_wcpay_request:cancel") {
					uni.showToast({
						title: '取消支付',
						icon: 'none'
					})
				} else {
					uni.showToast({
						title: '支付失败',
						icon: 'none'
					})
				}
			});
		}
		loading.value = false;
	}).catch((error: any) => {
		console.log(error)
		loading.value = false;
	})
}

你可能感兴趣的:(Uni-app,uni-app,微信,javascript)