uniapp实现微信支付和app支付,兼容小程序和app

打印 上一主题 下一主题

主题 806|帖子 806|积分 2418



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

使用道具 举报

0 个回复

倒序浏览

快速回复

您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

曂沅仴駦

金牌会员
这个人很懒什么都没写!

标签云

快速回复 返回顶部 返回列表