1.准备好微信开放平台申请应用的appid并填入manifest.json中app SDK配置中
2.在app 模块权限配置里勾选Payment
3.获取多个支付的服务商(这一步因为我公司的只用微信支付就没去获取了),可以参照官方示例Demo hello项目;里面的获取服务商代码如下: (单个微信支付的可以跳过这个)
在onload里使用getgetProviderr接口去获取,然后把值储存进自定义的数组,通过点击后判断是那个服务商
<template v-if="providerList.length > 0">
<button v-for="(item,index) in providerList" :key="index" @click="requestPayment(item,index)">{{item.name}}支付</button>
</template>
data() {
return {
providerList: []
}
},
onLoad: function() {
// #ifdef APP-PLUS
uni.getProvider({
service: "payment",
success: (e) => {
console.log("payment success:" + JSON.stringify(e));
let providerList = [];
e.provider.map((value) => {
switch (value) {
case 'alipay':
providerList.push({
name: '支付宝',
id: value,
loading: false
});
break;
case 'wxpay':
providerList.push({
name: '微信',
id: value,
loading: false
});
break;
default:
break;
}
})
this.providerList = providerList;
},
fail: (e) => {
console.log("获取支付通道失败:", e);
}
});
// #endif
},
4.获取订单数据(这是从官方demo的获取得的原始数据);记住服务端给你获取的字段名必须要小写,不能
使用驼峰.;
{
"data": {
"appid": "wx0411fa6a39d61297",
"noncestr": "mzgmuAGjcKgKeO4W",
"package": "Sign=WXPay",
"partnerid": "1230636401",
"prepayid": "wx06114357636379c131cf65541407669700",
"timestamp": 1583466237,
"sign": "2820515803D395ED2FF66A07B6560DBA"
},
"statusCode": 200,
"header": {
"Transfer-Encoding": "chunked",
"Server": "Tengine",
"Access-Control-Allow-Origin": "*",
"Connection": "keep-alive",
"X-Android-Received-Millis": "1583466237162",
"EagleId": "0e1d28a515834662374177089e",
"Date": "Fri, 06 Mar 2020 03:43:57 GMT",
"Via": "cache26.l2st4-5[250,0], cache17.cn1366[256,0]",
"X-Android-Selected-Protocol": "http/1.1",
"Timing-Allow-Origin": "*",
"X-Android-Response-Source": "NETWORK 200",
"Vary": "[Accept-Encoding, Accept-Encoding]",
"X-Android-Sent-Millis": "1583466236803",
"_": "HTTP/1.1 200 OK",
"Content-Type": "text/plain;charset=UTF-8"
},
"errMsg": "request:ok"
}
5.调用requestPayment接口
requestPayment(e, index) {
uni.requestPayment({
provider:"wxpay",//这个值因为是微信支付;如果有更多的支付服务的话请看第3步里获取的那个数组里的值;详细的可以看下官方文档里
orderInfo: orderInfo, //这个值是第四步服务端返回给你的订单数据,自己可以组装成一个对象赋值过来
success: (e) => {
console.log("success", e);
uni.showToast({
title: "感谢您的赞助!"
})
},
fail: (e) => {
console.log("fail", e);
uni.showModal({
content: "支付失败,原因为: " + e.errMsg,
showCancel: false
})
},
})
},
6.走到这里基本就走完了,可能会出现这个问题
UniAPP 进行微信支付时报错: {“errMsg”:“requestPayment:fail:[payment微信:-1]General errors”}这个问题的话
通过网上各种经验参考如果你遇到了这种情况,建议首先将打包成功的APP应用下载到手机上(暂定安卓机)进行微信支付操作,很可能是成功操作哦!,解决方案可以看这位老哥的