微信公众号自定义分享

代码实现

1. 引入weixin-js-sdk

// 分享
import { getWeixinInfo } from '@/api'

// 获取公众号信息
export function share () {
  const _url = window.location.href.split('#')[0] // 当前页面的url
  const { res } = getWeixinInfo({ url: _url })
  if (data.res) {
    wxConfig(res.data)
  }
}

// 微信配置方法
export function wxConfig (data) {
  wx.config({
    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
    appId: data.appId, // 必填，公众号的唯一标识
    timestamp: data.timestamp, // 必填，生成签名的时间戳
    nonceStr: data.nonceStr, // 必填，生成签名的随机串
    signature: data.signature,// 必填，签名
    jsApiList: [
      'onMenuShareAppMessage',//老版本分享接口。
      'onMenuShareTimeline',//老版本分享接口
    ] // 必填，需要使用的JS接口列表
  });

  wx.ready(function () {   //需在用户可能点击分享按钮前就先调用
    wx.onMenuShareAppMessage({
      title: '分享标题', // 分享标题
      desc: '分享描述', // 分享描述
      link: process.env.VUE_APP_AUTH, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
      imgUrl: 'https://hlwyy-test.obs-cn-shanghai.pinganyun.com/1.jpg', // 分享图标
      success: function () {
        // 设置成功
      }
    });

    wx.onMenuShareTimeline({
      title: '分享标题', // 分享标题
      link: process.env.VUE_APP_AUTH, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
      imgUrl: 'https://hlwyy-test.obs-cn-shanghai.pinganyun.com/1.jpg', // 分享图标
      success: function () {
        // 设置成功
      }
    });
  });
}

实现效果