H5微信授权登录 H5支付 外部浏览器微信支付 前端一个函数搞

H5微信支付分为两种情况

• 微信内置浏览器环境微信支付
• 其他浏览器微信支付

平常开发过过程中 技术人员最怕的就是屎山文档，但好在H5支付随着应用的广泛性已经十分完善
::: warning
https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_7&index=6
:::

H5微信支付函数整体

/**
* @param {String} orderNumber  订单号
* @author  lv
* @return {Promise}
*/ 
export function preparedPay(orderNumber) {
	return new Promise((resolve,reject)=>{
		// 向服务端发送请求获取支付参数
		jsapi({"orderNumber":orderNumber}).then(res=>{
			// 判断是否是微信浏览器
			if (String(navigator.userAgent.toLowerCase().match(/MicroMessenger/i)) ==="micromessenger") {
				// 1、微信内部浏览器向后端请求数据获取支付信息
				// 2、通过uni.requestPayment 请求支付
				WeixinJSBridge.invoke(
					'getBrandWCPayRequest', {
						"appId": res.appId, //公众号ID，由商户传入     
						"timeStamp": res.timeStamp+"", //时间戳，自1970年以来的秒数     
						"nonceStr": res.nonceStr, //随机串     
						"package":  res.package,
						"signType":  res.signType, //微信签名方式：     
						"paySign": res.paySign, //微信签名 
					},
					function(res) {
						if (res.err_msg == "get_brand_wcpay_request:ok") {
							console.log('支付成功',res)
							resolve('支付成功')
							// 使用以上方式判断前端返回,微信团队郑重提示：
							//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
						} else {
							// 支付失败
							console.log('支付失败',res)
							reject('支付失败')
						}
					},
				);
			} else {
				// 1、外部浏览器向后端请求数据  获取支付链接
				// 2、重定向到支付链接然后开始支付
				window.location.href = res.mweb_url;
			}
		}).catch(err=>{
			reject('网络异常 登录失败')
		})
	})
}

H5支付代码解读

上文中 String(navigator.userAgent.toLowerCase().match(/MicroMessenger/i)) ==="micromessenger" 判断是否为微信内部浏览器环境
上文使用返回为Promise

• 若为微信内置浏览器环境还相对简单一些 需要用WeixinJSBridge调起支付；注意：仅在微信内置浏览器才会有WeixinJSBridge对象；官方说文档声明在成功回调中不一定保证成功，这时市面上比较通用的两种办法
  1、在回调中显示弹窗让用户自己选择支付结果
  2、在成功状态将订单号发送给后端查询订单状态

• 外部浏览器调用H5微信支付
  外部浏览器在使用上比较简单主要是配置繁琐，
  为前端只需要后端给你一个路径你负责跳转过去即可
  在生成路径之前 需要配置域名白名单 支付回调地址 在支付回调地址中查看是否支付成功

H5微信登录

H5微信登录也分为两种情况，
微信内部浏览器H5登录 公众号页面登录 （这两种其实是一种，实现方案都一样）
外部浏览器微信登录：这是一个巨坑 正常的中小企业是拿不到权限外部浏览器获取微信授权的需要和腾讯深度合作 例如腾讯视频 京东这种的企业才可以 具体申请流程可自行百度。小公司就别想了

H5登录完整函数

export function getWechatCode({
	appid="",//公众号APPid
	redirect_uri=window.location.href,//授权后重定向的回调链接地址， 请使用 urlEncode 对链接进行处理
	response_type='code',//返回类型，请填写code
	scope='snsapi_userinfo',//snsapi_userinfo  弹出授权（可拿到用户信息）  snsapi_base 静默授权
	state='test',//重定向后会带上state参数，开发者可以填写a-zA-Z0-9的参数值，最多128字节
}) {
	return new Promise((resolve,reject)=>{
		console.log(redirect_uri)
		// 截取url中的数据
		function getUrlCode() {
			var params = window.location.href.split("?")[1];
			params=params ? params.replace("#/","").split("&") : [] ;
			var obj = {};
			params.map(item => obj[item.split("=")[0]] = item.split("=")[1]);
			return obj
		}
		
		// 判断是否为微信浏览器环境
		if (String(navigator.userAgent.toLowerCase().match(/MicroMessenger/i)) === "micromessenger") {
			let returnObj = getUrlCode(); //是否存在code
			if (returnObj.code == null || returnObj.code === "") {
				//不存在就打开地址进行授权
				window.location.href =`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${encodeURIComponent(redirect_uri)}&response_type=${response_type}&scope=${scope}&state=${state}#wechat_redirect`;
				reject();
			} else {
				// 存在就是授权回来的
				resolve(returnObj)
			}
		}
	})
};



注意：使用示例
getWechatCode({
...
}).then(res=>{
	// 登陆成功回调 res 带回参数
	console.log('登陆成功回调')
}).catch(err=>{
	// 需要去授权
	console.log('需要去授权')
})

H5登录代码解读

在这个情况中前提条件
1、 有微信公众号appid
2、域名白名单

上文方式是登录和成功回调在同一个页面