IT评测·应用市场-qidao123.com技术社区

标题: uniapp实现微信支付和app支付，兼容小程序和app [打印本页]

---

作者: 曂沅仴駦    时间: 2025-1-14 22:27
标题: uniapp实现微信支付和app支付，兼容小程序和app


1，微信支付

各平台支持的支付情况阐明

• 微信小程序里只支持微信小程序支付，在 微信商户平台 申请支付时，选择公众号支付。
  
• App 里支持微信sdk支付、支付宝sdk支付、苹果iap应用内支付，在各平台申请支付时选择 App 支付。其他支付（如银联）请使用web-view组件以H5方式实现或在插件市场搜索相应插件。
  
• 支付宝小程序只支持支付宝支付。
  
• 百度小程序为百度支付，其二次封装了度小满、支付宝、微信支付。
  

1.1，从后端获取支付签名数据

1. 从后端获取支付所需
2. this.$api.pay.pullUpPayment(payParam).then(res => {
3.      if (res.code == 200) {
4.         this.pullUpPayInfo = res.result
5.      }
6. })

复制代码

1.2，调用uni.requestPayment(options)调起微信支付

1. let that = this;
3. // 在小程序中，以下是支付所需的主要参数，其他参数参考官方文档
4. // #ifdef MP-WEIXIN
5. uni.requestPayment({
6.     provider: 'wxpay',
7.         timeStamp: this.pullUpPayInfo.timeStamp,
8.         nonceStr: this.pullUpPayInfo.nonceStr,
9.         package: this.pullUpPayInfo.package,
10.         signType: this.pullUpPayInfo.signType,
11.         paySign: this.pullUpPayInfo.paySign,
12.         success: function (res) {
13.                 console.log('success:' + JSON.stringify(res));
14.         },
15.         fail: function (err) {
16.                 console.log('fail:' + JSON.stringify(err));
17.         }
18. });
19. // #endif
21. // 在app中，需要在自己的小程序中实现个支付页面，然后app中微信支付的时候，打开自己小程序的支付页面完成支付
23. // #ifdef APP-PLUS
24. let minProgram = {
25.         path: `pagesC/pages/shops/orderSubmit/pay?data=${that.pullUpPayInfo.payId}&payType=1&orderIds=${JSON.stringify(that.pullUpPayInfo.orderIdList)}`, //  可带参数
26.         type: that.miniProgramType || 0, //可取值： 0-正式版； 1-测试版； 2-体验版。 默认值为0。
27.         id: 'gh_aa7750a7c7677' //小程序的原始id       
28. }
30. // sweixin需要在页面onLoad中处理
31. this.sweixin ? this.sweixin.launchMiniProgram({...minProgram},
32.     res => {
33.     },
34.     err => {
35.     if (err.code == -8) {
36.        uni.showToast({
37.           title: "未安装微信客户端",
38.           duration: 2000
39.        });
40.        return
41.     } else {
42.        // 跳到小程序的首页
43.        uni.switchTab({
44.            url: '/pagesD/pages/index/index/index'
45.        });
46.     }
47. }) : plus.nativeUI.alert('当前环境不支持微信操作!');
48. // #endif

复制代码

1. onLoad(options){
2.     // #ifdef APP-PLUS  
3.     plus.share.getServices((s) => {
4.       let shares = {};
5.       for (let i = 0; i < s.length; i++) {
6.         let t = s[i];
7.         shares[t.id] = t;
8.       }
9.       let sweixin = shares['weixin'];
10.       this.sweixin = sweixin
11.       console.log(this.sweixin)
12.     }, function (e) {
13.       console.log("获取分享服务列表失败：" + e.message);
14.     });
15.     //#endif
16. }

复制代码

2，支付宝支付

2.1，从后端获取支付签名数据

1. 从后端获取支付所需
2. this.$api.pay.pullUpPayment(payParam).then(res => {
3.      if (res.code == 200) {
4.         this.pullUpPayInfo = res.result
5.      }
6. })

复制代码

2.2，调用uni.requestPayment(options)调起微信支付

orderInfo 注意事项

• 百度小程序的 orderInfo 为 Object 类型，具体的数据结构，参考：百度收银台支付。
  
• 支付宝小程序的 orderInfo(支付宝的规范为 tradeNO) 为 String 类型，表现支付宝交易号。
  
• 抖音小程序的 orderInfo 为 Object 类型，详见：发起头条支付
  
• App端，支付宝支付 orderInfo 为 String 类型。
  
• App端，微信支付 orderInfo 为 Object 类型。
  
• App端，苹果应用内支付 orderInfo 为Object 类型，{productid: 'productid'}。
  

1. // pullUpPayInfo 为从后端获取的支付签名参数
2. uni.requestPayment({
3.         provider: 'alipay',
4.         orderInfo: this.pullUpPayInfo, //微信、支付宝订单数据
5.         success: function (log) {
6.                 console.log('支付成功')
7.         },
8.         fail: function (err) {
9.                 console.log('我今天支付失败了')
10.         }
11. });

复制代码

以下为通过支付宝交易号拉支付宝支付

1. // 通过支付宝交易号拉支付宝支付
2. uni.requestPayment({
3.         provider: 'alipay',
4.         orderInfo: `trade_no=${payInfo.tradeNo}`,
5.         success: function (log) {
6.                 console.log('支付成功')
7.         },
8.         fail: function (err) {
9.                 console.log('我今天支付失败了')
10.         }
11. });

复制代码

App平台支付流程

流程：支付平台功能申请 -> manifest.json 里设置支付参数 -> uni-app 里调用 API 进行支付
manifest.json里设置相关参数

• 在manifest.json - App模块权限选择 中勾选 payment(支付)
  
• 在 manifest.json - App SDK设置 中，勾选需要的支付平台，目前有微信支付、支付宝支付、苹果应用内支付(IAP)，此中微信支付需要填写从微信开放平台获取的AppID 
  
  
  
• 这些设置需要打包生效，真机运行仍然是HBuilder基座的设置，可使用自定义基座调试。离线打包请参考离线打包文档在原生工程中设置。
  
• 设置并打包后，通过uni.getProvider可以得到设置的效果列表，注意这里返回的是manifest设置的，与手机端是否安装微信、支付宝无关。
  

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

---

欢迎光临 IT评测·应用市场-qidao123.com技术社区 (https://dis.qidao123.com/)

Powered by Discuz! X3.4