UniApp H5联调微信支付/支付宝支付(带详细注释)

我都没吃饱

已于 2023-12-29 09:10:39 修改

阅读量9.2k

点赞数 23

分类专栏： uniapp 文章标签： uni-app 微信 vue.js 阿里云

于 2023-12-13 16:27:14 首次发布

本文链接：https://blog.csdn.net/Guanchong333/article/details/134971858

版权

uniapp 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

支付宝支付

1.首先要在HBuilder X 找到 manifest.json 找到App 模块配置把Payment（支付）勾选上

2. 因为我做的是H5, 调用支付宝支付的时候, 是通过后端返回的二进制的数据, 前端通过Vue-qrcode 转译成二维码

3. 然后因为这个二维码是微信跟支付宝都可以扫描的, 我们也通常把这个叫做融合支付, 详细的就是说通过支付宝扫描是直接进入支付宝的环境,通过微信扫描是进入的微信的环境

4 .首先支付宝支付的话,一些基础的数据都是后端给咱们前端返回的

5. http://192.168.3.63:8080/#/pages/ParkingFee/ParkingFee?app_id=902100013xxxxx1646&source=alipay_wallet&scope=auth_base&state=ZmZjZDk3MDI2OGY2NDY1xxxxQ5NTcxMTdlYzNlYzU%3D&auth_code=3855fa60c6d749219f111b8945xxxX97 这一串是后端给我返回的数据, 前端用到的数据也就没几个, 我来给大家说一下是什么意思

6. http://192.168.3.63:8080/#/pages/ParkingFee/ParkingFee 这个是我页面的路径

7. app_id=902100013xxxxx646 app_id就是获取支付宝授权的唯一标识

8.state=ZmZjZDk3MDI2OGY2xxxMDljNmQ5NTcxMTdlYzNlYzU%3D 商家自定义参数

9.auth_code=3855fa60c6d749219f111bxxxxxx97 用户信息授权的信息

// 首先在onLoad 中接收扫码过后跳转的数据

onLoad(options) {
  // 将传递过来的支付信息存储到当前实例的alipayInfo属性中
  this.alipayInfo = options;

  // 判断当前用户代理是否为支付宝
  if (this.userAgent.indexOf('alipay') !== -1) {
    // 当用户代理为支付宝时，解析state参数
    const encodedString = this.alipayInfo.state;

    // 转译Base64
    if (encodedString) {
      this.randomId = atob(encodedString);
    } else {
      return; // 如果state参数不存在，直接返回
    }

    // 调用支付函数，传入支付宝的app_id和auth_code
    this.paymentFn(this.alipayInfo.app_id, this.alipayInfo.auth_code);
  }

  // 调用获取支付订单信息函数，传入randomId
  this.getPayOrderInfoFn(this.randomId);
}

