uniapp前端实现微信支付功能全过程(小程序、公众号H5、app)

wx.login({
  success (res) {
    if (res.code) {
      //发起网络请求获取openid，一般是访问后端封装好的接口，也可以通过访问微信官方接口获取
      uni.request({
         url: '后端接口地址,获取openid',
         method: 'GET',
         success(res) {
           //获取openid：用户真实唯一id进行保存
           console.log(res.data.openid)
        }
      })
    } else {
      console.log('登录失败！' + res.errMsg)
    }
  }
})

uni.request({
  url: '后端接口地址,获取订单id',
  method: 'POST',
  data: { 传入接口需要的参数,如商品金额,商品个数等 },
  success(res) {
    console.log(res.data.orderId)
  }
})

uni.request({
  url: '后端接口地址,获取支付核心数据',
  method: 'POST',
  data: { 传入接口需要的参数,如订单ID,openId等 },
  success(res) {
    console.log(res.data)
    //接口会返回以下核心参数
    //timeStamp 时间戳
    //nonceStr  随机字符串
    //package   统一下单接口返回的 prepay_id 参数值
    //signType  签名算法
    //paySign   签名
  }
})

  //调用微信官方支付接口弹出付款界面,输入密码扣款
  wx.requestPayment({
     timeStamp,  //时间戳
     nonceStr,   //随机字符串
     package,    //prepay_id
     signType,   //签名算法MD5
     paySign,    //签名
     success (res) {
       if (res.errMsg == "requestPayment:ok"){
          console.log('支付成功', res)
       }else{
          console.log('支付失败')
       }
     },
     fail (res) { 
       console.log('支付失败', res)
     }
  })

uni.request({
  url: '后端接口地址,获取支付核心数据',
  method: 'POST',
  data: { 传入接口需要的参数,如订单ID,openId等 },
  success(res) {
    //调用下方支付方法
    wxpay（res.data）
    console.log(res.data)
    //接口会返回以下核心参数
    //appId     公众号ID
    //timeStamp 时间戳
    //nonceStr  随机字符串
    //package   统一下单接口返回的 prepay_id 参数值
    //signType  微信签名方式RSA
    //paySign   微信签名
    
  }
})

   // 检测支付环境中的 WeixinJSBridge
    function wxpay(data) {
      if (typeof WeixinJSBridge == "undefined") {
        if (document.addEventListener) {
          document.addEventListener('WeixinJSBridgeReady', onBridgeReady(data), false);
        } else if (document.attachEvent) {
          document.attachEvent('WeixinJSBridgeReady', onBridgeReady(data));
          document.attachEvent('onWeixinJSBridgeReady', onBridgeReady(data));
        }
      } else {
        onBridgeReady(data);
      }
    }

    function onBridgeReady(data) {
        WeixinJSBridge.invoke(
          'getBrandWCPayRequest', {
             // 传入第一步后端接口返回的核心参数
            "appId": data.appId, //公众号
            "timeStamp": data.timeStamp, //时间戳
            "nonceStr": data.nonceStr, //随机串
            "package": data.package, //prepay_id
            "signType": data.signType, //微信签名方式RSA
            "paySign": data.paySign //微信签名
          },
          function(res) {
            // 支付成功
            if (res.err_msg == "get_brand_wcpay_request:ok") {
              // 使用以上方式判断前端返回,微信团队郑重提示：
              //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
            }
            // 支付过程中用户取消
            if (res.err_msg == "get_brand_wcpay_request:cancel") {

            }
            // 支付失败
            if (res.err_msg == "get_brand_wcpay_request:fail") {

            }
            /**
            * 其它
            * 1、请检查预支付会话标识prepay_id是否已失效
            * 2、请求的appid与下单接口的appid是否一致
            * */
            if (res.err_msg == "调用支付JSAPI缺少参数：total_fee") {

            }
          });
      }

//调用后端接口获取配置参数
uni.request({
  url: '后端接口地址,获取验证配置',
  method: 'POST',
  data: { 传入接口需要的参数,如页面路径url },
  success({data}) {
    //注入权限验证配置
    jWeixin.config({
      debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。（测试记得关掉）
      appId: data.appId, // 公众号的唯一标识
      timestamp: data.timestamp, // 生成签名的时间戳
      nonceStr: data.nonceStr, // 生成签名的随机串
      signature: data.signature, // 签名
      jsApiList: ['chooseWXPay'], // JS接口列表
    })
  }
})

    jWeixin.ready(function () {
    // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
      jWeixin.chooseWXPay({
        timestamp: data.timeStamp,
        package: data.package,
        nonceStr: data.nonceStr,
        signType: data.signType,
        paySign: data.paySign,
        success: function (res: any) {
          if (res.errMsg == "chooseWXPay:ok") {
            console.log('支付成功')
          } else {
           console.log('支付失败')
        },
        fail: function (res: any) {
          console.log('支付失败')
        },
      });
    });

//登录
uni.login({
	"provider": "weixin",
	success: function(event){
		// 登录成功,获取openid
		const {openid,access_token}= event.authResult
		//获取用户信息
        uni.getUserInfo({
            provider: 'weixin',
            success: function(info) {
                // 获取用户信息成功, 调用后端接口进行完成登录
            }
        })
	},
	fail: function (err) {
        // 登录授权失败
        // err.code是错误码
    }
})

//登录成功后在下单时创建订单
```javascript
uni.request({
  url: '后端接口地址,获取订单id',
  method: 'POST',
  data: { 传入接口需要的参数,如商品金额,商品个数等 },
  success(res) {
    console.log(res.data.orderId)
  }
})

uni.request({
  url: '后端接口地址,获取支付核心数据',
  method: 'POST',
  data: { 传入接口需要的参数,如订单ID等 },
  success(res) {
    console.log(res.data)
    //接口会返回以下核心参数
    //timeStamp 时间戳
    //nonceStr  随机字符串
    //package   统一下单接口返回的 prepay_id 参数值
    //signType  签名算法
    //paySign   签名

    //通过下方api发起支付
  }
})

uni.requestPayment({
    provider: 'wxpay',
    orderInfo: data.orderInfo, //微信、支付宝订单数据 【注意微信的订单信息，键值应该全部是小写，不能采用驼峰命名】
    nonceStr: data.noncestr,
    package: data.package,
    timeStamp: data.timestamp,
    signType: data.signType,
    paySign: data.paySign,
    success: function (res) {
        if (e.errMsg == "requestPayment:ok") {
          console.log('支付成功')
        }else{
          console.log('支付失败')
        }
    },
    fail: function (err) {
        console.log('支付失败:' + JSON.stringify(err));
    }
});