关于实现uni-app项目在APP端使用微信支付功能

  • Post author:
  • Post category:其他


首先在对项目开启支付功能,在项目的

manifest.json

文件中勾选

APP模块配置中的Payment支付模块

,并将需要的信息填写完整,如下图

在这里插入图片描述

除此之外还需要其他的一些配置,下面开结合图片来一步步的详细了解下:

在这里插入图片描述

如上图提交云端打包界面所示,相对于支付宝微信在各方面的要求比较全面,对项目要使用微信支付必须严格按照微信官方的要求来配置,如上面图片所示:必须使用自有证书,证书别名,证书私钥密码和证书文件缺一不可,有关证书的制作过程可参考官方教程

如何生成证书

,其中关于签名部分:

在这里插入图片描述

生成的签名就是一串字符串,记住要将其中的冒号全部删除掉

,然后需要登录微信公共平台将应用签名和应用包名进行绑定,将上述配置完成以后就可以打包上传到云端了,下面就开始码代码了。

下面是逻辑代码:

//APP微信宝支付
deposit() {
	var that = this;
	// 调用uniapp API uni.getProvider 获取服务供应商
	uni.getProvider({
		/* 获取服务类型,可选值如下:
		* @param share: 分享
		* @param oauth: 授权登录
		* @param push: 推送
		* @param payment: 支付类型
		*/
		service: 'payment',
		success: (res) => {
			/*
			* @ res.service 获取服务供应商 ==> 'payment'
			* @ res.provider 这里选择的是支付类型,所以包含["alipay","wxpay"]
			* ‘alipay’: 表示支付宝
			* ‘wxpay’: 表示微信
			*/
			// 检查res.provider中是否有 alipay
			if (res.provider.indexOf('wxpay') != -1) {
				// 后台支付接口需要的一些参数
				var data = {
					id: that.id, // 订单id
					pay_type: that.pay_type // 支付类型
				};
				//发起后台支付接口请求
				that.$api.payMonry(data).then(res => {
					// console.log('微信订单数据', res);
					//调用uniapp API uni.requestPayment 支付接口
					uni.requestPayment({
						//服务提供商 通过uni.getProvider获取
						provider: 'wxpay',
						//后台返回的订单数据
						orderInfo: res.data.pay_result,
						//调用成功的回调
						success(res) {
							// console.log('success:' + res);
							setTimeout(() => {
								uni.reLaunch({
									url: `/pages/user/order/orderList?status=${that.status}&type=${that.type}`
								})
							}, 1500)
						},
						//调用失败的回调
						fail(err) {
							console.log('fail:' + err);
						}
					})
				}
			}
		}
	})
}

到此代码部分就结束了,看起来是不是很简单,其实和支付宝支付一样,只不过就是服务商不同而已。支付宝使用

alipay

,微信使用

wxpay

下面是有关调试的想换介绍:

在开发中我们避免不了要进行大量的调式,在对微信支付进行调试的时候,不能有两种方法进行调试,各有不同,下面来介绍下:

  1. 需要我们将代码打包上传到云端后,并且部署到服务器上,然后下载安装APP后才能进行调试,这种方法是不是很麻烦。
  2. 制作自定义基座来进行真机调试 我们可以选择 运行 ==> 运行到手机或模拟器 ==> 制作自定义基座

    在这里插入图片描述

    在打包的时候勾选打自定义调试基座,然后打包完成后,就可以进行真机调试了,这种方法比起第一种来说确实方面了许多,注意,方法2在调试完毕后还需要进行正式打包,不然进入APP会有提示抛出。

PS:以上内容希望可以帮到大家,步骤有不懂的可以在下方留言~~~



版权声明:本文为bigpatten原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。