export default {
		data() {
			return {
				userAgent,
				type: 1,
				// 订单详细
				info: {},
				// 支付信息
				alipayInfo: {},
				// 支付宝token
				access_token: "",
				user_id: "",
				// 支付宝交易码
				tradeNO: "",
                // 订单id
				randomId: '',
			};
		},

// 首先获取该条订单的信息数据
getPayOrderInfoFn(randomId) {
    // 调用后端接口
    getPayOrderInfo(randomId).then((res) => {
          this.info = res.data
    })
}

// 获取支付宝授权
paymentFn(app_id, auth_code) {
    userpay(app_id, auth_code).then((res) => {
        // 注意这里需要转一下格式
        const parsedResponse = JSON.parse(res);
        const oauthResponse = parsedResponse.alipay_system_oauth_token_response;
        // 从中取出 access_token 跟 user_id
        // 想拉起支付宝收银台这两个是必须要有的(详细看支付宝开发文档)
        this.access_token = oauthResponse.access_token;
        this.user_id = oauthResponse.user_id;
    })
}

10. 现在支付字段已经都准备好了,下面开始调用支付宝收银台

// html 部分

<u-button type="primary" @click="userInfoPayFn">立即缴费</u-button>

// Js 部分
userInfoPayFn() {
    // 判断是否在支付宝浏览器
    if (userAgent.indexOf('alipay') !== -1) {
        let data = {
            userId: this.user_id, // 用户id
            openId: this.user_id, // 用户id
            topUpAmount: this.info.paycharge, // 支付金额
            payType: 'ALIPAYCLIENT', // 支付类型
            buyerLogonId: this.user_id, // 用户id
            orderNo: this.info.id, // 订单号
            appAuthToken: this.access_token // 后端返回的token
        }
        // 获取支付宝交易码
        userInfoPay(data).then((res)=> {
            // 还是同样的方法 需要转换格式
            const parsedResponse = JSON.parse(res.data);
            const oauthResponse = parsedResponse.alipay_trade_create_response;
            // 40004 这是支付宝官方定义的失败code码
            if (oauthResponse.code == 40004) {
                uni.showToast({
                    title: `${oauthResponse.sub_msg}`,
                    icon: 'none', //如果要纯文本，不要icon，将值设为'none'
                    duration: 2000 //持续时间为 2秒
                })
            }
            // 拉起支付宝收银台  trade_no = 支付宝交易号
            this.callAlipay(oauthResponse.trade_no);
        })
    }
},

// 拉取支付宝收银台
callAlipay(id) {
  // 判断是否存在支付宝的JSBridge
  if (window.AlipayJSBridge) {
    // 调用支付宝客户端接口，执行支付操作
    AlipayJSBridge.call('tradePay', {
      tradeNO: id
    }, function(result) {
      if (result.resultCode === '9000') {
        // 支付成功
        uni.$u.toast('支付成功！');
        setTimeout(() => {
          uni.reLaunch({
            url: '/pages/success/success'
          });
        }, 500);
      } else {
        // 支付失败
        uni.$u.toast('支付失败');
        setTimeout(() => {
          uni.reLaunch({
            url: '/pages/fail/fail'
          });
        }, 500);
      }
    });
  } else {
    // 如果支付宝的JSBridge尚未准备好，在文档中添加AlipayJSBridgeReady事件监听器
    document.addEventListener('AlipayJSBridgeReady', () => {
      // 准备就绪后再次调用支付函数，传入支付数据paymentData
      this.callAlipay(paymentData);
    });
  }
}

11. 说到这里支付宝支付已经说完了, 支付宝支付前端可以跟后端调试的话得在支付宝沙箱环境下调试

微信支付

1. .首先要在HBuilder X 找到 manifest.json 把Payment支付勾上还有就是一个 appid 需要后台给你.

2. 要调后端的预生成订单信息接口去获取订单信息

3. weix.js 组件


// weix.js
// 首先尝试从本地存储中获取，如果不存在则尝试从URL参数中获取code，如果没有code则进行微信授权跳转，最终获取openId。获取过程中使用了getOpenIdBycode接口来获取openId。
import { getOpenIdBycode } from "@/api/mobileCharging.js";

export default {
  data() {
    return {
      openId: "",
      appId: ""
    };
  },
  mounted() {
    // 获取本地存储的openId和appId
    let openId = uni.getStorageSync('wx_openid');
    let appId = uni.getStorageSync('wx_appId');
    
    console.log('openId', openId);
    
    if (openId && appId) {
      // 如果本地存储中已经存在openId和appId，则直接使用
      this.openId = openId;
      this.appId = appId;
      return true;
    }
    
    // 如果本地存储中不存在openId和appId，则尝试从URL参数中获取code
    let code = this.getUrlKey('code');
    
    if (!code) {
      // 如果URL参数中没有code，则进行微信授权跳转获取code
      this.appId = 'wx0b3c40b8569affa2'; // 替换成你的公众号的AppID
      uni.setStorageSync('wx_appId', this.appId);
      
      let url =
        `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${this.appId}&redirect_uri=` +
        encodeURIComponent(location.href) + "&response_type=code&scope=snsapi_base&state=123#wechat_redirect";
      location.href = url;
    } else {
      // 如果从URL参数中获取到了code，则调用接口获取openId
      getOpenIdBycode(code).then(res => {
        this.openId = res.data.openId;
        uni.setStorageSync('wx_openid', res.data.openId);
      });
    }
  },
  methods: {
    getUrlKey(name) {
      // 辅助函数，从URL中获取指定名称的参数值
      return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ""])[1].replace(/\+/g, '%20')) || null;
    }
  }
};

