uniapp---H5端（微信公众号支付 和 支付宝支付）

文章目录

• • 微信公众号支付
  • 支付宝支付

微信公众号支付

    提示：第一步：当用户完成登录时，判断浏览器环境（微信内置浏览器/手机浏览器）；

        第二步：判断用户是否关注了微信公众号；

        最后一步：调起微信公众号支付；

第一步：点击登录完成后，开始判断环境（微信内置浏览器/手机浏览器），如果运行环境是微信的话，请求后端接口判断该账号是否绑定微信公众号，如果没绑定则请求微信官方接口并获得包含code的回调链接；

      os：把判断绑定微信公众号方法写在登录页面，可以让订单支付页面代码更干净；

    Login() { //登录
	    let that = this;
		uni.$u.http.post('接口地址', {
			data:'参数'
		}).then(res => {
			if (res.code == 0) {
				uni.$u.toast(res.msg);
				return false;
			}
			let userInfo = res.data.userinfo;
			uni.setStorageSync('userInfo', userInfo);
			uni.setStorageSync('token', userInfo.token);
			that.is_wx()
		}).catch(err => console.log(err))
	},

	is_wx() { // 判断是否在微信环境中
		let that = this;
		let en = window.navigator.userAgent.toLowerCase();
		if (en.match(/MicroMessenger/i) == 'micromessenger') { // 微信内置浏览器
			uni.$u.http.post('接口路径').then(res => {
				if (res.code == 0) { // 未绑定微信公众号
					that.getWeChatCode()
				} else {
					uni.switchTab({
						url: '/pages/mine/mine'
					})
					that.$router.go(0);
				}
			}).catch(err => console.log(err))
		} else { // 手机浏览器
			uni.switchTab({
				url: '/pages/mine/mine'
			})
			that.$router.go(0);
		}
	},

第二步：判断用户是否关注了微信公众号；

  思路：因为授权成功后微信会跳转到我们设置的回调地址，需要提前在onload中设置一下；

onLoad(e) {
    const hasWechatLogin = uni.getStorageSync('wechat_login_tag') || null;
	if (hasWechatLogin) {
		this.checkWeChatCode();
	}
},

  思路：把后台所需的code以及其他信息调用接口传参； 

// 重定向回来本页面检查有没有code
checkWeChatCode() {
    let code = this.getUrlCode('code');
	if (code) {
		this.bindingXH5(code)
	}
},

// 正则匹配请求地址中的参数函数
getUrlCode(name) {
    return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) ||[, ''])[1].replace(/\+/g, '%20')) || null
},

// 看地址中有没有code参数,如果没有code参数的话则请求微信官方的接口并获取包含code的回调链接
getWeChatCode() {
	//用于退出登录回来不会再调一次授权登录
	uni.setStorageSync('wechat_login_tag', 'true');
    const appID = ''; //公众号appID
	const callBack = ''; //回调地址

	//通过微信官方接口获取code之后，会重新刷新设置的回调地址【redirect_uri】
	window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' +
					appID + '&redirect_uri=' + encodeURIComponent(callBack) +
					'&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect'
},

// 绑定微信把后端需要的code以及其他信息调用接口传过去
bindingXH5(code) {
    let that = this;
	uni.$u.http.post('/user/third', {
		code
	}).then(res => {
	    if (res.code == 0) {
			uni.$u.toast("绑定失败")
		} else {
			uni.switchTab({
				url: '/pages/mine/mine'
			})
			that.$router.go(0);
		}
	}).catch(err => console.log(err))
},

最后一步：页面调起微信公众号支付；

   提示：h5 绑定微信公众号，res是后端返回的数据，里面包含需要的信息；

       appId 参数必填(公众号唯一标识)；timeStamp 参数必填(生成签名的时间戳)；

       nonceStr 参数必填(生成签名的随机串)；signType 参数必填(签名)；

wxH5Pay(res) {
    let that = this;
    var data = res;
	WeixinJSBridge.invoke('getBrandWCPayRequest', {
		debug: true,
		appId: res.data.appId,
		timeStamp: res.data.timeStamp,
		nonceStr: res.data.nonceStr,
		package: res.data.package,
		paySign: res.data.paySign,
		signType: res.data.signType,
	}, function(res) {
		if (res.err_msg === 'get_brand_wcpay_request:ok') {
			// 支付成功的处理逻辑 
			uni.showToast({
			 	title: '微信支付成功',
			 	icon: 'none'
			})
			uni.navigateTo({
				url:'/pages/mine/订单列表/订单列表'
			})
		} else if (response.err_msg == "get_brand_wcpay_request:cancel") {
			// 支付过程中取消支付
			uni.showToast({
				title: '取消支付',
				icon: 'none'
			})
		} else {
			uni.showToast({
				title: '支付失败',
				icon: 'none'
			})
		}
	});
},

支付宝支付

 OS：你没有看错，你不用怀疑！只有两行代码，不信的话你试一下就知道喽！对了对了，怕一些笨蛋不知道怎么用，我就再多嘴几句哈。这里只需要把请求后端接口成功后返回的订单信息，也就是接口成功返回的res赋值就可以了。

document.querySelector('body').innerHTML = res;
document.forms[0].submit();

尾结

  提示：文章会有些思路断点但重点部分没问题，等我下次重新整理一下！