vue 中使用微信分享接口（簡單實用）

前言

開發微信小程序時，基本上都要接入微信的SDK，而微信也提供了非常多的接口供我們去完成我們想要的功能。微信分享功能常常是我們在開發中常見的需求之一，本文將圍繞微信分享接口使用展開，給自己以後碰到需求是查閱的同時，也希望對需要的朋友提供幫組。

封裝微信分享接口

開始之前大家可以先讀一讀官方微信公衆號的接入文檔，畢竟官方的纔是最權威的。

安裝

 npm install weixin-js-sdk --save

引入

一般我會在src/common/js目錄下新建weixinSDK.js(可憑個人習慣自行創建到相應位置)。weixinSDK.js用來封裝我們的分享接口。

import {httpGet} from 'api/api' // 引入axios的http請求
import address from '../../api/apiAdd.js' // 引入請求的url路徑
import wx from 'weixin-js-sdk' // 引入微信SDK
import {commFunc} from "./util";引入工具函數

權限驗證

接入微信接口的最主要也是最重要一步步就是填寫下面這些信息，填完這些信息之後，基本就好了。

/**
 * @param {data} 後端返回的基本配置數據
 * @param {param} 頁面傳過來的數據
 */
function initAPIs(data,param) {
  wx.config({
    debug: false, // 開啓調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時纔會打印。
    appId: data.appId, // 必填，公衆號的唯一標識
    timestamp: data.timestamp, // 必填，生成簽名的時間戳
    nonceStr: data.nonceStr, // 必填，生成簽名的隨機串
    signature: data.signature,// 必填，簽名
    jsApiList: param.APIs // 必填，需要使用的JS接口列表
  })
  ...
}

上面這些信息通常是通過後端接口來獲取的，向後端請求數據的方法如下。

注意address.weChatSignCheck是封裝在apiAdd.js中的url, httpGet是api.js中的axios封裝。

/**
 * @param {param} 頁面傳過來的數據
 */
function sign(param) {
  var pageUrl = window.location.href
  httpGet(address.weChatSignCheck + '?pageUrl=' +pageUrl).then((res) => {
  param.downloadUrl = res.data.downloadUrl
  initAPIs(res.data,param)
  })
}

這裏要注意的就是url的問題，如果url沒有正確傳遞，後端也會返回信息，但是簽名信息會是錯誤的。完整url指的是：'http(s)://'部分，以及'？'後面的GET參數部分,但不包括'#'hash後面的部分。可以通過location.href來獲取。

注意： 如果你的vue項目，路由沒有開啓history模式,也就是你的url上面包含“#”，這個時候要從後端正確獲取簽名，就需要去掉url上#後面的字符。（url去掉'#'hash部分，可用location.href.split('#')[0]）

處理驗證結果

這裏通過ready接口處理成功驗證。當然error接口是處理失敗驗證，這裏可以不做處理，因爲我在配置時候將debug設爲false。

/**
 * @param {data} 後端返回的基本配置數據
 * @param {param} 頁面傳過來的數據
 */
function initAPIs(data,param) {
... 
 wx.ready(function () {
   if (commFunc.isNotEmpty(param.callback)) {
    share(param.callback)
   }
  })
}

上面代碼中commFunc.isNotEmpty()方法主要用來判斷前臺頁面參數param.callback是否爲空，如果部位空，則將參數傳進使用share()方法封裝的分享模板中。

判斷指定JS接口

checkJsApi接口是客戶端6.0.2新引入的一個預留接口，主要同來判斷當前客戶端版本是否支持指定JS接口。

/**
 * @param {data} 後端返回的基本配置數據
 * @param {param} 頁面傳過來的數據
 */
function initAPIs(data,param) {
... 
wx.checkJsApi({
    jsApiList:param.APIs,
    success: function (res) {
      return res
    }
  })
}

分享內容封裝

將要分享的內容分裝成tempParam對象，然後傳入分享方法裏。

/**
 * @param {param} 頁面傳過來的數據
 */
