我的uni-app学习之路(三)-支付相关流程

在app中发起支付使用了微信支付和支付宝支付,在小程序中因为微信平台的原因只接入微信支付.

1.在原生app中支付

大概流程为:在uni-app代码商品信息提交生成订单后拿到订单id,支付金额等信息后传给原生app,由安卓和iOS端各自进行支付,支付完成后将支付结果信息反馈出来。

uni-app里面的的处理

// #ifndef MP-WEIXIN 
						
 var u = navigator.userAgent;
 var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android安卓
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); 
//ios苹果
var payCode;
if (this.payType == 2) {
	payCode = 'ALIPAY';
} else {
	payCode = 'WECHAT';
}
//需要带入的订单参数
var a = {
orderId: this.orderPayData.id,
payType: payCode
}
 if (isAndroid) {
 window.android.toOrderData(JSON.stringify(a))
} else if (isiOS) {
window.webkit.messageHandlers.toOrderData.postMessage(a);
}
// #endif 

iOS端的支付处理

- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message{
   //用message.body获得JS传出的参数体
    NSDictionary * parameter = message.body;
    if([message.name isEqualToString:@"toOrderData"]){
      //支付请求 这里把parameter里的orderId和payType等信息配合接口去调用支付接口就ok了
        
        }
}

拿到支付结果以后通过js传给uni-app进行处理就可以了

//OC调用JS 比如支付成功状态
    [self.webView evaluateJavaScript:@"payResult(\"200\")" completionHandler:^(id _Nullable result, NSError * _Nullable error) {
            NSLog(@"%@", error);
        }];

uni-app中处理支付结果

	mounted() {
        // #ifdef H5
		window['payResult'] = val => {
			  this.payResult(val)
			}
			// #endif
		},

1.在微信小程序中支付

微信小程序支付需要配合微信的官方文件传入指定的参数，首先需要拿到微信平台的OpenId，这个参数一般是通过请求后台接口拿到，之后再发起支付

uni.requestPayment({
 provider	: 'wxpay', // 微信小程序支付
 timeStamp	:  r.data.timeStamp,
nonceStr	:  r.data.nonceStr,
package 	:  r.data.package,
signType	:  r.data.signType,
paySign	:  r.data.paySign,
appId     :  r.data.appId,
success: function(res) {
	console.log('小程序-支付成功');
	const route = `/pages/pay/paySuccess?payPrice=${_this.payPrice}&orderId=${_this.orderId}&type=2`;
uni.navigateTo({
	url : route
	})
	},
fail: function(err) {
	console.log('小程序支付已取消');
}
});