vue微信分享微信支付jssdk全局配置

時間 2020-08-19

標籤 vue 微信分享支付 jssdk 全局配置简体版

原文原文鏈接

很坑阿
在vue裏面使用jssdk前端

根據業務場景 "根據業務場景")根據業務場景

首先拿到code
把code發給後端，解析出openId和accessToken
接着把當前頁面網址發給後端，申請jsSDK的配置簽名
拿到以後再前端配置wx.config
再調用jssdk相關方法

安裝jssdk:
npm install weixin-js-sdk --save-devvue

只展現部分重要代碼

在permission.js文件裏跳轉路由的鉤子事件裏 router.beforeEach

1.首先拿到code

const openCode = getQueryString('code') ? getQueryString('code') : ''

2.把code發給後端，解析出openId和accessToken

const tokenPromisr = new Promise((resolve, reject) => {
    checkOpenId({ openCode }).then(res => {
      resolve()
    }).catch(error => {
      reject(error)
    })
  })

3.接着把當前頁面網址發給後端，申請jsSDK的配置簽名

**用Promise是由於要等拿到accessToken了再繼續**

    tokenPromisr.then(() => {
        jsSDK({
          url
        }).then(res => {
          wechatConfig(res.data)
        })
      })

4. 拿到以後再前端配置wx.config

**暫時只用了分享和支付的權限**

    export function wechatConfig(config) {
          wx.config({
            debug: false, // 開啓調試模式,調用的全部api的返回值會在客戶端alert出來，若要查看傳入的參數，能夠在pc端打開，參數信息會經過log打出，僅在pc端時纔會打印。
            appId: config.appId, // 必填，公衆號的惟一標識
            timestamp: config.timeStamp, // 必填，生成簽名的時間戳
            nonceStr: config.nonceStr, // 必填，生成簽名的隨機串
            signature: config.signature, // 必填，簽名，見附錄1
            jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline', 'chooseWXPay'] // 必填，須要使用的JS接口列表，全部JS接口列表見附錄2
          })
        }

5. 接着須要的頁面裏面去使用我在首頁用了分享還有在支付頁面用了支付

分享

export function groupWechatShare(data, cb, errorCb) {
  const img = data.pictureKeys ? data.pictureKeys[0] : ''
  const wechatState = store.getters.wechatState
  const SHARE_URL = process.env.SHARE_URL
  const IMG_URL = process.env.IMG_URL
  wx.ready(function() {
    // 分享到朋友圈
    wx.onMenuShareTimeline({
      title: data.goodsName, // 分享標題
      link: SHARE_URL, // 分享連接，該連接域名或路徑必須與當前頁面對應的公衆號JS安全域名一致
      imgUrl: IMG_URL + img, // 分享圖標
      success: function(res) {
        // 用戶確認分享後執行的回調函數
        // cb(res)
      },
      cancel: function(res) {
        // 用戶取消分享後執行的回調函數
        // errorCb(res)
      }
    })
    // 分享給朋友
    wx.onMenuShareAppMessage({
      title: data.goodsName, // 分享標題
      desc: '邀請您一塊兒拼團啊', // 分享描述
      link: SHARE_URL, // 分享連接，該連接域名或路徑必須與當前頁面對應的公衆號JS安全域名一致
      imgUrl: IMG_URL + img, // 分享圖標
      type: '', // 分享類型,music、video或link，不填默認爲link
      dataUrl: '', // 若是type是music或video，則要提供數據連接，默認爲空
      success: function(res) {
        // 用戶確認分享後執行的回調函數
        // cb(res)
      },
      cancel: function(res) {
        // 用戶取消分享後執行的回調函數
        // errorCb(res)
      }
    })
  })
}

支付

export function wexinPay(data, cb, errorCb) {
  wx.ready(function() {
    wx.chooseWXPay({
      timestamp: parseInt(data.timeStamp), // 支付簽名時間戳，注意微信jssdk中的全部使用timestamp字段均爲小寫。但最新版的支付後臺生成簽名使用的timeStamp字段名需大寫其中的S字符
      nonceStr: data.nonce_str, // 支付簽名隨機串，不長於 32 位
      package: 'prepay_id=' + data.prepay_id, // 統一支付接口返回的prepay_id參數值，提交格式如：prepay_id=***）
      signType: 'MD5', // 簽名方式，默認爲'SHA1'，使用新版支付需傳入'MD5'
      paySign: data.paySign, // 支付簽名
      success: function(res) {
        // 支付成功後的回調函數
        cb(res)
      },
      fail: function(res) {
        errorCb(res)
      }
    })
  })
  wx.error(function(res) {
    // config信息驗證失敗會執行error函數，如簽名過時致使驗證失敗，具體錯誤信息能夠打開config的debug模式查看，也能夠在返回的res參數中查看，對於SPA能夠在這裏更新簽名。
    /* alert("config信息驗證失敗");*/
  })
}