开发uniapp微信支付模块详解(前端)

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