参考文章

背景

一般的网页在进行相关设置时，在微信端分享的卡片如下

如要设置其头图、标题、简介则需要使用到微信的js-sdk
- 安装js-sdk
```
npm install --save weixin-js-sdk
```

封装一个分享的api (shareWx.js)

import wx from 'weixin-js-sdk'; // 微信sdk依赖
import wxApi from '@/apis/shareWx/wxApi.js'
import encrypt from '@/apis/common/encrypt.js' // 加密sha1加密Api
import utilHelper from '@/apis/utilHelper.js' // 存储了需分享的描述内容
import headerImg from '@/res/common/logo_guan.png'
// 对象按照key的ascll码顺序排序
function sortObjKeyByAscll(obj) {
  var keysArr = Object.keys(obj).sort();
  var sortObj = {};
  for (var i in keysArr) {
    sortObj[keysArr[i]] = obj[keysArr[i]];
  }
  return sortObj;
}

// 要用到微信API
let getJSSDK = async () => {
  // 分享链接的配置
    
  // 生产环境和开发环境下不同的图片路径
  let nowImgPath = process.env.NODE_ENV == "production" ? `${location.href.split('/index.html#')[0]}/${headerImg}` : location.origin + '/' + headerImg;

  let dataForWeixin = {
    title: document.title, // 分享标题
    desc: utilHelper.scope.shareDesc, // 分享内容
    url: location.href, // 分享链接
    img: nowImgPath
  }


  // 需要调用的js接口
  const jsApiList = [
    'checkJsApi',
    'onMenuShareTimeline',
    'onMenuShareAppMessage',
    'hideOptionMenu',
    'showOptionMenu',
    'shareTimeline'
  ];

  try {
    // 与后台约定的获取accessToken的节后
    let {
      data: {
        jsApiTicket
      }
    } = await wxApi.getAccessToken();

    //  排序前的对象
    let obj = {
      url: dataForWeixin.url,
      timestamp: Date.parse(new Date()).toString().substr(0, 10),
      noncestr: utilHelper.getRandomStr(16),
      jsapi_ticket: jsApiTicket
    }

    // 排序后的对象
    let afterObj = sortObjKeyByAscll(obj);


    // 组成键值对字符串
    let objStr = ''
    for (let key in afterObj) {
      objStr += `${key}=${afterObj[key]}&`
    }
    objStr = objStr.substring(0, objStr.length - 1); // 键值对字符串



    // sha1加密获得签名 一般是后台进行加密 这里用了前端加密 大家不要学
    let signature = encrypt.sha1(objStr)

    wx.config({
      debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
      appId: '你自己的应用的appid', // 必填，公众号的唯一标识
      timestamp: obj.timestamp, // 必填，生成签名的时间戳
      nonceStr: obj.noncestr, // 必填，生成签名的随机串
      signature: signature, // 必填，签名
      jsApiList, // 必填，需要使用的JS接口列表
    });
    wx.ready(function () { //需在用户可能点击分享按钮前就先调用
      // alert(123)
      wx.onMenuShareAppMessage({
        title: dataForWeixin.title, // 分享标题
        desc: dataForWeixin.desc, // 分享描述
        link: dataForWeixin.url, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
        imgUrl: dataForWeixin.img, // 分享图标
        success: function () {
          // 设置成功
          // alert(123)
        }
      })
    });
    wx.error((res) => {

      // alert(JSON.stringify(res)+"微信验证失败");
    });
  } catch (error) {

  }
}
export default {
  // 获取JSSDK
  getJSSDK,
};

在app.vue中调用

import shareWx from "@/apis/shareWx/shareWx.js";
updated() {
   shareWx.getJSSDK();
 },
mounted() {
   shareWx.getJSSDK();
 },
// 这里的思路是 每次更新时都会重新调用一次wxapi 比如进入新页面时 会修改描述和标题 这样不同页面下就分享了不同的卡片 如果有其他更优雅的方法 欢迎留言

关于调试
- 这里使用的是nat-app进行内网穿透，并将该地址设置到微信公众平台的相关位置(详细见参考文章) 直接使用ip进行分享是不行的
微信相关设置
- 见参考文章第一章已经很详细了

Vue项目设置微信分享头图、标题、简介

参考文章

背景