H5公众号项目-全局自定义微信浏览器自带分享

在工具文件夹下新建一个js文件，用来封装时间分享的函数；
一定要将页面地址发给接口，接口再返回appid等参数，后端不能越过前端直接拿到appid等参数，否则前端会报签名失败等错误

var wx = require('weixin-js-sdk');  //引入微信jssdk
import vm from '../main'

const weChat = {
    // 初始化条件，页面中调用这个方法，因为要先configå
    initWeXin(dataParams) {
        const datas = {
            Url: window.location.href.split('#')[0]
        }
        // 需要将页面地址发给后台接口，接口返回一系列config的参数，才能签名成功
        vm.$axios.post(vm.api.xxxxxxx, datas).then(res => {
            if (res.code === 200) {
                const { data } = res;
                wx.config({
                    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                    appId: data.appId, // 必填，公众号的唯一标识
                    timestamp: data.timestamp, // 必填，生成签名的时间戳
                    nonceStr: data.nonceStr, // 必填，生成签名的随机串
                    signature: data.signature, // 必填，签名
                    jsApiList: ["updateAppMessageShareData"] // 必填，需要使用Î的JS接口列表
                });
                this.shareEvent(dataParams)
            }
        })
    },
    // 微信分享
    shareEvent(dataParams) {
        if (!dataParams.desc) {
            return
        }
        var that = this;
        wx.ready(function () {
            let img_url = require('../assets/img/guan2@2x.png')
            let share_link = 'http:/xxxxx/index.html'; // 这个用来给某些分享页面的固定链接地址
            const { title, desc, link, imgUrl } = dataParams || {};
            let dataShare = {
                title: title || "标题标题",
                desc: desc || "描述描述",
                link: link || share_link,
                imgUrl: imgUrl || img_url,
                success: function () {
                    that.alert({ msg: "分享成功" });
                }
            };
            console.log('分享ready==>', dataShare)
            // // 分享给微信好友                
            wx.updateAppMessageShareData(dataShare);
        })
    }
}
export default weChat

路由表的js文件下：

在路由钩子函数中统一分享标题，这个适用固定标题的页面

router.afterEach((to, from) => {
  weChat.initWeXin({
    title: '金牌讲解 | 高品质讲解 让旅行更有料',
    desc: to.meta.desc // 分享描述
      })
})

调用页面:

这个适用于不固定标题、分享图、分享描述的页面调用

var shareDetail = []; // 接口返回分享要用的信息
        shareDetail = res.data.shareDetail; // 分享链接要用的分享信息
        // 方法调用
        weChat.initWeXin({
          title: `金牌讲解 | ${localStorage.getItem('nickname')} 邀请你听 ${shareDetail.title}`,
          desc: shareDetail.briefIntroduction, // 分享描述
          link: shareDetail.jumpLink, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          imgUrl: shareDetail.headDiagram // 分享图标
        });

在需要自定义分享内容的页面调用weChat.initWeXin（）方法