H5微信支付

开始的小白

已于 2024-08-12 10:50:49 修改

阅读量962

点赞数 14

文章标签：微信

于 2024-08-12 10:37:45 首次发布

本文链接：https://blog.csdn.net/liwei19950803/article/details/141124278

版权

H5进行静默微信授权_微信h5静默授权 state-CSDN博客文章浏览阅读183次，点赞8次，收藏2次。在H5公众号项目中使用的是uniapp进行开发，在开发中需要用到一些微信的支付、扫码等功能，这些都需要进行一个微信授权获取到code，由于uniapp的方法不支持h5直接获取code，所以只能使用微信授权链接进行获取，但是根据需求获取还需要不能显示授权页，所以就使用一个静默授权的操作项目我们要用到自己appid和当前线上地址的回调页面，根据自己需求进行设置不同的回调页面。_微信h5静默授权 statehttps://blog.csdn.net/liwei19950803/article/details/141054652

开发h5会遇到一些微信的支付功能，但是使用uniapp 支付api却不支持h5的支付，所以只能另寻他路，uniapp提供了两种，一种是封装好的支付插件(不过我没用过)，第二种是使用第三方提供的JavaScript库 jweixin-module,还有一种不是uniapp 官网提供的方法，是微信官方提供的一种直接调用微信原生接口的方法 WeixinJSBridge.invoke, 不过他们都需要用到 appId，timestamp，nonceStr，packageValue，signType，paySign 这些参数都需要后台返回，后台具体怎么返回那就问和自己配合的后端就行，如果是让传openid等参数的话，可以查看上面的链接看看如何返回（上面链接属于静默授权，根据项目需求而来）

1 使用jweixin-module

先进行项目安装jweixin-module

npm  i jweixin-module

在需要使用的页面进行引入

const wx = require('jweixin-module');

再将获取的主要参数进行wx的配置

	wx.config({
				debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
				appId: appId, // 必填，公众号的唯一标识
				timestamp: timeStamp, // 必填，生成签名的时间戳
				nonceStr: nonceStr, // 必填，生成签名的随机串
				signature: paySign, // 必填，签名，见附录1
				jsApiList: ['chooseWXPay'] // 必填，需要使用的JS接口列表，比如微信api文档里面的微信支付，微信扫一扫等
			});

最后在进行调用微信支付的方法

wx.ready(function() {
				wx.chooseWXPay({ //下面这些参数都是在上面接口返回给我的
					timestamp: timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
					nonceStr: nonceStr, // 支付签名随机串，不长于 32 位
					package: packageValue, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=***）
					signType: signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
					paySign: paySign, // 支付签名
					success: function(res) {
						// 支付成功后的回调函数
						callback({
							...res,
							outTradeNo: order.outTradeNo
						})
					},
					cancel: function(r) {},
					fail: function(res) {
						failback(res)
						console.log('payfail')
					}
				});
			});

第一种方法的全部代码

createStoreMin:(data, callback = () => {}, failback = () => {}) )=>{
  注意 我这还有一层调用后端获取这些主要参数的方法，我没写出来 你们根据自己的项目需求来就行

// 拉起微信支付
			wx.config({
				debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
				appId: appId, // 必填，公众号的唯一标识
				timestamp: timeStamp, // 必填，生成签名的时间戳
				nonceStr: nonceStr, // 必填，生成签名的随机串
				signature: paySign, // 必填，签名，见附录1
				jsApiList: ['chooseWXPay'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
			});
			wx.ready(function() {
				wx.chooseWXPay({ //下面这些参数都是在上面接口返回给我的
					timestamp: timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
					nonceStr: nonceStr, // 支付签名随机串，不长于 32 位
					package: packageValue, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=***）
					signType: signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
					paySign: paySign, // 支付签名
					success: function(res) {
						// 支付成功后的回调函数
						callback({
							...res,
							outTradeNo: order.outTradeNo
						})
					},
					cancel: function(r) {},
					fail: function(res) {
						failback(res)
						console.log('payfail')
					}
				});
			});
			wx.error(function(res) {
				uni.showToast({
					icon: 'none',
					title: '支付失败了',
					duration: 4000
				});
			});

}

第二种方法链接