引用微信jssdk实现h5二次分享

文档

微信JS-SDK说明文档：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html

参考代码

import Vue from 'vue';

export default function (app) {
  const axios = app.$axios
  function wxShare(title = 'test_title', desc = 'test_desc', image = 'https://img2.baidu.com/it/u=3895119537,2684520677&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500', type = 'link') {
    console.log(`title------------${title}`);
    console.log(`desc------------${desc}`);
    console.log(`image------------${image}`);
    if (isWx()) {
      $nuxt.$axios.post('/GetShareSignature', {
        url: location.href
      }).then((res) => {
        returnConfig(res);
        wxShareInfo(title, desc, image, type, location.href);
      })
    }
    setMeta(title, desc, image);
  }
  Vue.prototype.$wxShare = wxShare
}

// 判断是否微信浏览器
function isWx() {
  // return navigator.userAgent.toLowerCase().indexOf('micromessenger') !== -1
  var ua = navigator.userAgent.toLowerCase();
  if (ua.match(/MicroMessenger/i) == "micromessenger") {
    return true;
  } else {
    return false;
  }
}

function returnConfig(data) {
  wx.config({
    debug: data.url.includes('debug=true') ? true : false, // 开启调试模式为true后可以通过alert弹窗将公众号签名等结果反馈出来
    appId: data.appId, // 必填，公众号的唯一标识
    timestamp: data.timeStamp, // 必填，生成签名的时间戳
    nonceStr: data.nonce, // 必填，生成签名的随机串
    signature: data.signature,// 必填，签名，见附录1
    jsApiList: [
      'updateAppMessageShareData', // 自定义“分享给朋友”及“分享到QQ”按钮的分享内容
      'updateTimelineShareData', // 自定义“分享到朋友圈”及“分享到 QQ 空间”按钮的分享内容
    ]
  });
}

function wxShareInfo(title, desc, image, type, share_url) {
  wx.ready(function () {
    //分享好友
    var shareData = {
      title: title,     // 分享标题
      desc: desc, // 分享描述
      imgUrl: image || 'https://img2.baidu.com/it/u=3895119537,2684520677&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500', // 分享图标
      type: type,// 分享类型,music、video或link，不填默认为link
      link: share_url,
      success: function () {
        // 设置成功
      }
    };

    wx.checkJsApi({
      jsApiList: ['updateAppMessageShareData'], // 需要检测的 JS 接口列表，所有 JS 接口列表见附录2,
      success: function (res) {
        // 以键值对的形式返回，可用的 api 值true，不可用为false
        // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
        wx.updateAppMessageShareData(shareData); // 自定义“分享给朋友”及“分享到QQ”按钮的分享内容
      }
    });

    wx.checkJsApi({
      jsApiList: ['updateTimelineShareData'], // 需要检测的 JS 接口列表，所有 JS 接口列表见附录2,
      success: function (res) {
        // 以键值对的形式返回，可用的 api 值true，不可用为false
        // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
        wx.updateTimelineShareData(shareData); // 自定义“分享到朋友圈”及“分享到 QQ 空间”按钮的分享内容
      }
    });

  });
}

function setMeta(title, desc, image) {
  addMeta('name', title);
  addMeta('image', image|| 'https://img2.baidu.com/it/u=3895119537,2684520677&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500');
  addMeta('description', desc);
}

// 手动添加mate标签
const addMeta = (name, content) => {
  const meta = document.createElement('meta');
  meta.name = name;
  meta.content = content;
  meta.itemprop = name;
  $nuxt.$nextTick(() => {
    document.getElementsByTagName('head')[0].appendChild(meta);
  })
};

注意事项

• 由于苹果手机的限制，请用https的形式引入js文件：https://res.wx.qq.com/open/js/jweixin-1.6.0.js。否则当分享链接为https形式时无法加载js文件。
• 当对话框内的链接为普通链接形式时，点击进入进行二次分享依旧是普通链接形式，这是微信为了防止恶意传播链接分享作的限制。但在公众号对话框内是不作该限制的，开发过程中可在公众号对话框内测试。
• 当图片过大时，分享卡片可能不显示图片icon