微信H5支付流程

微信H5支付流程

1.获取AppId

2.获取Code

3.获取OpenId

4.唤醒支付操作

一：获取Appid

拥有自己或者企业所属的公众号：设置与开发--》安全中心

二：获取code

需要访问微信提供的网址方法为：

// 获取code

    getBaseInfos(){
      let url_code = "https://open.weixin.qq.com/connect/oauth2/authorize?appid="+你的appid+"&redirect_uri="+当前页面url+"&response_type=code&scope=snsapi_base&state=1&connect_redirect=1#wechat_redirect";
      window.location.href = url_code;//打开这个链接，你的url后面就会跟上code的参数
    }

注意： 当前页面需要转码

转码函数：

 urlencode (str) { 
      str = (str + '').toString(); 
      return encodeURIComponent(str).replace(/!/g, '%21').replace(/'/g, '%27').replace(/\(/g, '%28'). 
      replace(/\)/g, '%29').replace(/\*/g, '%2A').replace(/%20/g, '+'); 
 },

url_code打开之后需要手动获取url拼接参数；

三、获取openId

如果能正常获取code,需要把code传递给后端,后端返回openId 等一系列参数
可以参照微信官方文档

4.唤醒支付操作

//res.data.data都是后端传递的参数
WeixinJSBridge.invoke('getBrandWCPayRequest', {
						"appId": res.data.data.appid,
						//公众号名称，由商户传入     
						"timeStamp": res.data.data.timeStamp, 
						//时间戳，自1970年以来的秒数     
						"nonceStr": res.data.data.nonceStr,
						//随机串     
						"package": res.data.data.packageData,
						"signType": res.data.data.signType,
						//微信签名方式：     
						"paySign": res.data.data.paySign
						},
						function(res) {
							if (res.err_msg == "get_brand_wcpay_request:ok") {
							// 使用以上方式判断前端返回,微信团队郑重提示：
							//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。

							} else {
								console.log(res)
							}
						});

5、提示

如果需要区分微信浏览器走下面的方法

isWeiXin() { //判断是否为微信浏览器
				let ua = window.navigator.userAgent.toLowerCase();
				if (ua.match(/MicroMessenger/i) == 'micromessenger') {
					return true;
				} else {
					return false;
				}
			},

走非微信浏览器则单独走一套支付方案

if(isWeiXin()){
	//微信浏览器支付流程
}else{
	//	非微信浏览器支付流程
}