使用dcloud全家桶开发公众号H5系统

实现公众号的H5微信支付

小韦云科技-区块链+小程序+公众号+商城+分销+直播+企业官网+外贸电商-为您提供优质的开发服务-电话/微信联系:18123611282

微信支付商户配置

首先在之前的章节:公众号参数配置到uni-config-center 里一定要配置好支付的参数

    "mchId": "微信支付商户ID",
    "mchKey": "微信支付API密钥",
    "notify_url": "微信支付回调地址"

如果之前没配置,这次配置好后要重新上传uni-config-center

生成微信支付回调地址

由于使用云函数的原因,回调地址就需要让云函数支持URL访问。

进入uniCloud的web后台,点击 函数列表--云函数域名绑定

点击启用域名,就会自动生成一个域名

然后云函数点bctos-weixin的详情按钮进入详情界面,因为我们的支付回调写在这个云函数里

在详情页面最下面点编辑

请求路径必须以 /http开头,而且不能以 / 结尾,这里我填写:/http/notice

保存后,点右边的复制路径即可得到上面notify_url参数需要填写的微信支付回调地址,如我的是这样的

https://4d82a040-4004-4008-8e38-83351e4f7e03.bspapp.com/http/notice

然后在云函数的回调里只需要把订单由未支付状态修改成已支付状态即可。

前端实现微信支付

下面是封装好的支付方法,先通过后端云函数生成统一下单,并返回前端需要的支付参数,最后调起支付操作。

完整的代码请在官方插件市场下载:https://ext.dcloud.net.cn/plugin?id=4829

async weixinPay(money, out_trade_no, ip) {
                let openid = await this.getOpenid()
                if (!openid) {
                    this.error('openid获取失败')
                    return false
                }
                this.showLoading()
                let data = {
                    openid,
                    ip,
                    out_trade_no,
                    money,
                    action: "payment"
                }

                console.log('微信支付前端参数', data)
                let e = await uniCloud.callFunction({
                    name: 'bctos-weixin',
                    data: data
                })
                if (e.result.code != 0) {
                    this.error(e.result.msg)
                    return false
                }

                let payment = e.result.data;
                let param = {
                    "appId": payment.appId, //公众号名称,由商户传入
                    "timeStamp": payment.timeStamp, //时间戳,自1970年以来的秒数
                    "nonceStr": payment.nonceStr, //随机串
                    "package": payment.package,
                    "signType": payment.signType, //微信签名方式:
                    "paySign": payment.paySign //微信签名
                }
                console.log('微信支付前端得到的结果', param);

                WeixinJSBridge.invoke('getBrandWCPayRequest', param)

                const db = uniCloud.database()

                //由于最新的微信支付推出了点金计划,导致支付成功后不再回调,因此需要主动查询支付状态
                let time = setInterval(() => {
                    db.collection('bctos-order').where({
                        out_trade_no
                    }).get().then((res) => {
                        console.log('bctos-order', res.result.data[0].is_pay)
                        // res 为数据库查询结果
                        if (res.result.data[0].is_pay == 1) {
                            uni.hideLoading()
                            clearInterval(time)
                            this.success('支付成功', () => {
                                uni.redirectTo({
                                    url: "/pages/index/index"
                                })
                            })
                        }
                    })
                }, 1000)
            },

最终效果

至此开发全部完成。

本文由小韦云原创,转载请注明出处:https://bctos.cn/doc/18/1968,否则追究其法律责任

关键词:微信支付 公众号H5支付

广告位招商