uniapp微信支付功能的实现

前言

在开发小程序时，会涉及到一些电子商务、在线支付和移动支付的功能。所以在小程序中，微信支付是非常重要的一种支付方式。实现微信支付功能可以为用户提供更便捷、安全的支付体验，同时也能提升电商平台或者是其他移动应用的用户体验和转化率。我们将从企业小程序出发，从0起步详细介绍微信支付的流程。

准备工作

1. 注册微信支付商户号（由上级领导或法人注册）

注册微信支付商户号路径

注意，此商户号，需要由主管及以上的上级领导进行注册，会成为公司的收款账户。 不是由前端程序员注册！！

注册也非常简单，重点是需要提供企业的资料，一般程序员没有权限获取这些材料，所以需要由上级注册。企业注册需要材料：营业执照，对公银行账户信息，法人身份证。

2. 注册小程序账号（由上级或领导注册）

注册流程也比较简单，企业一般注册为企业小程序。非个人需要上传营业执照等材料。注册小程序接口

3. 登录商户号绑定小程序

登录之前注册好的商户账号，将当前小程序ID绑定至此商户，表面此小程序可以调用此商户支付相关接口。微信支付路径

后端工程师书写接口

后端书写接口，根据前端传入的数据，返回微信支付的核心数据，后端需要什么数据，前端就调用在此接口时，传给后端即可。

这五个支付的核心数据都是由后端接口返回，是公司自己的后端程序员自己写的接口，前端只需要调用对应的接口并且返回对应的数据即可。

返回的核心数据：

APPID：小程序的身份证，微信支付的API会使用这个身份证来识别你的应用。

nonceStr：这是一个随机的字符串，用于保证交易的安全性，每次请求都使用新的随机字符串

packageValue：这是统一单接口返回的prepay_id参数值，用于调用微信支付功能

paySign：请求参数的交易，用于确保请求的完整性和防止被篡改。

signType：交易类型，目前微信支付API只支持MD5、HMAC-SHA256和RSA三种类型

timeStamp：请求的时间戳，时间戳也是交易的一部分，用于防止重放攻击

前端工程师调用接口

获取openid（当前用户的真实id）

openid为当前用户真实id，无法直接用任何接口获得，需要先调用微信login接口登录，获取登录凭证code，在通过此code（登录凭证，5分钟有效），向微信服务器换取用户openid。原生小程序和uniapp的流程是一模一样的。

// 点击开起支付功能
			payWechat(){
				// 登录
				uni.login({
          // provider：指定服务提供商，这里是 'weixin'，表示使用微信登录
					provider:'weixin',
					success:(res)=> {
            //code: 用户登录凭证（有效期五分钟）使用 code 可以换取 openid、unionid、session_key 等核心信息
						console.log(res.code);
					}
				})
			}

发送请求调用微信官方接口，用code凭证换取用户openid（真实用户id），成功获取到code之后，发送请求。调用微信官方接口,拿code去换openid。

uni.request({
		// 微信官方接口
		url: 'https://api.weixin.qq.com/sns/jscode2session',
		// 发送到服务器的数据
		data: {
				appid: '在微信开放平台注册的应用的唯一标识',
				secret: '在微信开放平台注册的应用的密钥',
				js_code: res.code,//登录时获取的code
				grant_type: 'authorization_code'//授权类型
			},
			success:(res)=> {
				//获取openid：用户真实的唯一id
				console.log(res.data.openid);
		}
})

调用公司后端接口，获取支付核心数据

data: { 接口需要什么参数就传给接口,包含扣款金额,订单id等 }

// 调用公司接口
uni.request({
		url: '公司的后端接口,获取核心的支付数据',
		// 请求方式
		method: 'POST',
		data: {
				openId: obj.data.openid, //微信用户的openid!!!扣谁的钱
				name: '飞光飞光,劝尔一杯酒',//购买商品的名字
				money: Number(this.val),	//价格
				code: '8512300123149105999015', //登录时获取的code,可改
				payType: 1, //支付的类型
				// clientIp 是客户端的 IP 地址。这个参数通常用于统一下单接口，
				// 微信服务器会记录这个 IP 地址作为交易的发起地。这个参数对于防止欺诈行为非常重要，
				// 因为它可以帮助微信服务器识别出异常的支付行为
				clientIp: '127.0.0.1'
			}
})

调用微信官方支付接口，弹出支付界面

调用微信官方支付接口弹出付款界面,输入密码扣款

success(pay) {
  // 调用微信官方接口扣钱了
	uni.requestPayment({
	// timeStamp：时间戳，从 pay.data.data.timeStamp 获取
	timeStamp: pay.data.data.timeStamp,
	// nonceStr：随机字符串，从 pay.data.data.nonceStr 获取。
	nonceStr: pay.data.data.nonceStr,
	// 统一下单接口返回的 prepay_id 参数值，从 pay.data.data.packageValue 获取。
	package: pay.data.data.packageValue,
	// 签名算法，从 pay.data.data.signType 获取
	signType: pay.data.data.signType,
	// paySign：签名，从 pay.data.data.paySign 获取
	paySign: pay.data.data.paySign,
	// complete 是一个回调函数，无论支付成功还是失败，都会被调用。
	// res 参数包含了支付的结果信息
	complete(res) {
			console.log(res,'扣款返回的结果');
		}
	})
}

调用后，弹出付款界面，模拟器需要扫码支付。点击真机调试会直接弹出微信付款界面。这样微信支付功能就完成啦。