今天来说说,微信公众号支付。本人刚做完微信公众号支付项目，所以想趁热打铁赶紧温习一下，若有觉得不对的地方，大家可以指出，我们共同学习。
前言：公众号支付是用户在微信中打开商户的H5页面，商户在H5页面通过调用微信支付提供的JSAPI接口调起微信支付模块完成支付。前期准备要想在微信公众号上完成支付就要有着两个账号：（1）已认证微信公众的服务号,而且开通微信支付功能（2）微信商户平台账号。两个账号可能都需要是企业版，因为有不少信息需要备案之类的。（要把两个账号密码记好哦 !）
参考链接 ：微信开发文档
一、微信公众号支付参数
公众号的APPID： 例wxeq*********09
APPSECEPT : c241***************769c2
商户ID (MchID) ：15******01
API密钥：test************(API密钥在商户平台的账户中心下:需要用户自行下载证书及安装)。
二、基本配置
请确保实际支付时的请求目录与后台配置的目录一致
在微信商户平台（pay.）设置您的JSAPI支付支付目录，设置路径：商户平台-->产品中心-->开发配置，如图7.7所示。JSAPI支付在请求支付的时候会校验请求来源是否有在商户平台做了配置，所以必须确保支付目录已经正确的被配置，否则将验证失败，请求支付不成功。
设置授权域名
开发JSAPI支付时，在统一下单接口中要求必传用户openid，而获取openid则需要您在公众平台设置获取openid的域名，只有被设置过的域名才是一个有效的获取openid的域名，否则将获取失败
三、流程
点击支付按钮 =>
1、发起后台请求(请求参数 例:支付金额、支付类型、说明等) =>
2、后台生成商户订单、调用微信统一下单API() 并返回前端支付所需参数params=>
3、前端收到后台给的参数 params 包含appId、timeStamp、nonceStr等。调用JSAPI接口请求支付（此过程是前端与微信交互） =>
4、前端根据微信返回的支付结果做出提示，微信会将支付结果通知后台
5、前端向后台发起请求 判断是否支付成功
下面的代码 是我收到params参数开始的
params 参数(appId、timeStamp、nonceStr、package、signType，参数区分大小写。）
if (typeof window.WeixinJSBridge === 'undefined') {if (document.addEventListener) {document.addEventListener('WeixinJSBridgeReady', function () { onBridgeReady(params) }, false)} else if (document.attachEvent) {document.attachEvent('WeixinJSBridgeReady', function () { onBridgeReady(params) })document.attachEvent('onWeixinJSBridgeReady', function () { onBridgeReady(params) })}} else {onBridgeReady(params)}onBridgeReady(obj) {let that = thislet parmas = objwindow.WeixinJSBridge.invoke("getBrandWCPayRequest",{appId: parmas.appId, // 公众号名称，由商户传入timeStamp: parmas.timeStamp, // 时间戳，自1970年以来的秒数nonceStr: parmas.nonceStr, // 随机串package: parmas.package,signType: parmas.signType, // 微信签名方式：paySign: parmas.paySign // 微信签名},function(res) {if(res.err_msg=="get_brand_wcpay_request:fail"){that.$weui.dialog({title: "提示",content: "支付失败",buttons: [{label: "确定",type: "primary"}]}); //支付失败 通知服务器端 ajaxSubmit(that.$http,payFail,"POST", {dealRecordId:that.dealRecordId},resData => {}); }else if(res.err_msg=="get_brand_wcpay_request:cancel"){that.$weui.dialog({title: "提示",content: "取消支付",buttons: [{label: "确定",type: "primary"}]});//支付取消 通知服务器端 ajaxSubmit(that.$http,payFail,"POST", {dealRecordId:that.dealRecordId},resData => {}); }else if(res.err_msg == "get_brand_wcpay_request:ok") { //支付成功 //查看服务端该订单是否支付成功 支付结果以后台为准ajaxSubmit(that.$http,payInquire,"get", {dealRecordId:that.dealRecordId},resData => {let user = JSON.parse(localStorage.getItem("userInfo"));if(resData.result== 0){user.userInfo.memberStartTime = resData.data.memberStartTimeuser.userInfo.memberEndTime = resData.data.memberEndTimeuser.userInfo.memberGrade = that.goodsNameuser.isPayFlag = truelocalStorage.setItem('userInfo',JSON.stringify(user))that.$router.push({ path: "/mine"})}else if(resData.result== 1){that.$weui.dialog({title: "提示",content: "支付失败,请稍后重试",buttons: [{label: "确定",type: "primary"}]});}else{that.$weui.dialog({title: "提示",content: "程序异常",buttons: [{label: "确定",type: "primary"}]});}});}else{that.$weui.dialog({title: "提示",content: "支付失败",buttons: [{label: "确定",type: "primary"}]});ajaxSubmit(that.$http,payFail,"POST",{dealRecordId:that.dealRecordId},resData => {}); });},
四、总结可能会遇到的坑
（1)、当前页面的 url 未注册
解决方法：如果你的支付地址是： /Wechat/Pay/Index/pay.html
那么你的支付授权目录应该添加为/Wechat/Pay/Index/（要以 / 结尾）
(2)、chooseWXPay:fail, the permission value is offline verifying
原因：这是因为微信开发者工具里面没有钱包的功能，需要真机测试支付。
（3)、下单账户与支付账户不一致
需要后台查看openId 配置
如果觉得《微信公众号 支付（JSAPI）流程》对你有帮助，请点赞、收藏，并留下你的观点哦！
