vue实战(8)——微信二次分享及自定义菜单隐藏设置

一、引入js文件

<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>

二、微信二次分享(SDK1.2.0)

mounted () {
    this.shareWechat();
},
methods () {
    shareWechat() {
        let self = this,
            url_temp = window.location.href.split("#")[0];
        axios.post(global.api + "business-service/wechat/sign",{webUrl: url_temp}).then(function(response) {
            if(response.data.code == 1){
                let data = response.data.data
                let nonceStr = data.noncestr  // 必填，生成签名的随机串
                let timestamp = data.timestamp  //生成签名的时间戳
                wx.config({
                    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                    appId: data.appId, // 必填，服务号
                    timestamp: data.timestamp, // 必填，生成签名的时间戳
                    nonceStr: data.noncestr, // 必填，生成签名的随机串
                    signature: data.sign, // 必填，签名，见附录1
                    jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline','onMenuShareQQ','onMenuShareWeibo','onMenuShareQZone']
                });
                wx.ready(function () { 
                    var shareData = { 
                        title: self.queryData.title, 
                        desc: '吃茶去喊你一起搞事情~你来还是来还是来？', 
                        link: window.location.href,
                         imgUrl: self.queryData.bannerImage,
                     }; 
                     wx.onMenuShareAppMessage(shareData); // 分享给朋友
                     wx.onMenuShareTimeline(shareData); // 分享到朋友圈
                     wx.onMenuShareQQ(shareData);  // 分享到QQ
                     wx.onMenuShareWeibo(shareData); // 分享到腾讯微博
                     wx.onMenuShareQZone(shareData); // 分享到QQ空间
                }); 
             }
        })
        .catch(function(error) {
            console.log(error);
        });
    }
}

三、微信二次分享(SDK1.4.0)

说明：最新SDK文档1.4.0版本中即将废弃1.2.0版本的分享api，以上5中分享形式被如下2种方式取代：
引用http://res.wx.qq.com/open/js/jweixin-1.4.0.js 或http://res2.wx.qq.com/open/js/jweixin-1.4.0.js （支持https）

1. 自定义“分享给朋友”及“分享到QQ”按钮的分享内容（1.4.0）

wx.ready(function () {   //需在用户可能点击分享按钮前就先调用
   wx.updateAppMessageShareData({ 
        title: '', // 分享标题
        desc: '', // 分享描述
        link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
        imgUrl: '', // 分享图标
  }, function(res) { 
    //这里是回调函数 
  }); 
});

2. 自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容（1.4.0）

wx.ready(function () {      //需在用户可能点击分享按钮前就先调用
    wx.updateTimelineShareData({ 
        title: '', // 分享标题
        link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
        imgUrl: '', // 分享图标
    }, function(res) { 
      //这里是回调函数 
    }); 
});

四、自定义菜单隐藏设置

mounted () {
    this.shareWechat();
},
methods () {
    shareWechat() {
        let self = this,
            url_temp = window.location.href.split("#")[0];
        axios.post(global.api + "business-service/wechat/sign",{webUrl: url_temp}).then(function(response) {
            if(response.data.code == 1){
                let data = response.data.data
                let nonceStr = data.noncestr  // 必填，生成签名的随机串
                let timestamp = data.timestamp  //生成签名的时间戳
                wx.config({
                    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                    appId: data.appId, // 必填，服务号
                    timestamp: data.timestamp, // 必填，生成签名的时间戳
                    nonceStr: data.noncestr, // 必填，生成签名的随机串
                    signature: data.sign, // 必填，签名，见附录1
                    jsApiList: ['hideMenuItems','hideAllNonBaseMenuItem']
                });
                wx.ready(function () { 
                  //隐藏所有按钮（“传播类”和“保护类"）
                  wx.hideAllNonBaseMenuItem();
                  //隐藏所有按钮（“传播类”和“保护类"）
                  //以下隐藏部分按钮，分别为： 发送给朋友，分享到朋友圈，分享到QQ，分享到Weibo，收藏，分享到FB，分享到 QQ 空间，复制链接，阅读模式
                  //wx.hideMenuItems({
                    // menuList: ['menuItem:share:appMessage','menuItem:share:timeline','menuItem:share:qq','menuItem:share:weiboApp','menuItem:favorite','menuItem:share:facebook','menuItem:share:QZone','menuItem:copyUrl','menuItem:readMode'] // 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
                  //});
                }); 
             }
        })
        .catch(function(error) {
            console.log(error);
        });
    }
}

原始按钮
隐藏所有按钮