记一次使用支付宝H5支付

这次呢主要是由于部分原因，在小程序中并没有直接使用相关的api支付方式，使用了H5的支付方式，这也是我第一次使用JSAPI来进行支付的相关调用，具体的业务流程是:

判断相关运行环境:

const userAgent = navigator?.userAgent.toLowerCase();
if (userAgent.includes('alipayclient') || userAgent.includes('alipay')) {
	console.log("当前为支付宝客户端");
}
//通过这种方式，来判断当前的运行环境，非支付宝环境就不去运行权限函数

接下来需要进行权限获取

接下来的思路是：通过后端来获取我们的url地址以及权限code，后端会给我们一个接口，会返回给我们一个url链接地址以及其携带的code，此时，我们需要跳转到携带code的链接地址中，来获取code以及进入支付宝的相关支付环境，所以这里就涉及到了

 1、获取携带code的链接地址，并跳转

 2、拿到我们的code、并且要进入当前url中(支付宝相关支付环境)

 3、请求登录权限，保存token授权成功

 4、需要拉取支付

在这里的具体思路是这个样子

接下来就是:

const valAuthInfo = async (code:string,mid:number) => {
    if (code) {
		//请求获取授权当前身份
		const res : any = await getAuthInfo({
			code_id: 0,
			mid: mid,
			auth_client: 4,
			code: code, //code码
	    })
	    if (res.code === 0) {
		    authSuccess(res)
	    }
    }
    if (!code) {
		const res : any = await getAuthUrl({
			code_id: 0,
			mid: mid,
			auth_client: 4,
			url: window.location.href
		})
		if (res.code === 0) {
			location.href = (res.data.auth_url)
		}
	}
}

然后authSuccess是保存用户状态的函数以及手机号绑定：

const authSuccess = (res : any) => {
		uni.setStorageSync('openid', res.data.openid);
		uni.setStorageSync('unionid', res.data.unionid);
		if (res.data.is_bind == 1) {
			uni.setStorageSync('token', res.data.token);
			uni.showToast({
				title: '登录成功~',
				icon: 'none'
			});
		}
		if (res.data.is_bind == 0) {
			uni.showToast({
				title: '还未绑定手机号~',
				icon: 'none'
			});
			uni.navigateTo({
				url: "/pages/bindPhone/index"
			})
		}
	}

加下来权限部分就处理完成，然后处理支付部分

首先需要进行预支付:

const res : any = await creatOrder({
			cart_id: idList.value,
			merchant_id: merchant_id.value,
			user_coupon_id: coupon_id.value,
			desk_id: desk_id.value,
			pay_type: pay_client.value,
			pay_client: info,
			openid: uni.getStorageSync('openid')
		})
		if (res.code === 0) {
			requestPayment(res.data)
		}

然后进行支付拉取:

const requestPayment = (info : any) => {

if (state.pay_client == "4") {
			function ready(callback : any) {
				Toast.success(callback)
				if (window.AlipayJSBridge) {
					callback && callback();
				} else {
					document.addEventListener('AlipayJSBridgeReady', callback, false);
				}
			}
			ready(function () {
				AlipayJSBridge.call("tradePay", {
					tradeNO: info.pay_url
				}, function (result : any) {
					Toast.success(result)
					if (result.resultCode == 9000) {
						Toast.success('支付成功')
					} else {
						Toast.error(result)
					}
				});
			});

}

这里的info是预下单的单号至此，支付宝支付就已经完成了