vue调用微信jssdk，引用分享接口

首先安装jssdk

npm install weixin-js-sdk --save-dev

然后在新建一个公共的js文件，比如share.js

在share.js中引入weixin-js-sdk

import wx from 'weixin-js-sdk';

在调用微信的接口之前要先获取他们的appid，timestamp，nonceStr等授权参数，传递参数为当前的url

 var href = window.location.href;
    const that = this;
    axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
    var params = new URLSearchParams();
    params.append('url', href)
    axios({
        method: 'post',
        url: "/share",
        data: params
    })
        .then(res => {
            wxshare(res.data, "");
        });

上面的wxshare()是接下来要进行的操作：

首先要wx.config();

function wxshare(data, url) {
    var url = window.location.href; //分享的文章地址
    var appId = data.data.appid;
    var timestamp = data.data.timestamp;
    var nonceStr = data.data.nonceStr;
    var signature = data.data.signature;
    wx.config({
        beta: true,
        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: appId, // 必填，公众号的唯一标识
        timestamp: timestamp, // 必填，生成签名的时间戳
        nonceStr: nonceStr, // 必填，生成签名的随机串
        signature: signature, // 必填，签名，见附录1
        // jsApiList: ["onMenuShareTimeline", "onMenuShareAppMessage"] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
        jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline']
    });

    wx.ready(function () {

        //分享朋友圈
        wx.onMenuShareTimeline({
            title: titles, // 分享标题
            desc: descs, // 分享描述
            link: window.location.href, // 分享链接
            imgUrl: imgurls, // 分享图标
            success: function () {
                // 用户确认分享后执行的回调函数
            },
            cancel: function () {
                // 用户取消分享后执行的回调函数
            }
        });
        // 分享好友
        wx.onMenuShareAppMessage({
            title: titles, // 分享标题
            desc: descs, // 分享描述
            link: url, // 分享链接
            imgUrl: imgurls, // 分享图标
            type: "", // 分享类型,music、video或link，不填默认为link
            dataUrl: "", // 如果type是music或video，则要提供数据链接，默认为空
            success: function () {
            },
            cancel: function () {
                // 用户取消分享后执行的回调函数
            }
        });
    });
}

最后在js 尾部暴露这个weixinshare函数：

export default wxshare

然后再需要用到分享的页面上，引入share.js，

import wxshare from '@/assets/share.js';

然后调用

 var imgurl = res.data.data.cookbookPic;
      var title =  res.data.data.cookbookName;
      var desc = res.data.data.subhead;
      weixinshare(imgurl,title,desc);

我完成上面全部步骤分享的时候，图片，标题，副标题分享都没有显示。。

据说上面步骤全部完成之后，要注意将页面域名添加微信公众号白名单。有实现的小伙伴请告诉我一下。谢谢。