vue自定义微信分享接口,不需要安装npm包，直接引用即可！（引用了第三方包被老大说了一顿，不推荐引用第三方插件）

这段时间公司需要做一个分享活动，需要自定义微信分享接口内容，并且链接上要带上一些参数，也看了许多别人的博客感觉引入一些第三方插件虽然可行，但是第三方插件不是很多人使用（怕不怎么好）就直接放弃了！其实懂了之后还是蛮简单的！

注意了微信分享内容里面不能带红包，现金，奖金等字眼！另外http或者https也要注意一下不然无法实现效果

1.引入引入JS文件

https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115

引入官方微信jssdk直接引入即可（微信文档里有步骤，一步一步走就好）

直接引入全局的(index.html方便调用）

<!--引入官方微信js-sdk-->

<script type="text/javascript" src="http://res2.wx.qq.com/open/js/jweixin-1.4.0.js"></script>

------------------------------------------------------------------------------------------------------------------

2.新建一个wxapi.js文件

import * as wechatService from '@@/service/wechatService'//后台传过来的参数接口

const wxApi = {
  /**
   * [wxRegister 微信Api初始化]
   * @param  {Function} callback [ready回调函数]
   */
  async wxRegister(callback) {
    const localParam = location.href.split('#')[0];//当前地址
    const res = await wechatService.wxShareData({localParam: localParam});//这里根据你接口的返回值来使用
    if (res) {
      let data = res // PS: 这里根据你接口的返回值来使用
      wx.config({
        debug: false, // 开启调试模式
        appId: data.appid, // 必填，公众号的唯一标识
        timestamp: data.timestamp, // 必填，生成签名的时间戳
        nonceStr: data.nonce_str, // 必填，生成签名的随机串
        signature: data.sign, // 必填，签名，见附录1
        jsApiList: [
          'onMenuShareAppMessage', // 获取“分享给朋友”按钮点击状态及自定义分享内容接口
          'onMenuShareTimeline' // 获取“分享到朋友圈”按钮点击状态及自定义分享内容接口
        ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
      })
      wx.ready((res) => {
        // 如果需要定制ready回调方法
        if (callback) {
          callback()
        }
      })
    }
  },
  /**
   * [ShareTimeline 微信分享到朋友圈]
   * @param {[type]} option [分享信息]
   * @param {[type]} success [成功回调]
   * @param {[type]} error   [失败回调]
   */
  ShareTimeline(option) {
    wx.onMenuShareTimeline({
      title: option.title, // 分享标题
      link: option.link, // 分享链接
      imgUrl: option.imgUrl, // 分享图标
      success() {
        // 用户成功分享后执行的回调函数
        option.success()
      },
      cancel() {
        // 用户取消分享后执行的回调函数
        option.error()
      }
    })
  },
  /**
   * [ShareAppMessage 微信分享给朋友]
   * @param {[type]} option [分享信息]
   * @param {[type]} success [成功回调]
   * @param {[type]} error   [失败回调]
   */
  ShareAppMessage(option) {
    wx.onMenuShareAppMessage({
      title: option.title, // 分享标题
      desc: option.desc, // 分享描述
      link: option.link, // 分享链接
      imgUrl: option.imgUrl, // 分享图标
      success() {
        // 用户成功分享后执行的回调函数
        option.success()
      },
      cancel() {
        // 用户取消分享后执行的回调函数
        option.error()
      }
    })
  }
}
export default wxApi

------------------------------------------------------------------------------------------------------------------

因为业务要求只需要两个方法分享到微信朋友圈，分享给微信好友就只做了两个

3.在vue页面里面引用即可，然后自定义内容和标题

import wxapi from '@@/util/wx/wxapi'//引入js文件

mounted() {
  wxapi.wxRegister(this.wxRegCallback)
},

methods: {
 // 用于微信JS-SDK回调
  wxRegCallback() {
    this.wxShareTimeline()
    this.wxShareAppMessage()
  },

  wxShareTimeline() {
    // 微信自定义分享到朋友圈
    let option = {
      title: '活动分享', // 分享标题, 请自行替换
      link: 'http://baidu.com?' + 'memberId=' + this.memberId + '&channel=8', // 分享链接，根据自身项目决定是否带参
      imgUrl: 'src/images/ETH3.png', // 分享图标, 请自行替换，需要绝对路径
      success: () => {
        //alert('分享成功')
      },
      error: () => {
        //alert('已取消分享')
      }
    }
    // 将配置注入通用方法
    wxapi.ShareTimeline(option)
  },
  wxShareAppMessage() {
    // 微信自定义分享给朋友
    let option = {
      title: '活动分享', // 分享标题, 请自行替换
      desc: '从本月1号起！', // 分享描述, 请自行替换
      link: 'http://baidu.com?' + 'memberId=' + this.memberId + '&channel=8', // 分享链接，根据自身项目决定是否带参
      imgUrl: 'src/images/ETH3.png', // 分享图标, 请自行替换，需要绝对路径
      success: () => {
        //alert(option.link)
      },
      error: () => {
        //alert('已取消分享')
      }
    }
    // 将配置注入通用方法
    wxapi.ShareAppMessage(option)
  },

}