uniapp之微信小程序 支付

  一、注册微信支付商户号(由上级或法人注册)

    注册链接:https://pay.weixin.qq.com/index.php/apply/applyment_home/guide_normal#none,如图

    

    

      注意:需要由主管及更上级领导进行注册,成为公司收款账户 (企业注册需要材料:营业执照、对公银行账户信息,法人身份证

  二、注册小程序账号(由上及或者领导注册)

    企业一般注册为企业小程序,非个人。地址链接:https://mp.weixin.qq.com/wxopen/waregister?action=step1

  三、登录商户号绑定小程序

    当小程序ID绑定至此商户,就可以调用此商户支付的相关接口,地址链接:https://pay.weixin.qq.com/index.php/core/home/login

  四、后端写接口

    根据前端传入数据,返回微信支付核心数据

    

  五、前端调用接口

    ① 获取openid(当前用户真实id)

      openid为当前用户真实id,无法直接用任何接口获得,需要先调用微信login接口登录,获取登录凭证code,再通过此code(登录凭证,5分钟有效),向微信服务器换取用户openid。

      uniapp官方文档地址链接:https://uniapp.dcloud.net.cn/api/plugins/login.html#login

1
2
3
4
5
6
7
8
9
10
uni.login({
  provider: 'weixin',
  success (res) {
    if (res.code) {
     //code: 用户登录凭证(有效期五分钟)使用 code 可以换取 openid、unionid、session_key 等核心信息
    } else {
      console.log('登录失败!' + res.errMsg)
    }
  }
})

      发送请求调用微信官方接口,用code凭证换取用户openid(真实用户id)

1
2
3
4
5
6
7
8
9
10
11
12
13
uni.request({
  url: `https://api.weixin.qq.com/sns/jscode2session`, //微信官方接口
  data: {
    appid: '小程序appId',
    secret: '小程序密钥,在小程序appId下一行,放一块在',
    js_code: '刚才获取的code',
    grant_type: 'authorization_code' //固定值
  },
  success: (res) => {
    //获取openid:用户真实唯一id
    console.log(res.data.openid);
  }
})

    ② 调用公司后端接口,获取支付核心数据

1
2
3
4
5
6
7
8
9
// 调用接口
uni.request({
  url: '调用你们公司的后端接口地址,获取支付核心数据',
  method: 'POST',
  data: { 接口需要什么参数就传给接口,包含扣款金额,订单id等 },
  success(obj) {
    console.log(obj)
  }
})

    该接口必须返回以下6个核心数据,都是由后台计算生成。

      "appId": "xxxx",

           "nonceStr": "xxxx",

           "packageValue": "prepay_id=xxxxx",

             "paySign": "xxxxxx",

             "signType": "MD5",

                     "timeStamp": "xxxxxx"

    ③ 调用微信官方支付接口,弹出支付界面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
uni.request({
  url: '调用后端接口地址,获取支付核心数据',
  method: 'POST',
  data: { 接口需要什么参数就传给接口,包含扣款金额,订单id等 },
  success(obj) {
 
    //调用微信官方支付接口弹出付款界面,输入密码扣款
    wx.requestPayment({
      timeStamp: obj.xxxx.timeStamp,  //后端返回的时间戳
      nonceStr:  obj.xxxx.nonceStr,   //后端返回的随机字符串
      package:  obj.xxxx.packageValue, //后端返回的prepay_id
      signType: 'MD5', //后端签名算法,根据后端来,后端MD5这里即为MD5
      paySign:  obj.xxxx.paySign,  //后端返回的签名
      success (res) {
        console.log('用户支付扣款成功', res)
      },
      fail (res) {
        console.log('用户支付扣款失败', res)
      }
     })
 
  }
})

      调用后,弹出付款界面,模拟器需要扫码支付。

      点击真机调试会直接弹出微信付款界面。

  六、项目中的微信支付

    一般情况下,支付界面都是在用户登录后,但是在我们开发微信小程序的支付功能时,到支付的时候用户已经登录该小程序,所以我们不需要从uni.login去获取code,再拿code获取openid,这个时候后端在登录的时候已经可以保存用户的登录信息,前端只需要调用后端接口,传商品id去获取所需要的的五个核心参数及需要的信息   

    uniapp官方文档链接:https://uniapp.dcloud.net.cn/api/plugins/payment.html#requestpayment

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
async confirmPayment() {
    let res = await postPrepayReq({goodsId: this.payId})   // 调用后端接口去获取所需要的的数据
     
    if (res.code == 0) {
        let tempObj = {
            ...res.data
        }<br>     // 处理后端返回数据为JSON字符串转为对象
        for (let key in tempObj) {
            if (key == 'payData') {
                tempObj[key] = JSON.parse(tempObj[key])
            }
        }
        console.log(698, tempObj);<br>     // 解构所需要的的数据
        let {
              appId,
                nonceStr,
                paySign,
                signType,
                timeStamp,
                packageValue
            } = tempObj.payData<br>     // 调用微信支付
        uni.requestPayment({
            provider: 'wxpay', // 支付服务提供商,此处为微信支付
            timeStamp,
            nonceStr,
            package: packageValue,
            signType,
            paySign,
            prepayid: tempObj.mchOrderNo,
                success: payRes => {
                    console.log("支付成功", payRes);
                },
                fail: payErr => {
                    console.log("支付失败", payErr);
                }
        })
    }
},

  七、支付过程图

  

 

     注:该文档为个人理解所写,有误可建议修改

 

本文作者:persist_in

本文链接:https://www.cnblogs.com/persistIn/p/17791185.html

版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。

posted @   persist_in  阅读(3151)  评论(0编辑  收藏  举报
点击右上角即可分享
微信分享提示
💬
评论
📌
收藏
💗
关注
👍
推荐
🚀
回顶
收起
🔑