vue開發（七）微信JS-SDK入門

以下內容是根據微信公衆平臺開發者文檔及實際項目中代碼總結而來

一、綁定域名
先登錄微信公衆平臺進入“公衆號設置”的“功能設置”裏填寫“JS接口安全域名”。如果你使用了支付類接口，請確保支付目錄在該安全域名下，否則將無法完成支付。

備註：登錄後可在“開發者中心”查看對應的接口權限。
二、引入JS
①在需要調用JS接口的頁面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.0.0.js

請注意，如果你的頁面啓用了https，務必引入 https://res.wx.qq.com/open/js/jweixin-1.0.0.js ，否則將無法在iOS9.0以上系統中成功使用JSSDK

如需使用搖一搖周邊功能，請引入 jweixin-1.1.0.js

備註：支持使用 AMD/CMD 標準模塊加載方法加載
②通過npm引入

npm install weixin-js-sdk

三、通過config接口注入權限驗證配置
所有需要使用JS-SDK的頁面必須先注入配置信息，否則將無法調用（同一個url僅需調用一次，對於變化url的SPA的web app可在每次url變化時進行調用,目前Android微信客戶端不支持pushState的H5新特性，所以使用pushState來實現web app的頁面會導致簽名失敗，此問題會在Android6.2中修復）。
四、通過ready接口處理成功驗證
config信息驗證後會執行ready方法，所有接口調用都必須在config接口獲得結果之後，config是一個客戶端的異步操作，所以如果需要在頁面加載時就調用相關接口，則須把相關接口放在ready函數中調用來確保正確執行。對於用戶觸發時才調用的接口，則可以直接調用，不需要放在ready函數中。
五、通過error接口處理失敗驗證
// config信息驗證失敗會執行error函數，如簽名過期導致驗證失敗，具體錯誤信息可以打開config的debug模式查看，也可以在返回的res參數中查看，對於SPA可以在這裏更新簽名。

import axios from 'axios'
import wx from 'weixin-js-sdk'
function getJSSDK(shareUrl, dataForWeixin) {
// 'http://www.hashclub.net/front/wechat/getconfig'
  axios.post(後臺接口, {
    url:shareUrl
  }).then(res => {
    console.log(res.data);
    wx.config({
      debug: true, // 開啓調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時纔會打印。
      appId: res.data.appid, // 必填，公衆號的唯一標識
      timestamp: res.data.timestamp, // 必填，生成簽名的時間戳
      nonceStr: res.data.nonceStr, // 必填，生成簽名的隨機串
      signature: res.data.signature, // 必填，簽名
      jsApiList: [
        debug: false,
		appId: res.appId,
		timestamp: res.timestamp,
		nonceStr: res.noncestr,
		signature: res.signature,
		jsApiList: [ // 必填，需要使用的JS接口列表
		    'hideOptionMenu',
		    'chooseImage', // 選中圖片
		    'previewImage', // 預覽圖片
		    'uploadImage', // 上傳圖片
		    'getLocation', // 獲取地理位置接口
		    'showOptionMenu',
		    'onMenuShareTimeline',
		    'onMenuShareAppMessage',
		    'onMenuShareQQ',
		    'onMenuShareWeibo',
		    'onMenuShareQZone'
      ]
    })
    wx.error(function (res) {
		console.log('微信簽名錯誤進入', res.errMsg)
	})
	wx.ready(function () {
		console.log('簽名成功')
   	})

六、可將分享api統一配置一下

// import ImageType
import wx from 'weixin-js-sdk'
/**
 * 有關分享的配置
 * @param title 分享標題
 * @param des 描述
 * @param link 分享鏈接
 * @param imgUrl 分享圖標
 * @param shareSuccessCallBack 分享成功的回調
 */
export function shareConfig (title, des, link, imgUrl, shareSuccessCallBack) {
  let successCb = function () {}
  if (shareSuccessCallBack) {
    successCb = shareSuccessCallBack
  }
  /**
   * 分享到朋友圈
   */
  wx.onMenuShareTimeline({
    title: title, // 分享標題
    link: link, // 分享鏈接，該鏈接域名或路徑必須與當前頁面對應的公衆號JS安全域名一致
    imgUrl: imgUrl, // 分享圖標
    success: () => {
      console.log('分享到朋友圈成功')
      successCb()
    }
  })
  /**
   * 分享給朋友
   */
  wx.onMenuShareAppMessage({
    title: title, // 分享標題
    desc: des, // 分享描述
    link: link, // 分享鏈接，該鏈接域名或路徑必須與當前頁面對應的公衆號JS安全域名一致
    imgUrl: imgUrl, // 分享圖標
    type: 'link', // 分享類型,music、video或link，不填默認爲link
    dataUrl: '', // 如果type是music或video，則要提供數據鏈接，默認爲空
    success: () => {
      console.log('分享給朋友成功')
      successCb()
    }
  })
  /**
   * 分享到QQ
   */
  wx.onMenuShareQQ({
    title: title, // 分享標題
    desc: des, // 分享描述
    link: link, // 分享鏈接
    imgUrl: imgUrl, // 分享圖標
    success: () => {
      console.log('分享到QQ成功')
      successCb()
    }
  })
  /**
   * 分享到騰訊微博
   */
  wx.onMenuShareWeibo({
    title: title, // 分享標題
    desc: des, // 分享描述
    link: link, // 分享鏈接
    imgUrl: imgUrl, // 分享圖標
    success: function () {
      console.log('分享到騰訊微博成功')
      successCb()
    }
  })
  /**
   * 分享到QQ空間
   */
  wx.onMenuShareQZone({
    title: title, // 分享標題
    desc: des, // 分享描述
    link: link, // 分享鏈接
    imgUrl: imgUrl, // 分享圖標
    success: () => {
      console.log('分享到QQ空間成功')
      successCb()
    }
  })
}

七、vue項目中使用

import {shareConfig} from '../../utils/shareConfig'
methods: {
	shareConfigInfo (title, shareDes, shareUrl, shareImg) {
      console.log('分享內容：', title, shareDes, shareUrl, shareImg)
      wx.ready(() => {
        shareConfig(`${title}`, shareDes, shareUrl, shareImg, this.shareCallBack)
      })
    },
    shareCallBack () {
      console.log('分享成功')
    }
}