前端的微信支付（JSSDK支付）

官方文檔

微信支付

pay.weixin.qq.com/wiki/doc/ap…

微信受權獲取code

developers.weixin.qq.com/doc/offiacc…

準備工做

• 微信公衆平臺企業帳號
• 商戶號
• 開通jsapi支付權限
• 設置了頁面受權域名，而且是你網站的域名地址
• 基本接口權限，尤爲是jssdk部分權限，保證儘量都開通
• pay.weixin.qq.com/wiki/doc/ap…

1.獲取code傳給後臺

1.1 獲取到code

// 微信受權,獲得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 {
    // 這是我調用的後臺接口，詳見1.2
    // 須要傳入code才能獲取到用戶的信息
    this.wxScope()
  }
},
複製代碼

參數說明

說明

• 我代碼中的方式不彈出受權頁面，直接跳轉，只能獲取用戶openid
• 若是想彈出受權頁面，設置鏈接中的scope值爲snsapi_userinfo，可經過openid拿到暱稱、性別、所在地。而且， 即便在未關注的狀況下，只要用戶受權，也能獲取其信息

1.2 將code傳給後臺

// 微信受權登錄接口
wxScope() {
  const code2 = {
    code: this.code // 後臺須要的code
  }
  qryWebAccessToken(code2).then(res => {
    if (res.openid) {
      this.openid = res.openid // 獲得用戶的openid
    } else {
      console.log('微信登錄失敗-受權')
      this.fail = true
      this.wx = true
      Toast('微信登錄失敗')
      return
    }
  })
},
複製代碼

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,一會喚醒支付的時候須要用到

import wx from 'weixin-js-sdk var AppId = '' var Timestamp = '' var Signature = '' var Noncestr = '' function GetSignature (callback) { // qryWxSignature 這個是調用後臺獲取簽名的接口 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,
      // 這裏是把全部的方法都寫出來了 若是隻須要一個方法能夠只寫一個
      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 結合接口返回參數--喚起wxpay

參考地址 ：developers.weixin.qq.com/doc/offiacc…

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

// 點擊支付

 payNow() {
      var that = this
      // GetSignature爲common.js中的GetSignature內容
      GetSignature(() => {
        // wxpayPreOrder 爲後臺微信支付接口
        wxpayPreOrder(this.payMsg).then(res => {
          wx.chooseWXPay({
             // 支付簽名時間戳，注意微信jssdk中的全部使用timestamp字段均爲小寫。
             // 但最新版的支付後臺生成簽名使用的timeStamp字段名需大寫其中的S字符
            timestamp: res.timeStamp, 
            // 支付簽名隨機串，不長於 32 位
            nonceStr: res.nonceStr, 
            package: res.package, // 統一支付接口返回的prepay_id參數值，提交格式如：prepay_id=\*\*\*）
            signType: res.signType, // 簽名方式，默認爲'SHA1'，使用新版支付需傳入'MD5'
            paySign: res.paySign, // 支付簽名
            success: function(res) {
              // 支付成功後的回調函數
            },
            fail: function(res) {
              console.log('支付失敗')
            },
            complete: function(res) {
              console.log(res, 'complete')
            }
          })
        })
      })
    }
複製代碼