h5微信支付

这篇文章讲了如何h5项目中使用微信支付，包括微信内置浏览器调起支付、外部浏览器调起支付、微信支付方式等内容。

一：问题梳理

1：如何判断是否是微信内置浏览器？

2：如果是外部浏览器调起支付该如何实现？

3：微信内支付的方式有哪些？

二：问题解决

1：判断浏览器类型

不同浏览器调用微信支付方式不同，所以先开始要判断浏览器类型：

isWX(){var wx = window.navigator.userAgent.toLowerCase();if (wx.match(/MicroMessenger/i) == 'micromessenger'){return true;} else {return false;}},

2：外部浏览器调起支付

外部浏览器调起支付比较简单，通过访问接口调用，然后根据会拿到接口返回的一个url，然后跳转到这个url就可以进行支付。

let res = await wxPay(params)if(res.code==200){window.location.replace(res.url)//res.url支付地址}

3：微信浏览器调起支付

微信浏览器调起支付有两种方式：使用js-sdk；使用jsapi

方式一：使用js-sdk

1：安装：jssdk：

npm install weixin-js-sdk -S

2：挂载：

import jssdk from "weixin-js-sdk"
//可全局，可局部，根据具体情况来引入

3：通过接口获取校验信息，这里访问获取校验信息的后端接口拿到校验信息。

4：通过config接口注入权限验证配置（需要同步进行，在获取到校验信息后方可注入config，否则校验失败）

wx.config({debug: true, // 开启调试模式appId: '', // 必填，公众号的唯一标识timestamp: , // 必填，生成签名的时间戳nonceStr: '', // 必填，生成签名的随机串signature: '', // 必填，签名jsApiList: ["chooseWXPay"] // 必填，需要使用的JS接口列表});

5：微信支付

wx.ready(function () {// 进行微信支付wx.chooseWXPay({appId: '',timestamp: '', // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符nonceStr: '', // 支付签名随机串，不长于 32 位package: '', // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=***）signType: '', // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'paySign: '', // 支付签名success: function (res) {// 支付成功后的回调函数if (res.errMsg == 'chooseWXPay:ok') {} else {Notify({ type: 'error', message: '支付失败',duration:2000 });}},cancel: function (res) {},fail: function (res) {Notify({ type: 'error', message: '支付失败',duration:2000 });}})})
//Success：接口调用成功时执行的回调函数。
//Fail：接口调用失败时执行的回调函数。
//Cancel：用户点击取消时的回调函数，仅部分有用户取消操作的api才会用到。
//Complete：接口调用完成时执行的回调函数，无论成功或失败都会执行。
//Trigger：监听menu中的按钮点击时触发的方法，该方法仅支持menu中的相关接口。

方式二：使用JSAPI

function onBridgeReady(){WeixinJSBridge.invoke('getBrandWCPayRequest',{"appId": "appId", //公众号名称，由商户传入     "timeStamp": "timeStamp", //时间戳，自1970年以来的秒数     "nonceStr": "nonceStr", //随机串     "package": "package","signType": "MD5", // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'"paySign": "paySign" //微信签名  },function(res) {// 支付成功if (res.err_msg == "get_brand_wcpay_request:ok") {}// 支付过程中用户取消if (res.err_msg == "get_brand_wcpay_request:cancel") {}// 支付失败if (res.err_msg == "get_brand_wcpay_request:fail") {}/*** 其它* 1、请检查预支付会话标识prepay_id是否已失效* 2、请求的appid与下单接口的appid是否一致* */if (res.err_msg == "调用支付JSAPI缺少参数：total_fee") {}})
}
// 检测支付环境中的 WeixinJSBridge
if (typeof WeixinJSBridge == "undefined") {if (document.addEventListener) {document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);} else if (document.attachEvent) {document.attachEvent('WeixinJSBridgeReady', onBridgeReady);document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);}
} else {this.onBridgeReady();
}