uniapp之H5微信支付 开发

微信支付前端需要准备的东西以及流程

准备：微信公众平台的appId
流程：
1.用微信给的一串链接去访问拿到code
2.拿着code去请求后台拿到openId以及Unionid 
3.拿到openId去获取签名以及生成签名的时间戳和随机串，prepay_id

代码如下

//获取code
pay(){
let local = encodeURIComponent(window.location.href); //获取当前页面地址作为回调地址
let appid = 'xxxxxxxxxxxxx' //自己申请的appId
//通过微信官方接口获取code之后，会重新刷新设置的回调地址【redirect_uri】
window.location.href ="https://open.weixin.qq.com/connect/oauth2/authorize?appid=" +
appid +"&redirect_uri=" +local +"&response_type=code" +"&scope=snsapi_userinfo&state=1#wechat_redirect";
},
getUrlCode(name) {
		//截取code
		return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ''])[1].replace(/\+/g, '%20')) || null
},
checkWeChatCode() {
    //拿到code去换openId
	let code = this.getUrlCode('code')
	if (code) {
		this.getOpenId(code)
	}
},
getOpenId(code) {
	this.$u.api.getOpenId({
		code: code
	}).then(res => {
		if (res.success) {
			var openId = res.data;
			this.getKey(openId);
		}
	})
},
getKey(openId) {
	//拿到签名调微信支付
	this.$u.api.courseh5({
		memberId: this.$store.state.userId,
	 	courseId: this.id,
		orderMoney: this.goodsdetail.price,
		openId: openId
	}).then(res => {
		if (res.success) {
			let _this = this;
			_this.$wx.config({
				debug: false,
				appId: 'xxxxxxxxxxxxxxxxxx', // 必填，公众号的唯一标识
				timestamp: res.data.paraMap.timeStamp, // 必填，生成签名的时间戳
				nonceStr: res.data.paraMap.nonceStr, // 必填，生成签名的随机串
				signature: res.data.paraMap.sign, // 必填，签名
				jsApiList: ["chooseWXPay"] // 必填，需要使用的JS接口列表
			})
			_this.$wx.ready(function() {
				_this.$wx.chooseWXPay({
					timestamp: res.data.paraMap.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
					nonceStr: res.data.paraMap.nonceStr, // 支付签名随机串，不长于 32 位
					package: res.data.paraMap.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
					signType: 'MD5', // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
					paySign: res.data.paraMap.sign, // 支付签名
					success: function(ret) {
							// 支付成功后的回调函数
							uni.redirectTo({
							url: "./payok"
							})
					}
			});
		});
		_this.error(err => {
				console.log('config fail:', err);
		});
	}
})
},

标签：uniapp,code,openId,res,paraMap,H5,签名,微信,data
来源： https://blog.csdn.net/weixin_44570900/article/details/114935076