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()
复制代码