vue 接入微信sdk

!微信分享只有打包上传服务器才会生效

//wx-sdk
import api from '../api/api'
const jsApiList = ['checkJsApi', 'onMenuShareTimeline', 'onMenuShareAppMessage']
export const WxSdk = {
    getWeChatAuthorizationAndShare: function (WxShareData) {
        var _url = location.href.split('#')[0]
        console.log(api)
        api.wxSDk({  //从后端获取签名
                shareUrl: _url
            }).then(res => {
                console.log(res.data)
                // wxSDk(_url).then(res => {
                if (res.code == 0) {
                    var overtime = res.data.expire_seconds + '000' //获取到的过期时间
                    //防止signature过期 两小时过期一次 获取后台给的秒数重新请求一次
                    //   let timer = null
                    //   clearTimeout(timer)  //清除定时器 （防止每次弹窗创建一次新的定时器）
                    setTimeout(() => {
                        WxSdk.getWeChatAuthorizationAndShare(WxShareData);
                    }, overtime)
                    // 请求接口成功后，
                    // 配置config
                    wx.config({
                        // 开启调试模式时,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                        debug: false,
                        // 后台返回之前获取的appId
                        appId: res.data.appId,
                        // 必填，生成签名的时间戳
                        timestamp: res.data.timestamp,
                        // 必填，生成签名的随机串
                        nonceStr: res.data.nonceStr,
                        // 必填，签名，见附录1
                        signature: res.data.signature,
                        // 必填，需要使用的JS接口列表，所有JS接口列表见附录3
                        jsApiList: [
                            'checkJsApi',
                            'onMenuShareTimeline', //1.0分享到朋友圈
                            'onMenuShareAppMessage', //1.0 分享到朋友
                            'onMenuShareQQ',
                            'onMenuShareQZone',
                            'translateVoice',
                            'updateAppMessageShareData', //1.4 分享到朋友 QQ
                            'updateTimelineShareData', //1.4分享到朋友圈、Qzone
                        ]
                    });

                    // 微信检查接口列表
                    wx.checkJsApi({
                        jsApiList: jsApiList, // 需要检测的JS接口列表
                        success: function (res) {
                            //   console.log(res);
                        }
                    });


                    // 页面加载完成后用户就有可能调用微信的分享，所以当页面ready 完后就加载
                    wx.ready(function () {
                        var ShareTimelineData = {
                            title: WxShareData.title,
                            // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                            link: WxShareData.linkurl,
                            desc: WxShareData.desc,
                            // 分享图标
                            imgUrl: WxShareData.img,
                            // 用户确认分享后执行的回调函数
                            success: function (res) {
                                console.log('分享回调函数');
                            },
                            // 用户取消分享后执行的回调函数
                            cancel: function () {
                                console.log('取消分享回调函数');
                            }
                        }

                        // 分享到朋友圈
                        wx.onMenuShareTimeline(ShareTimelineData);

                        //分享到朋友圈1.4
                        wx.updateTimelineShareData(ShareTimelineData);

                        // 分享好友
                        wx.onMenuShareAppMessage(ShareTimelineData);


                        //分享qq
                        wx.onMenuShareQQ(ShareTimelineData);

                        //分享空间
                        wx.onMenuShareQZone(ShareTimelineData);

                        // 分享好友1.4
                        wx.updateAppMessageShareData(ShareTimelineData);
                        // 分享多个地址时，可统一传入参数，如 wx.onMenuShareAppMessage(shareData)
                    });
                    // 微信预加载失败回调
                    wx.error(function (res) {
                        console.log(res);
                    });
                }
            })
            .catch(err => {
                console.log(err)
            });

    }
};

//one.vue 组件
import { WxSdk } from '../commonJs/wx-sdk.js'; //引入

methods：{
  wxShare() {// 微信分享sdk
      var title = this.stateDetailDtat.postVo.title;
      var desc = this.stateDetailDtat.postVo.content;
      let url = window.location;
      let full_url = url.origin + url.pathname + '#' + 'shareStateDetails?postId=' + this.emitStateId.postId;
      var WxShareData = {
        title: title,
        desc: desc,
        img: this.stateDetailDtat.postVo.imgList[0] + '?x-oss-process=image/resize,m_fixed,h_200,w_200',
        linkurl: full_url //分享链接
      };
      var _url = location.href.split('#')[0];
      WxSdk.getWeChatAuthorizationAndShare(WxShareData);
    },
}