最近准备转到uniapp上,所以比较关注他的支付功能,今天花了一个下午的时间写了个demo,坑还比较多的,差点放弃了,好在最后一一解决了...记录下以防下次用的时候忘记了

第一步做个按钮:

<button type="default" @click="getCode">支付</button>

第一步要获得用户的code,用code换取openid,

uni.login({
                    provider: 'weixin',
                    success(code) {
                        console.log('code:',code.code)
                    }
      })

第二步用code 换取 openid ,这个实现起来比较复杂,好在官方给我们封装好了,我们建立一个云函数取名 getOpenid,内容如下

'use strict';const uniID = require('uni-id')
exports.main = async function(event,context) {  const res = await uniID.code2SessionWeixin({    code: event.code
  })  return res
}

注意这个云函数里用了官方uni-id插件,我们需要安装下这个插件,插件地址不让放,自己去插件市场搜索安装吧

这里要特别说明下

1:导入后 需要配置 common/uni-id/config.json里的mp-weixin项目中的appid和appSecret,然后右键上传部署

2: 然后到 getOpenid函数上,右键,使用命令行窗口打开目录 执行 npm install ../common/uni-id 这样他们就有了依赖关

我本人在这里绕了很长时间,官方也没有说明,这里很坑,我是去翻阅源码,看见源码里有提示才知道的...

第三步:在本地调用云函数获取openid

uniCloud.callFunction({                            name: 'getOpenid',                            data: {                                code: code.code
                            }
                        }).then(openid => {                            console.log('openid:', openid.result.openid)
})

第四步:有了openid就可以准备统一下单了,继续建立云函数getOrderInfo

 'use strict';    const unipay = require('unipay')    const unipayIns = unipay.initWeixin({            appId: '1111',//小程序appid
            mchId: '2222',//微信商户号
            key: '333333', //商户号的API密钥
            //pfx: fs.readFileSync('/path/to/your/pfxfile'), // p12文件路径，使用微信退款时需要，需要注意的是阿里云目前不支持以相对路径读取文件，请使用绝对路径的形式
        })
    exports.main = async (event, context) => {        //event为客户端上传的参数
        let orderInfo = await unipayIns.getOrderInfo({            openid: event.openid, //这个是客户端上传的用户的openid
            subject: '订单标题', // 微信支付时不可填写此项
            body: '商品描述',            outTradeNo: '12567fgfghxtdfgdgdgdgdgx',            totalFee: 1, // 金额，单位分
            notifyUrl: 'https://xxx.xx' // 支付结果通知地址
        })        return {
            orderInfo
        }

    };

这里用到了官方封装的unipay插件,老规矩在插件市场安装后,在commom下多了个unipay目录,

回到 getOrderInfo云函数,右键,使用命令行窗口打开目录 执行 npm install ../common/unipay 这样他们就有了依赖关

做到这里他们就可以正常调起收银台了,如果不能正常的,请注意是否上传了云函数

这里我把客户端的代码上传,由于是测试的就直接嵌套了,勿喷!

<template>
    <view>
        <button type="default" @click="getCode">支付</button>
    </view></template><script>
    export default {
        data() {            return {

            }
        },        methods: {
            getCode() {                // 获取支付的信息

                // uni.getProvider({
                //     service: 'payment',
                //     success: function (res) {
                //         console.log(res)
                //         if (~res.provider.indexOf('wxpay')) {
                //             uni.login({
                //                 provider: 'wxpay',
                //                 success: function (loginRes) {
                //                     console.log(JSON.stringify(loginRes));
                //                 }
                //             });
                //         }
                //     }
                // });


                //this.wxPay()

                //1:获得code
                uni.login({                    provider: 'weixin',
                    success(code) {                        console.log('code:', code.code)                        //2:获得openid
                        uniCloud.callFunction({                            name: 'getOpenid',                            data: {                                code: code.code
                            }
                        }).then(openid => {                            console.log('openid:', openid.result.openid)                            //3:統一下單
                            uniCloud.callFunction({                                name: 'getOrderInfo',                                data: {                                    openid: openid.result.openid
                                }
                            }).then(order => {                                console.log('OrderInfo:', order)


                                uni.requestPayment({                                    
                                    // #ifdef MP-WEIXIN
                                    ...order.result.orderInfo,                                    // #endif                                    
                                    success() {},
                                    fail() {}
                                })


                            })

                        })


                    },
                    fail(err) {
                        reject(new Error('微信登录失败'))
                    }
                })



            },
            wxPay() {
                uni.requestPayment({                    provider: 'wxpay',                    timeStamp: String(Date.now()), //时间戳
                    nonceStr: 'A1B2C3D4E5', //随机字符串，长度为32个字符以下。
                    package: 'prepay_id=wx20180101abcdefg', //统一下单接口返回的 prepay_id 参数值，提交格式如：prepay_id=xx
                    signType: 'MD5', //签名算法，暂支持 MD5
                    paySign: '',                    success: function(res) {                        console.log('success:' + JSON.stringify(res));
                    },                    fail: function(err) {                        console.log('fail:' + JSON.stringify(err));
                    }
                });
            }


        }
    }</script><style></style>