H5 JSAPI 丨微信支付

微信支付

⭐H5支付仅支持在浏览器中调用，不支持在微信浏览器中调用。本文只是做了H5支付和JSAPI支付

准备工作

H5：

1. 接入前准备
2. 业务开发配置

JSAPI：

1. 接入前准备
2. 业务开发配置
3. 引入微信支付JS <script src="http://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

环境判断

创建一个环境判断的方法 （工具类）

/**
  * 判断当前环境  0 代表非微信环境， 1 代表微信环境
  */
export function judgeWxEnv() {
    const ua = navigator.userAgent.toLowerCase();
    return new Promise((resolve) => {
        ua.match(/micromessenger/i) == 'micromessenger') ?  resolve("1") : resolve("0");
    })
}

/**
  *  H5页面获取code，通过code获取用户的openId
  */
export function getParam(name) {//获取页面路径的某个字段所对应的参数。
    var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)') // 构造一个含有目标的正则表达式对象
    var r = window.location.search.substr(1).match(reg) // 匹配目标参数
    if (r != null) return unescape(r[2])
    return null // 返回参数值
}

在需要的页面进行引入该方法，然后进行调用。

let dev_  = awiat judgeWxEnv()

if(dev_ == '1') { 
	// 微信环境
	const code = getParam('code')  // 获取路径中的code
    const pathStr = window.location.href  // 当前路径
    if (!code) {
        sessionStorage.setItem("PAY_UA", "JSAPI");
        window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${APPID}&redirect_uri=${encodeURIComponent(pathStr)}&response_type=code&scope=snsapi_base&state=1#wechat_redirect`
    }else{
      	console.log('code:' + code)
      	// 通过code调用后端接口，成功后调用微信SDK里边的 WeixinJSBridge 方法
      	// 后端返回结果实例
      	// timestamp: 0, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的
      	// timeStamp字段名需大写其中的S字符
        // nonceStr: '', // 支付签名随机串，不长于 32 位
        // package: '', // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
        // signType: '', // 微信支付V3的传入RSA,微信支付V2的传入格式与V2统一下单的签名格式保持一致
        // paySign: '', // 支付签名
      	wxpay('后端返回的数据') 
      	
    }
} else {
	// 浏览器环境，直接调用后端返回的 H5地址
	// 设置请求头的格式
 	sessionStorage.setItem("PAY_UA", "WAP");
 	// 假如后端返回的url中没有携带 redirect_url 参数，可自己进行编辑携带
 	// 例如：`后端返回的url&redirect_url=${decodeURIComponent(encodeURIComponent('支付完成后要跳转的路径'))}`  
 	window.location.href = 后端返回的url  
}


// 微信内支付
const wxpay = (pay_params) => {
   if (typeof WeixinJSBridge == "undefined") {
       if (document.addEventListener) {
           document.addEventListener("WeixinJSBridgeReady", wxpay, false);
       } else if (document.attachEvent) {
          document.attachEvent("WeixinJSBridgeReady", wxpay);
          document.attachEvent("onWeixinJSBridgeReady", wxpay);
       }
   } else {
       WeixinJSBridge.invoke("getBrandWCPayRequest", { ...pay_params },
           function (res) {
               if (res.err_msg == "get_brand_wcpay_request:ok") {
                   Toast.success("支付成功！");
                   // 跳转业务页面
               }
           });
    }
}

浅浅记录一下！
还请大家多多指教！有问题欢迎在评论区指出！感谢！！！