export function share(param) {
  var title = param.title
  var imgUrl = param.imgUrl
  var description =param.description
  var url=param.url
  var successMethod = param.successMethod
  var tempParam = {
    'title': title, // 分享標題
    'desc': description, // 分享描述
    'link': url, // 分享鏈接
    'imgUrl': imgUrl, // 分享圖標
    success: successMethod // 設置成功信息
  };

分享方法調用

根據要分享到具體哪裏，調用不同的方法。

//分享給朋友
wx.onMenuShareAppMessage(tempParam);
//分享給朋友圈
wx.onMenuShareTimeline(tempParam);

需要注意的是，原有的 wx.onMenuShareTimeline、wx.onMenuShareAppMessage接口，即將廢棄。請儘快遷移使用客戶端6.7.2及JSSDK 1.4.0以上版本支持的 wx.updateAppMessageShareData、wx.updateTimelineShareData接口。

//分享給朋友
wx.updateAppMessageShareData(tempParam);
//分享給朋友圈
wx.updateTimelineShareData(tempParam);

具體使用方法

/**
 * @param {param} 頁面傳過來的數據
 */
export function init(param) {
  if (!param) {
    return
  }
  sign(param)
}

這裏使用init方法給頁面調用分享功能。

頁面調用方法

<template>
    ...
</template>
<script>
import { init } from 'common/js/weiXinSDK'
import wx from 'weixin-js-sdk'
let origin = window.location.origin
export default {
    mode: 'history',
    data() {
      return {
        imgUrl: '../../common/image/axa-logo.png'
      }
    },
    created() {
      init({
        APIs: ['hideOptionMenu', 'hideAllNonBaseMenuItem', 'showMenuItems', 'hideMenuItems', 'onMenuShareTimeline', 'onMenuShareAppMessage'],
        callback: {
          'title': '微信分享',
          'imgUrl': this.imgUrl,
          'description': '分享',
          'url': origin + '/#/produtList?isShare=1&openId=' + this.$store.state.openId,
          successMethod: ''
        }
      })
<script>

上面代碼APIs根據自己的實際場景自行配置。

分享接口基本完成，分享接口的完整代碼

weixinSDK.js完整代碼奉上：

import {httpGet} from 'api/api'
import address from '../../api/apiAdd.js'
import wx from 'weixin-js-sdk'
import {commFunc} from "./util";

// 分享內容填充和調用分享方法
export function share(param) {
  var title = param.title
  var imgUrl = param.imgUrl
  var description =param.description
  var url=param.url
  var successMethod = param.successMethod
  var tempParam = {
    'title': title,
    'desc': description,
    'link': url,
    'imgUrl': imgUrl,
    success: successMethod
  };
  //分享給朋友
  wx.onMenuShareAppMessage(tempParam);
  //分享給朋友圈
  wx.onMenuShareTimeline(tempParam);
}

// 頁面調用分享功能的方法
export function init(param) {
  if (!param) {
    return
  }
  sign(param)
}

// 向後端請求權限驗證配置的基本數據
function sign(param) {
  var pageUrl = window.location.href
  httpGet(address.weChatSignCheck + '?pageUrl=' +pageUrl).then((res) => {
  param.downloadUrl = res.data.downloadUrl
  initAPIs(res.data,param)
  })
}
// 權限驗證數據填充
function initAPIs(data,param) {
  wx.config({
    debug: false, // 開啓調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時纔會打印。
    appId: data.appId,
    timestamp: data.timestamp,
    nonceStr: data.nonceStr,
    signature: data.signature,
    jsApiList: param.APIs
  })
  // 驗證成功後執行的方法
  wx.ready(function () {
   if (commFunc.isNotEmpty(param.callback)) {
     console.log(param.callback)
    share(param.callback)
   }
  })
  // 判斷客戶端是否支持指定js的接口
  wx.checkJsApi({
    jsApiList:param.APIs,
    success: function (res) {
      return res
    }
  })
}

結語

希望這篇文章可以讓你少踩點坑，碼字不易，如果喜歡，就給個❤❤吧。感謝你的支持。