vue全局封装微信公众号分享模块

1.新建一个文件夹，这里我以vxshare.js文件为例。

//安装 微信JSDK插件
npm install weixin-js-sdk -D 

//安装 jquery 这里以ajax为例 (不需要的小伙伴可以使用axios 原理其实是一样的)
npm install jquery -D

// 封装分享方法
export function shareUrl(daurl) {
  var url = ''
  $.ajax({
    url: process.env.VUE_APP_BASE_API + '后端分享的API地址',
    type: 'post',
    // 是否需要设置请求头,这里不需要。
    // headers: {
    //   'Content-Type': 'text/plain'
    // },
    // 设置的是请求参数
    data: { shareUrl: daurl },
    // 用于设置响应体的类型 注意 跟 data 参数没关系！！！
    dataType: 'json',
    // eslint-disable-next-line space-before-function-paren
    success: function (res) {
      // 一旦设置的 dataType 选项，就不再关心 服务端 响应的 Content-Type 了
      // 客户端会主观认为服务端返回的就是 JSON 格式的字符串
      // res 为后端响应返回的内容 具体需要根据你项目中后端返回的内容为主!!!
      url = res.data.url
      wx.config({
        debug: false, // 开启调试模式,
        appId: res.data.appId, // 必填，企业号的唯一标识，此处填写企业号corpid
        timestamp: res.data.timestamp, // 必填，生成签名的时间戳
        nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
        signature: res.data.signature, // 必填，签名，见附录1
        jsApiList: ['onMenuShareAppMessage', 'hideMenuItems'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
      })
      wx.ready(function () {
        wx.hideMenuItems({
          menuList: [
            'menuItem:copyUrl',
            'menuItem:openWithSafari',
            'menuItem:openWithQQBrowser',
            'menuItem:originPage'
          ] // 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
        })
        wx.onMenuShareAppMessage({
          // updateAppMessageShareData
          title: '', // 分享标题
          desc: '', // 分享描述
          link: url, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          imgUrl: ``,
          success: function () {
            /*.... doing somethings */
          },
          cancel: function () {
            console.log('用户取消分享')
            // 用户取消分享后执行的回调函数
          }
        })
      })
    }
  })
}

2.其他文件引入与使用

//引入
import { shareUrl } from '@/文件存放路径/vxshare.js'
// 使用 这里最好加个异步延迟器 因为可能存在wx.config注入该当前文件分享时校验的问题
   setTimeout(()=>{
  //encodeURIComponent 将你的URL进行转译一下，因为微信分享出去后会带有多余用不到的参数
      shareUrl(encodeURIComponent('你需要分享的URL')) 
    },1000)

tips:如果不知道微信JSDK使用的话，可点击微信jsdk文档进行访问查看

原文：vue全局封装微信公众号分享模块 - 简书