Jssdk之微信分享

如今也是比較一般用到的功能，就是經過jssdk去分享到朋友圈，QQ，微博啊，使用這個分享我也踩了很多的坑，最後仍是一個一個的解決完了，下面是如何使用引入的步驟：

1.首先安裝(可在package.json文件查看是否安裝了)

npm install weixin-js-sdk
複製代碼

2.要另外新建一個js文件，把安裝的weixin-js-sdk和axios(每一個公司都是有分享微信的網址的)引入，把咱們要分享的標題，分享描述，圖片寫上便可：

import wx from 'weixin-js-sdk'
    import axios from 'axios'
    const jsApiList = [
      'onMenuShareTimeline',
      'onMenuShareAppMessage',
      'onMenuShareQQ',
      'onMenuShareQZone',
      'onMenuShareWeibo'
    ]
    
    const isWxBroswer = () => {
      var ua = navigator.userAgent.toLowerCase()
      var isWeixin = ua.indexOf('micromessenger') !== -1
      return isWeixin
    }
    
    export const shareConfig = ({
      title = '分享的標題',
      desc = '分享的描述',
      imgUrl = '分享的圖片地址'
    }) => {
      if (!isWxBroswer()) {
        return
      }
      const link = window.location.href
      axios({
        method: 'POST',
        url: '//weixin/me/ticket', //這是公司提供的分享地址
        data: {
          base: {
            reqTime: '公司提供',
            proNo: '公司提供'
          },
          body: {
            jsurl: link
          }
        }
      }).then(response => {
        console.log(response)
        const ticket = response.data.repBody.ticket
  // console.log('ticket',ticket)
  
  wx.config({
    debug: false, // 開啓調試模式,調用的全部api的返回值會在客戶端alert出來，若要查看傳入的參數，能夠在pc端打開，參數信息會經過log打出，僅在pc端時纔會打印。
    appId: ticket.appid, // 必填，公衆號的惟一標識
    timestamp: ticket.timestamp, // 必填，生成簽名的時間戳
    nonceStr: ticket.noncestr, // 必填，生成簽名的隨機串
    signature: ticket.signature, // 必填，簽名
    jsApiList: jsApiList // 必填，須要使用的JS接口列表
  })

  wx.ready(function () {
    // 獲取「分享到朋友圈」按鈕點擊狀態及自定義分享內容接口（即將廢棄）
    wx.onMenuShareTimeline({
      title: wxShareData.title, // 分享標題
      link: cUrl, // 分享連接，該連接域名或路徑必須與當前頁面對應的公衆號JS安全域名一致
      imgUrl: wxShareData.img, // 分享圖標
      success: function() {
        // 用戶點擊了分享後執行的回調函數
      }
    })
    
    // 獲取「分享給朋友」按鈕點擊狀態及自定義分享內容接口（即將廢棄）
    wx.onMenuShareAppMessage({
      title: wxShareData.title, // 分享標題
      desc: wxShareData.desc, // 分享描述
      link: cUrl, // 分享連接，該連接域名或路徑必須與當前頁面對應的公衆號JS安全域名一致
      imgUrl: wxShareData.img, // 分享圖標
      type: '', // 分享類型,music、video或link，不填默認爲link
      dataUrl: '', // 若是type是music或video，則要提供數據連接，默認爲空
      success: function () {
        // 用戶點擊了分享後執行的回調函數
      }
    })
    
    // 獲取「分享到QQ」按鈕點擊狀態及自定義分享內容接口（即將廢棄）
    wx.onMenuShareQQ({
      title: wxShareData.title, // 分享標題
      desc: wxShareData.desc, // 分享描述
      link: cUrl, // 分享連接
      imgUrl: wxShareData.img, // 分享圖標
      success: function () {
        // 用戶確認分享後執行的回調函數
      },
      cancel: function () {
        // 用戶取消分享後執行的回調函數
      }
    })
    
    // 獲取「分享到QQ空間」按鈕點擊狀態及自定義分享內容接口（即將廢棄）
    wx.onMenuShareQZone({
      title: wxShareData.title, // 分享標題
      desc: wxShareData.desc, // 分享描述
      link: cUrl, // 分享連接
      imgUrl: wxShareData.img, // 分享圖標
      success: function () {
        // 用戶確認分享後執行的回調函數
      },
      cancel: function () {
        // 用戶取消分享後執行的回調函數
      }
    })
    
   // 自定義「分享給朋友」及「分享到QQ」按鈕的分享內容（1.4.0）
    wx.updateAppMessageShareData({
      title: wxShareData.title, // 分享標題
      desc: wxShareData.desc, // 分享描述
      link: cUrl, // 分享連接，該連接域名或路徑必須與當前頁面對應的公衆號JS安全域名一致
      imgUrl: wxShareData.img, // 分享圖標
      success: function () {
        // 設置成功
      }
    })
    
    // 自定義「分享到朋友圈」及「分享到QQ空間」按鈕的分享內容（1.4.0）
    wx.updateTimelineShareData({
      title: wxShareData.title, // 分享標題
      link: cUrl, // 分享連接，該連接域名或路徑必須與當前頁面對應的公衆號JS安全域名一致
      imgUrl: wxShareData.img, // 分享圖標
      success: function () {
        // 設置成功
      }
    })
    
    // 獲取「分享到騰訊微博」按鈕點擊狀態及自定義分享內容接口
    wx.onMenuShareWeibo({
      title: wxShareData.title,
      desc: wxShareData.desc,
      link: cUrl,
      imgUrl: wxShareData.img,
      trigger: function trigger(res) {
        //alert('用戶點擊分享到微博')
      },
      complete: function complete(res) {
        // alert(JSON.stringify(res))
      },
      success: function success(res) {
        //alert('已分享')
      },
      cancel: function cancel(res) {
        // alert('已取消')
      },
      fail: function fail(res) {
        // alert(JSON.stringify(res))
      }
    })
    })
  })
 .catch(err => {
     console.log(err)
 })
}
複製代碼

3.在vue組件引入js文件和在created調用：

import { shareConfig } from '../api/jssdk'
    
    created調用：
    this.shareConfig()
複製代碼