uniapp开发H5,在公众号中使用,不在公众号中使用也可以,只要在微信中访问就可以。

只需两步,直接上代码。点击支付按钮调用Payimmediately方法

//立即支付
	const Payimmediately =()=> {
        //后台接口获取支付数据
		globalProperties.$api.againPayOrder({
			orderHeaderInfoId: orderid.value,//	订单流水号		true
			
		}).then(async (response) => {
			if (response) {
				let payresult = await utils.onWeixinPay(response.data)
				//支付成功后逻辑处理,我的是重新查询订单详情。方法就不写了
                getorderInfo()
			} else {
				uni.showToast({ title: '支付接口调用失败', icon: 'none' })
			}
		}).catch(error => {
			uni.showToast({
				title: error || '支付失败!',
				icon: 'none',
				duration: 3000,
			})
		});
	}

utils.onWeixinPay是封装的支付方法。utils.js




let sendStartLocationFn = null
let sendLocationFn = null
const utils = {
	
	/**
	 * @description: 微信支付
	 * @param {any} payParams 后端返回的支付参数
	 * @return {*}
	 */ 
	onWeixinPay(payParams) {
	  console.log({
		appId: payParams.appIdd,
		timeStamp: payParams.timeStamp,
		nonceStr: payParams.nonceStr,
		package: "prepay_id="+payParams.prepayId,
		signType: payParams.signType,
		paySign: payParams.paySign
	  });

	  return new Promise((resolve, reject) => {
		function invokeWeixinPay() {
		  window.WeixinJSBridge.invoke(
			'getBrandWCPayRequest', {
			  appId: payParams.appIdd,
			  timeStamp: payParams.timeStamp,
			  nonceStr: payParams.nonceStr,
			  package: "prepay_id="+payParams.prepayId,
			  signType: payParams.signType,
			  paySign: payParams.paySign
			},
			function(res) {
			  if (res.err_msg === "get_brand_wcpay_request:ok") {
				uni.showToast({ title: '支付成功', icon: 'success' });
				// 跳转到订单详情页等
				resolve(true)
			  } else {
				uni.showToast({ title: '支付失败'+res.err_msg, icon: 'none' });
				resolve(false)
			  }
			}
		  );
		}
		if (!window.WeixinJSBridge) {
		  if (document.addEventListener) {
			document.addEventListener('WeixinJSBridgeReady', () => {
		  invokeWeixinPay()
			}, false);
		  } else if ((document).attachEvent) {
			(document).attachEvent('WeixinJSBridgeReady', () => {
		  invokeWeixinPay()
			});
			(document).attachEvent('onWeixinJSBridgeReady', () => {
		  invokeWeixinPay()
			});
		  }
		} else {

		  invokeWeixinPay()

		}
	  })

	}
}
export default utils

      根据后端接口反值只需替换以下参数就行

        appId: payParams.appIdd,
        timeStamp: payParams.timeStamp,
        nonceStr: payParams.nonceStr,
        package: "prepay_id="+payParams.prepayId,
        signType: payParams.signType,
        paySign: payParams.paySign

Logo

腾讯云面向开发者汇聚海量精品云计算使用和开发经验,营造开放的云计算技术生态圈。

更多推荐