4. 主页面

// 首先我是引入了一个组件 (获取微信的openId和appId)
import weix from "@/common/weix.js";
// 这一行从浏览器中获取 userAgent 字符串 userAgent 字符串包含有关用户浏览器 设备和操作系统的信息 通过转换为小写 可以更容易地进行大小写不敏感的检查
const userAgent = navigator.userAgent.toLowerCase();
// 插件  npm i  jweixin-module --save
const wx = require('jweixin-module');

export default {
	data() {
		return {
			userAgent,
            // 订单详细
            info: {},
            // 订单id
            randomId: '',
           }
     }
},

mixins: userAgent.indexOf('micromessenger') !== -1 ? [weix] : [],

// 首先在onLoad 中接收扫码过后跳转的数据

onLoad(options) {
  // 将传递过来的支付信息存储到当前实例的alipayInfo属性中
  this.alipayInfo = options;

  // 判断当前用户代理是否为微信
  if (this.userAgent.indexOf('micromessenger') !== -1) {
    // 订单id 来获取该条订单的全部数据
    this.randomId = this.alipayInfo.randomId;
  }

  // 调用获取支付订单信息函数，传入randomId
  this.getPayOrderInfoFn(this.randomId);
},
methods: {
    // 首先获取该条订单的信息数据
    getPayOrderInfoFn(randomId) {
        // 调用后端接口
        getPayOrderInfo(randomId).then((res) => {
              this.info = res.data
        })
    },
    // 点击缴费
   userInfoPayFn() {
    // 获取用户的 User Agent 字符串
    const userAgent = navigator.userAgent.toLowerCase();
    
    // 判断是否在微信浏览器
    if (userAgent.indexOf('micromessenger') !== -1) {
        console.log('在微信浏览器');

        // 构建支付所需的参数对象
        let data = {
            userId: this.openId,            // 用户id
            openId: this.openId,            // 用户id
            topUpAmount: this.info.paycharge,  // 支付金额
            payType: 'MICROMESSENGER',     // 支付类型
            buyerLogonId: this.openId,       // 用户id
            tradeType: 0,                   // 停车缴费/月卡
            orderNo: this.info.id,          // 订单号
            // appAuthToken: this.access_token // 后端返回的token
        }
        
        // 打印微信支付参数到控制台
        console.log('微信支付参数', data);
        
        // 获取微信支付信息
        userInfoPay(data).then((res) => {
            // 解析后端返回的支付参数
            let payParams = JSON.parse(res.data)

            // 配置微信支付参数
            wx.config({
                debug: false,
                appId: 'wx0b3c40b8569affa2',   // 公众号ID 
                // appId: uni.getAppBaseInfo().host.appId, // 公众号ID 
                timestamp: payParams.timestamp, // 时间戳，自1970年以来的秒数
                nonceStr: payParams.nonceStr,   // 随机串
                signature: payParams.sign,      // 微信签名方式
                jsApiList: ['chooseWXPay']
            });

            // 初始化微信支付
            wx.ready(() => {
                // 在这里调用微信支付接口
                this.callWechatPay(payParams);
            });
        })
     }
  },

  // 拉取微信收银台
  callWechatPay(params) {
    // 调用微信支付接口
    wx.chooseWXPay({
        timestamp: params.timeStamp,    // 时间戳
        nonceStr: params.nonceStr,      // 随机串
        package: params.package,        // 订单详情扩展字符串
        signType: 'MD5',                // 签名方式
        paySign: params.sign,           // 签名
        success: function(res) {
            // 支付成功后的回调函数
            console.log('Payment succeeded', res);
            uni.$u.toast('支付成功！')
            setTimeout(() => {
                uni.reLaunch({
                    url: '/pages/success/success'
                })
            }, 500)
        },
        fail: function(res) {
            // 支付失败后的回调函数
            console.error('Payment failed', res);
            uni.$u.toast('支付失败')
            setTimeout(() => {
                uni.reLaunch({
                    url: '/pages/fail/fail'
                })
            }, 500)
        }
      });
  },

}

总结: 这是支付宝跟微信支付的全部流程,我写的也有不足的地方,但是对接支付完全够用了,望大家采纳!