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应用下载到手机上（暂定安卓机）进行微信支付操作，很可能是成功操作哦！,解决方案可以看这位老哥的https://blog.csdn.net/u011415782/article/details/91817308