前端微信支付

简单在这里记录一下微信支付的大概流程 ，不怎么精细 有点粗糙

一、获取openId

1、在微信公众平台配置相关信息，具体按照微信官方文档步骤进行配置

  文档地址：https://developers.weixin.qq.com/doc/offiaccount/Getting_Started/Overview.html

2、微信网页授权

（1）第一步获取code

参数	是否必填	说明
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了。

（2）通过code换取网页授权access_token

所以前端负责拿到code，把code传给后台，后台在用code请求微信获取access_token的接口，请求正确时微信会返回access_token，同时也会返回openid，

二、使用JSSDK

微信JS-SDK说明文档:

  文档地址：https://developers.weixin.qq.com/doc/offiaccount/Getting_Started/Overview.html

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

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

2、引入JS文件

H5项目使用微信sdk
在需要调用JS接口的页面引入如下JS文件

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

vue.js 项目使用微信sdk

安装微信sdk

  npm install weixin-js-sdk --save

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

  import wx from 'weixin-js-sdk'

通过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

三、调用微信支付接口

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

  官方文档：JSAPI支付步骤:https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_3

  发起一个微信支付请求：微信JS-SDK说明文档 :https://developers.weixin.qq.com/doc/offiaccount/Getting_Started/Overview.html

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

和注入权限配置同理，这些参数除了回调函数以外都需要后台生成和调用微信接口获取，具体可以看微信支付的业务流程
微信支付业务流程：https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_4

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