前端微信支付

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

一、获取openId

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

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

2、微信网页授权

（1）第一步获取code

构建完上面的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文件

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接口列表
  });

三、调用微信支付接口

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

  官方文档：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://www.cnblogs.com/mxnl/p/13702551.html