对接了两次微信支付，第一次对接的时候没有做记录下来，这一次把要记录下来

一、获取openId

1、在微信公众平台配置相关信息，具体按照微信官方文档步骤进行配置：mp.weixin.qq.com/wiki?t=reso…

2、微信网页授权，文档：mp.weixin.qq.com/wiki?t=reso…

（1）第一步获取code 将网页地址跳转到如下链接：open.weixin.qq.com/connect/oau… 参数说明：

构建完上面的url之后，widows.location.href = 上面构建的url，如果参数填写都正确，微信授权成功之后会返回redirect_uri对应的url链接，并携带参数code，如果state也填上了，就会带上state参数 所以重定向后的url将会是：xxx.xxx.xxx?code=xxxxxx&state=xxx 这时候我们就可以拿到code了。

划重点（踩坑日常）：如果vue.js开发，路由的默认hash模式下，会给url末尾加上#号，所以微信重定向过来之后的url会是这样子：xxx.xxx.xxx?code=xxxxxx&state=xxx/#/ 所以用 window.location.search 获取不了url后面的参数，认为这是没有参数的url。。。把路由改成history模式就ok了

（2）通过code换取网页授权access_token ：access_token 不能保存在前端，一般这一步都是在后台服务器进行的，所以前端负责拿到code，把code传给后台，后台在用code请求微信获取access_token的接口，请求正确时微信会返回access_token，同时也会返回openid，因为这一步不是在前端进行的，所以就不详细写了，后台拿到openid之后，可以通过接口返回给前端，或者保存在cookie中，前端再从cookie中获取openid。

二、使用JSSDK

微信JS-SDK说明文档: mp.weixin.qq.com/wiki?t=reso…

1、绑定域名

先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。

备注：登录后可在“开发者中心”查看对应的接口权限。

2、引入JS文件

H5项目使用微信sdk

在需要调用JS接口的页面引入如下JS文件，（支持https）：res.wx.qq.com/open/js/jwe…

<script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
复制代码

如需进一步提升服务稳定性，当上述资源不可访问时，可改访问：res2.wx.qq.com/open/js/jwe… （支持https）。

<script src="http://res2.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
复制代码

备注：支持使用 AMD/CMD 标准模块加载方法加载

vue.js 项目使用微信sdk

安装微信sdk

npm install weixin-js-sdk --save
复制代码

引入微信sdk（这里我是在一个js文件里面引入微信sdk）

import wx from 'weixin-js-sdk'
复制代码

3、通过config接口注入权限配置

wx.config({
    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
    appId: '', // 必填，公众号的唯一标识
    timestamp: 0, // 必填，生成签名的时间戳
    nonceStr: '', // 必填，生成签名的随机串
    signature: '',// 必填，签名
    jsApiList: [] // 必填，需要使用的JS接口列表
});
复制代码

因为前端不保存access_token的原因，所以timestamp、nonceStr、signature都需要后台生成，appId最好也是后台返回

我这项目目前只用到微信支付，所以jsApiList:['chooseWXPay'],使用其他接口同理

三、调用微信支付接口

在发起支付请求前确保设置好支付目录

官方文档：JSAPI支付步骤

发起一个微信支付请求：微信JS-SDK说明文档 14 微信支付

wx.chooseWXPay({
    timestamp: 0, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
    nonceStr: '', // 支付签名随机串，不长于 32 位
    package: '', // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
    signType: '', // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
    paySign: '', // 支付签名
    success: function (res) {
        // 支付成功后的回调函数,处理项目的业务逻辑
    }
});
复制代码

和注入权限配置同理，这些参数除了回调函数以外都需要后台生成和调用微信接口获取，具体可以看微信支付的业务流程

微信支付业务流程

前端对接微信支付的步骤就是这样子，还有后台的一些逻辑，因为我不是做后台的，所以后台的逻辑我很多都没写

开发时遇到的问题

1、弹出微信支付的toast之后不能调起支付

可能原因

1、微信接口注入权限配置出错（没有获取到调用微信支付接口的权限）

2、签名出错