> 技术文档 > uniapp实现微信支付和app支付,兼容小程序和app_uniapp 微信支付

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


1,微信支付

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

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

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

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

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

let that = this;// 在小程序中,以下是支付所需的主要参数,其他参数参考官方文档// #ifdef MP-WEIXINuni.requestPayment({ provider: \'wxpay\',timeStamp: this.pullUpPayInfo.timeStamp,nonceStr: this.pullUpPayInfo.nonceStr,package: this.pullUpPayInfo.package,signType: this.pullUpPayInfo.signType,paySign: this.pullUpPayInfo.paySign,success: function (res) {console.log(\'success:\' + JSON.stringify(res));},fail: function (err) {console.log(\'fail:\' + JSON.stringify(err));}});// #endif// 在app中,需要在自己的小程序中实现个支付页面,然后app中微信支付的时候,打开自己小程序的支付页面完成支付// #ifdef APP-PLUSlet minProgram = {path: `pagesC/pages/shops/orderSubmit/pay?data=${that.pullUpPayInfo.payId}&payType=1&orderIds=${JSON.stringify(that.pullUpPayInfo.orderIdList)}`, // 可带参数type: that.miniProgramType || 0, //可取值: 0-正式版; 1-测试版; 2-体验版。 默认值为0。id: \'gh_aa7750a7c7677\' //小程序的原始id}// sweixin需要在页面onLoad中处理this.sweixin ? this.sweixin.launchMiniProgram({...minProgram}, res => { }, err => { if (err.code == -8) { uni.showToast({ title: \"未安装微信客户端\", duration: 2000 }); return } else { // 跳到小程序的首页 uni.switchTab({  url: \'/pagesD/pages/index/index/index\' }); }}) : plus.nativeUI.alert(\'当前环境不支持微信操作!\');// #endif
onLoad(options){ // #ifdef APP-PLUS plus.share.getServices((s) => { let shares = {}; for (let i = 0; i < s.length; i++) { let t = s[i]; shares[t.id] = t; } let sweixin = shares[\'weixin\']; this.sweixin = sweixin console.log(this.sweixin) }, function (e) { console.log(\"获取分享服务列表失败:\" + e.message); }); //#endif}

2,支付宝支付

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

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

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

orderInfo 注意事项

  1. 百度小程序的 orderInfo 为 Object 类型,详细的数据结构,参考:百度收银台支付。
  2. 支付宝小程序的 orderInfo(支付宝的规范为 tradeNO) 为 String 类型,表示支付宝交易号。
  3. 抖音小程序的 orderInfo 为 Object 类型,详见:发起头条支付
  4. App端,支付宝支付 orderInfo 为 String 类型。
  5. App端,微信支付 orderInfo 为 Object 类型。
  6. App端,苹果应用内支付 orderInfo 为Object 类型,{productid: \'productid\'}。
// pullUpPayInfo 为从后端获取的支付签名参数uni.requestPayment({provider: \'alipay\',orderInfo: this.pullUpPayInfo, //微信、支付宝订单数据success: function (log) {console.log(\'支付成功\')},fail: function (err) {console.log(\'我今天支付失败了\')}});

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

// 通过支付宝交易号拉支付宝支付uni.requestPayment({provider: \'alipay\',orderInfo: `trade_no=${payInfo.tradeNo}`,success: function (log) {console.log(\'支付成功\')},fail: function (err) {console.log(\'我今天支付失败了\')}});

App平台支付流程

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

manifest.json里配置相关参数

  1. manifest.json - App模块权限选择 中勾选 payment(支付)
  2. 在 manifest.json - App SDK配置 中,勾选需要的支付平台,目前有微信支付、支付宝支付、苹果应用内支付(IAP),其中微信支付需要填写从微信开放平台获取的AppID 

  3. 这些配置需要打包生效,真机运行仍然是HBuilder基座的设置,可使用自定义基座调试。离线打包请参考离线打包文档在原生工程中配置。
  4. 配置并打包后,通过uni.getProvider可以得到配置的结果列表,注意这里返回的是manifest配置的,与手机端是否安装微信、支付宝无关。