前端微信支付步骤（笔记）-CSDN博客

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

一、获取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… 参数说明：

参数	是否必填	说明
appid	是	公众号唯一标示，可以登录公众平台查看
redirect_uri	是	授权后重定向的回调链接地址（一般都是网站的首页，看具体的业务逻辑，重定向后会携带code），需要对url进行urlEncode处理（可urlEncode的网站：tool.chinaz.com/Tools/urlen…
response_type	是	返回类型,填写code（即此位置参数无需修改）
scope	是	填写snsapi_base或snsapi_userinfo。说明：snsapi_base （不弹出授权页面，直接跳转，只能获取用户openid），snsapi_userinfo （弹出授权页面，可通过openid拿到昵称、性别、所在地。并且，即使在未关注的情况下，只要用户授权，也能获取其信息）
state	否	重定向后会带上state参数，开发者可以填写a-zA-Z0-9的参数值，最多128字节（根据具体业务需求来定）
#wechat_redirect	是	无论直接打开还是做页面302重定向时候，必须带此参数

构建完上面的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接口列表
});
复制代码

参数	说明
debug	开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印
appId	必填，公众号的唯一标识，在公众平台可以查询
timestamp	必填，生成签名的时间戳
nonceStr	必填，生成签名的随机串
signature	必填，签名，可查看JS-SDK使用权限签名算法微信JS-SDK说明文档 17 附录1
jsApiList	必填，需要使用的JS接口列表，可查看微信JS接口列表: 微信JS-SDK说明文档 16 附录2

因为前端不保存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) {
        // 支付成功后的回调函数,处理项目的业务逻辑
    }
});
复制代码

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

微信支付业务流程