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

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-WEIXIN
uni.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-PLUS
let 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配置的,与手机端是否安装微信、支付宝无关。

//微信充值 //支付接口测试 function balance(url, data) { uni.request({ url: cfg.originUrl + '/wx/mp/js_sig.do', data: { route: url }, method: 'GET', success: (res) => { jweixin.config({ debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来 appId: res.data.appId, // 必填,公众号的唯一标识 timestamp: res.data.timestamp, // 必填,生成签名的时间戳 nonceStr: res.data.nonceStr, // 必填,生成签名的随机串 signature: res.data.signature, // 必填,签名 jsApiList: ['chooseWXPay'] // 必填,需要使用的JS接口列表 }); jweixin.ready(function() { uni.request({ url: cfg.originUrl + '/wx/recharge/pay.do', method: 'POST', header: { 'Content-type': "application/x-www-form-urlencoded", }, data: JSON.stringify(data), success: function(res) { alert("下单成功"); alert(JSON.stringify(res)); alert(res.data.order_id); all.globalData.orderId = res.data.order_id; uni.setStorageSync('orderId', res.data.order_id); jweixin.chooseWXPay({ timestamp: res.data.payParams.timeStamp, // 支付签名时间戳 nonceStr: res.data.payParams.nonceStr, // 支付签名随机串 package: res.data.payParams.package, // 接口返回的prepay_id参数 signType: res.data.payParams.signType, // 签名方式 paySign: res.data.payParams.paySign, // 支付签名 success: function(e) { alert("支付成功"); alert(JSON.stringify(e)); // 支付成功后的回调函数 } }); } }) }); jweixin.error(function(res) { // config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。 console.log("验证失败!") }); } }) }
### UniApp 实现APP 微信支付小程序微信支付的区别 #### 支付集成方式 对于UniApp应用而言,在不同平台上的支付功能需要通过调用相应平台的能力接口来完成。当涉及到微信环境下的支付时,无论是H5页面还是原生插件形式,都需要遵循微信公众平台所提供的API文档说明[^1]。 而对于微信小程序来说,其内置了专门用于处理支付流程的一套机制,开发者可以直接利用`wx.requestPayment()`方法发起支付请求,并且整个过程更加紧密地集成了微信生态体系内的安全校验措施以及用户体验设计[^2]。 #### 开发复杂度对比 在UniApp实现跨平台兼容性的支付解决方案可能会增加一定的开发难度技术栈的选择考量。因为这不仅涉及到了解各个目标平台关于移动支付的具体规定,还需要确保一套代码能够在多端正常工作并保持一致的行为逻辑。 相比之下,专门为微信小程序定制化的支付模块则显得更为简单直接,只需按照官方指南编写少量必要的配置项就能快速上线使用,减少了因适配其他渠道而带来的额外负担。 #### 用户体验一致性 由于UniApp旨在构建一次编码多处部署的理想状态,所以在实际操作过程中难免会遇到一些细微差别影响最终呈现效果;特别是在像支付这样敏感环节上更需谨慎对待可能出现的不同表现形式。 然而,微信小程序凭借高度针对性的设计理念,在这方面往往能够提供给用户更加流畅自然的操作感受,从唤起支付界面到完成交易确认都能较好地契合大众习惯,从而提升整体满意度水平。 ```javascript // 示例:UniApp 中调用微信支付 API (简化版) uni.request({ url: 'https://example.com/getPayParams', // 获取预支付订单参数接口地址 method: "POST", data: { body: "test", out_trade_no: new Date().getTime(), total_fee: 1, spbill_create_ip: "8.8.8.8" }, success(res){ let payParam = res.data; uni.requestPayment({ provider:'wxpay', timeStamp: payParam.timeStamp, nonceStr: payParam.nonceStr, package: payParam.packageValue, signType: payParam.signType, paySign: payParam.paySign, success() { console.log('success');}, fail(e){console.error(JSON.stringify(e));} }); } }); ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值