官方文檔

微信支付

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

微信授權(quán)獲取code

https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#58

準(zhǔn)備工作

• 微信公眾平臺(tái)企業(yè)賬號(hào)
• 商戶號(hào)
• 開通jsapi支付權(quán)限
• 設(shè)置了頁面授權(quán)域名，并且是你網(wǎng)站的域名地址
• 基本接口權(quán)限，尤其是jssdk部分權(quán)限，保證盡可能都開通
• https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_3

1.獲取code傳給后臺(tái)

1.1 獲取到code

// 微信授權(quán),得到code
getOpendId(appId) {
  const code = this.getQueryString('code')
  this.code = code
  const url = encodeURIComponent(window.location.href)
  if (!code) {
    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`
  } else {
    // 這是我調(diào)用的后臺(tái)接口，詳見1.2
    // 需要傳入code才能獲取到用戶的信息
    this.wxScope()
  }
},

參數(shù)說明

image

說明

• 我代碼中的方式不彈出授權(quán)頁面，直接跳轉(zhuǎn)，只能獲取用戶openid
• 如果想彈出授權(quán)頁面，設(shè)置連接中的scope值為snsapi_userinfo，可通過openid拿到昵稱、性別、所在地。并且， 即使在未關(guān)注的情況下，只要用戶授權(quán)，也能獲取其信息

1.2 將code傳給后臺(tái)

// 微信授權(quán)登陸接口
wxScope() {
  const code2 = {
    code: this.code // 后臺(tái)需要的code
  }
  qryWebAccessToken(code2).then(res => {
    if (res.openid) {
      this.openid = res.openid // 得到用戶的openid
    } else {
      console.log('微信登陸失敗-授權(quán)')
      this.fail = true
      this.wx = true
      Toast('微信登陸失敗')
      return
    }
  })
},

2. 微信支付 - JSSDK支付

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

引入模塊--生成簽名（wx.config需要）--結(jié)合接口返回參數(shù)--喚起wxpay。

2.1.1 裝包(weixin-js-sdk)，引入模塊

npm i (weixin-js-sdk)

import wx from 'weixin-js-sdk'

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

這個(gè)文件我命名 為了common.js,一會(huì)喚醒支付的時(shí)候需要用到

import wx from 'weixin-js-sdk
var AppId = ''
var Timestamp = ''
var Signature = ''
var Noncestr = ''
function GetSignature (callback) {
  // qryWxSignature 這個(gè)是調(diào)用后臺(tái)獲取簽名的接口
  qryWxSignature({
    url: window.location.href.split('#')[0]
  }).then((data) => {
    AppId = data.appId
    Timestamp = data.timestamp
    Signature = data.signature
    Noncestr = data.nonceStr
    wx.config({
      beta: true,
      debug: false,
      appId: AppId,
      timestamp: Timestamp,
      nonceStr: Noncestr,
      signature: Signature,
      // 這里是把所有的方法都寫出來了 如果只需要一個(gè)方法可以只寫一個(gè)
      jsApiList: [
        'checkJsApi',
        'onMenuShareTimeline',
        'onMenuShareAppMessage',
        'onMenuShareQQ',
        'onMenuShareWeibo',
        'hideMenuItems',
        'showMenuItems',
        'hideAllNonBaseMenuItem',
        'showAllNonBaseMenuItem',
        'translateVoice',
        'startRecord',
        'stopRecord',
        'onRecordEnd',
        'playVoice',
        'pauseVoice',
        'stopVoice',
        'uploadVoice',
        'downloadVoice',
        'chooseImage',
        'previewImage',
        'uploadImage',
        'downloadImage',
        'getNetworkType',
        'openLocation',
        'getLocation',
        'hideOptionMenu',
        'showOptionMenu',
        'closeWindow',
        'scanQRCode',
        'chooseWXPay',
        'openProductSpecificView',
        'addCard',
        'chooseCard',
        'openCard',
        'openWXDeviceLib',
        'closeWXDeviceLib',
        'configWXDeviceWiFi',
        'getWXDeviceInfos',
        'sendDataToWXDevice',
        'startScanWXDevice',
        'stopScanWXDevice',
        'connectWXDevice',
        'disconnectWXDevice',
        'getWXDeviceTicket',
        'WeixinJSBridgeReady',
        'onWXDeviceBindStateChange',
        'onWXDeviceStateChange',
        'onScanWXDeviceResult',
        'onReceiveDataFromWXDevice',
        'onWXDeviceBluetoothStateChange'
      ]
    })
    wx.ready(function () {
      console.log(callback, 'callback')
      if (callback) callback()
    })
  })
}
export {
  GetSignature
}

2.1.3 結(jié)合接口返回參數(shù)--喚起wxpay

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

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

// 點(diǎn)擊支付

 payNow() {
      var that = this
      // GetSignature為common.js中的GetSignature內(nèi)容
      GetSignature(() => {
        // wxpayPreOrder 為后臺(tái)微信支付接口
        wxpayPreOrder(this.payMsg).then(res => {
          wx.chooseWXPay({
             // 支付簽名時(shí)間戳，注意微信jssdk中的所有使用timestamp字段均為小寫。
             // 但最新版的支付后臺(tái)生成簽名使用的timeStamp字段名需大寫其中的S字符
            timestamp: res.timeStamp, 
            // 支付簽名隨機(jī)串，不長于 32 位
            nonceStr: res.nonceStr, 
            package: res.package, // 統(tǒng)一支付接口返回的prepay_id參數(shù)值，提交格式如：prepay_id=\*\*\*）
            signType: res.signType, // 簽名方式，默認(rèn)為'SHA1'，使用新版支付需傳入'MD5'
            paySign: res.paySign, // 支付簽名
            success: function(res) {
              // 支付成功后的回調(diào)函數(shù)
            },
            fail: function(res) {
              console.log('支付失敗')
            },
            complete: function(res) {
              console.log(res, 'complete')
            }
          })
        })
      })
    }