本篇为 JS交互微信系列篇 的第四篇 微信JSAPI支付 ，记录在微信内置浏览器内用调用微信支付过程。
JSAPI支付是用户在微信中打开商户的H5页面，商户在H5页面通过调用微信支付提供的JSAPI接口调起微信支付模块完成支付。
要拥有两个账号：
要开通产品中心的JSAPI支付。然后 产品中心=>开发配置=>支付配置=>公众号支付配置 绑定支付授权目录，写已通过ICP备案的域名。
另外，要在ip白名单中，配置测试地址ip和线上生产地址ip，不然各种回调都会失败！
由于在微信内支付需要获取用户的 openid ，要获取它则必须通过网页授权配置。在公微信公众平台中， 公众号设置=>功能设置=>网页授权域名 中按要求填写。
在支付流程方面，重点依然都在后端处理，前端方面步骤比较简单。本文只叙述前端内容。
在将要进入支付的前一页面，直接接入微信授权，然后跳转进要支付的那个页面。举个例子：有a、b两个页面，在b页面用到支付，b页面由a页面跳转而来。那么在a页面跳b页面的时候，别直接跳转b的url，而是跳转到：
https://open.weixin.qq.com/connect/oauth2/authorize?appid={appId}&redirect_uri={b.html}&response_type=code&scope=snsapi_base#wechat_redirect
我们注意到，这里有这两个需要自己写的参数： appid 和 redirect_uri ，意义是：
另外，还有一个注意的点是， b.html这个url我们要进行encode转码，不然地址解析可能会出现问题！
上一步执行完后，在微信浏览器中，我们会得到一个链接，类似：
b.html?&code={code}&state=#/
在此处，我们得到了一个code值，这就是我们获取 openid 的凭证了。
获取方法当然是把值传给后台，后台去处理啦~
在上一步中，我们拿到code值后，就可以提交一些信息给后端了，比如商品相关属性、总价等，另外加上code值，传给后端。后端一顿操作后，返回给前端。我们需要的参数如下（后端返回下面这些参数）：
上个步骤拿到需要交互微信的参数后，就开始调用微信的支付接口了，如下：
至此，调用微信JSAPI来完成在微信内的支付就完成了。
JSAPI支付是指用户在微信中打开商户的H5页面,商户在H5页面通过调用微信支付提供的JSAPI接口调起微信支付模块来完成支付。应答时间：2020-09-30，最新业务变化请以平安银行官网公布为准。[平安银行我知道]想知道更多？快来看“平安银行我知道”吧~ https://b.pingan.com.cn/paim/iknow/index.html//获取微信支付接口信息 http.post(`${api.api}/config`, { url: location.href.split("#")[0]//截取地址栏地址传到后台 }) .then((res) =>{ //获取后台返回的参数 this.appId = res.data.appId this.nonce = res.data.nonce this.signature = res.data.signature this.timestamp = res.data.timestamp //调取微信官方config接口 wx.config({ debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。 appId: this.appId, // 必填，公众号的唯一标识 timestamp: this.timestamp, // 必填，生成签名的时间戳 nonceStr: this.nonce, // 必填，生成签名的随机串 signature: this.signature,// 必填，签名 jsApiList: ['chooseWXPay'] // 必填，需要使用的JS接口列表 }) }) .catch((error) =>{ console.log(error) }) //调取后台接口，获取下单信息，并用wx.ready调取微信支付方法 var id = JSON.parse(localStorage.getItem('token')).id http.get(`${api.api}/orders?id=${id}&money=${this.total*100}&type=${0}&count=${this.date}&acount=${this.count}`) .then((res) =>{ console.log(res) wx.ready(()=>{ wx.chooseWXPay({ timestamp: res.data.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符 nonceStr: res.data.nonceStr, // 支付签名随机串，不长于 32 位 package: res.data.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*） signType: 'MD5', // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5' paySign: res.data.paySign, // 支付签名 success: (res) =>{ // 支付成功后的回调函数 this.$router.push({path:'/creditcard'}) } }) }) }) .catch((error) =>{ console.log(error) })
