【微信小程序支付功能】uniapp实现微信小程序支付功能

场景:要实现公司微信小程序的电商模块微信支付功能

一.实现步骤和思路

  1. 在登录状态,登录的时候获取到code,利用code获取到openid:https://blog.csdn.net/weixin_45308405/article/details/128868377?spm=1001.2014.3001.5501

  1. 在manifest.json文件“App模块配置”项的“Payment(支付)”下,勾选“微信支付”项

  1. 到对应界面获取到订单编号利用订单编号调用后台接口返回支付的数据

  1. 调用uniapp小程序支付API实现登录

二.实现

  1. 在manifest.json文件下设置好Payment(支付)

  1. 调用后台接口返回支付的数据

const res = await RequesApi.OrderApi(isCart.value == '2' ? cartOrderData : orderData)
    if (res.data.Code == '0') {
        const res_a = await RequesApi.AppPayApi({
            "DoType": "8", //1支付操作
            "OrderNO": res.data.Data[0], //订单编号
            'OpenId': uni.getStorageSync('openid')//登录时获取openid
        })
}
  1. 调用uniapp提供的微信支付的API

文档地址:uniapp微信支付

扫描二维码关注公众号,回复: 15723921 查看本文章
uni.requestPayment({
            provider: 'wxpay',
            orderInfo: '',
            // appId: appId,//小程序的appid
            timeStamp: res_a.data.Data[0].TimeStamp,//时间戳,要字符串类型的
            nonceStr: res_a.data.Data[0].NonceStr,//随机字符串,长度为32个字符以下。
            package: res_a.data.Data[0].Package,//prepay_id 参数值,提交格式如:prepay_id=xx
            signType: res_a.data.Data[0].SignType, //MD5类型
            paySign: res_a.data.Data[0].PaySign,//签名
            success: function (res) {
                //支付成功的回调    成功之后你想做什么在这里操作  比如弹窗一个提示:支付成功等
                uni.showToast({
                    title: '支付成功!',
                    icon: 'success'
                })
            },
            fail: function (err) {
                //支付失败的回调   失败之后你想做什么在这里操作  比如弹窗一个提示:支付失败等
                console.log(err);

            }
        });

猜你喜欢

转载自blog.csdn.net/weixin_45308405/article/details/128914077