微信支付 （JSSDK支付）

官方文档

微信支付 https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_7&index=6

微信授权获取code https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#58

准备工作

• 微信公众平台企业账号
• 商户号
• 开通jsapi支付权限
• 设置了页面授权域名，并且是你网站的域名地址
• 基本接口权限，尤其是jssdk部分权限，保证尽可能都开通
• https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_3

1.获取code传给后台

1.1 获取到code

1// 微信授权,得到code
2getOpendId(appId) {
3  const code = this.getQueryString('code')
4  this.code = code
5  const url = encodeURIComponent(window.location.href)
6  if (!code) {
7    window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appId}&redirect_uri=${url}&response_type=code&scope=snsapi_base&state=0#wechat_redirect`
8  } else {
9    // 这是我调用的后台接口，详见1.2
10    // 需要传入code才能获取到用户的信息
11    this.wxScope()
12  }
13},

参数说明

说明

• 我代码中的方式不弹出授权页面，直接跳转，只能获取用户openid
• 如果想弹出授权页面，设置连接中的scope值为snsapi_userinfo，可通过openid拿到昵称、性别、所在地。并且， 即使在未关注的情况下，只要用户授权，也能获取其信息

1.2 将code传给后台

1// 微信授权登陆接口
2wxScope() {
3  const code2 = {
4    code: this.code // 后台需要的code
5  }
6  qryWebAccessToken(code2).then(res => {
7    if (res.openid) {
8      this.openid = res.openid // 得到用户的openid
9    } else {
10      console.log('微信登陆失败-授权')
11      this.fail = true
12      this.wx = true
13      Toast('微信登陆失败')
14      return
15    }
16  })
17},

2. 微信支付 - JSSDK支付

2.1 引入js-weixin的模块，流程如下：

引入模块--生成签名（wx.config需要）--结合接口返回参数--唤起wxpay。

2.1.1 装包(weixin-js-sdk)，引入模块

npm i (weixin-js-sdk)

import wx from 'weixin-js-sdk'

2.1.2 生成签名（wx.config需要）

这个文件我命名 为了common.js,一会唤醒支付的时候需要用到

1import wx from 'weixin-js-sdk
2var AppId = ''
3var Timestamp = ''
4var Signature = ''
5var Noncestr = ''
6function GetSignature (callback) {
7  // qryWxSignature 这个是调用后台获取签名的接口
8  qryWxSignature({
9    url: window.location.href.split('#')[0]
10  }).then((data) => {
11    AppId = data.appId
12    Timestamp = data.timestamp
13    Signature = data.signature
14    Noncestr = data.nonceStr
15    wx.config({
16      beta: true,
17      debug: false,
18      appId: AppId,
19      timestamp: Timestamp,
20      nonceStr: Noncestr,
21      signature: Signature,
22      // 这里是把所有的方法都写出来了 如果只需要一个方法可以只写一个
23      jsApiList: [
24        'checkJsApi',
25        'onMenuShareTimeline',
26        'onMenuShareAppMessage',
27        'onMenuShareQQ',
28        'onMenuShareWeibo',
29        'hideMenuItems',
30        'showMenuItems',
31        'hideAllNonBaseMenuItem',
32        'showAllNonBaseMenuItem',
33        'translateVoice',
34        'startRecord',
35        'stopRecord',
36        'onRecordEnd',
37        'playVoice',
38        'pauseVoice',
39        'stopVoice',
40        'uploadVoice',
41        'downloadVoice',
42        'chooseImage',
43        'previewImage',
44        'uploadImage',
45        'downloadImage',
46        'getNetworkType',
47        'openLocation',
48        'getLocation',
49        'hideOptionMenu',
50        'showOptionMenu',
51        'closeWindow',
52        'scanQRCode',
53        'chooseWXPay',
54        'openProductSpecificView',
55        'addCard',
56        'chooseCard',
57        'openCard',
58        'openWXDeviceLib',
59        'closeWXDeviceLib',
60        'configWXDeviceWiFi',
61        'getWXDeviceInfos',
62        'sendDataToWXDevice',
63        'startScanWXDevice',
64        'stopScanWXDevice',
65        'connectWXDevice',
66        'disconnectWXDevice',
67        'getWXDeviceTicket',
68        'WeixinJSBridgeReady',
69        'onWXDeviceBindStateChange',
70        'onWXDeviceStateChange',
71        'onScanWXDeviceResult',
72        'onReceiveDataFromWXDevice',
73        'onWXDeviceBluetoothStateChange'
74      ]
75    })
76    wx.ready(function () {
77      console.log(callback, 'callback')
78      if (callback) callback()
79    })
80  })
81}
82export {
83  GetSignature
84}

2.1.3 结合接口返回参数--唤起wxpay

参考地址 ：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#58

1// 引入
2import { GetSignature } from '../../../../static/common'
3import wx from 'weixin-js-sdk'

1// 点击支付
2
3 payNow() {
4      var that = this
5      // GetSignature为common.js中的GetSignature内容
6      GetSignature(() => {
7        // wxpayPreOrder 为后台微信支付接口
8        wxpayPreOrder(this.payMsg).then(res => {
9          wx.chooseWXPay({
10             // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。
11             // 但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
12            timestamp: res.timeStamp, 
13            // 支付签名随机串，不长于 32 位
14            nonceStr: res.nonceStr, 
15            package: res.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
16            signType: res.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
17            paySign: res.paySign, // 支付签名
18            success: function(res) {
19              // 支付成功后的回调函数
20            },
21            fail: function(res) {
22              console.log('支付失败')
23            },
24            complete: function(res) {
25              console.log(res, 'complete')
26            }
27          })
28        })
29      })
30    }