微信内置分享，基于vue2.x

这次做微信分享，被文档坑死了，说是分享的即将废弃了，但新的又不能用，用旧的，还要带新的api名字。唉
需求：

• 点分享按钮，弹出点击右上角分享弹框，然后选择分享出去（朋友朋友圈、qq、qq空间）
• 分享当前页和别的页面
• 分享页面很多，有些是统一的文案，有些是动态文案，比如商品详情，还有些页面要隐藏右上角分享

分析：按照需求，我们想要给很多个页面分享，就得全局写，封装方法，到时候直接调用即可；
封装的方法动态的是每个页面的url和动态文案，那么这个得把参数开放出来，用的时候传；

文档在这里微信js文档

• 首先有些页面要隐藏分享，那么就得区分出来哪些需要隐藏，哪些不做处理，做这个最方便的当然还是我们的路由里面：在这里我们定义一个参数，来决定每个页面的分享按钮显示与否。（./router/index.js）
  
  隐藏按钮代码，参考微信文档

   export function hideShare() {
     if (!isWeiXin()) {
       return
     }
     //隐藏分享等按钮
     function onBridgeReady() {
       WeixinJSBridge.call('hideOptionMenu');
     }
     if (typeof WeixinJSBridge == "undefined") {
       if (document.addEventListener) {
         document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
       } else if (document.attachEvent) {
         document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
         document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
       }
     } else {
       onBridgeReady();
     }
}

在app.vue中：拦截路由

watch: {
   $route(to, from) {
     let that = this;
     let name = to.name;
     //分享
     if (to.meta.NeedHideshare) {
     //这里拦截，去掉分享按钮
       this.$hideShare();
     } else{
     //这里就是可分享的页面
   }
 },

• 然后封装两个方法，第一个是根据当前url获取config里面的参数；第二个是分享**（划重点，坑点就在这，说是旧的废弃了，但新的方法根本不能用，没办法，就只能用就的方法，更扯的来了，ready中用的旧的方法，jsApiList中要把新的方法名也写上，不然也不管用）**，然后在main.js全局，

//main.js
import {
  wxShare,
  getWxShareData,
  hideShare
} from "js/wxUtils.js";
Vue.prototype.$wxShare = wxShare;
Vue.prototype.$getWxShareData = getWxShareData;
Vue.prototype.$hideShare = hideShare;

//获取config中的数据，第一个是vue，第二个是成功回调，这个主要是为了能先调用获取数据的，再调用分享
export function getWxShareData(that, succBack) {
  if (!isWeiXin()) {
    return
  }
  //获取分享数据，要给当前页分享，就获取当前页的url
  let url = window.location.href
  let params = {
    url: url
  };
  //这是我封装的请求，具体看[Vue2+axios+router+loading封装（新增图片上传）](https://blog.csdn.net/lmy0111ly/article/details/82908287)
  allWXShare(params, that, 0).then(
    response => {
      let data = response.data;
      if (!validatenull(data)) {
        data["url"] = url
        //这里保存数据，等待使用
        sessionStorage.setItem(store.shareInfo, JSON.stringify(data))
        succBack();
      }
    },
    error => {
      // toast(error.message);
    }
  );

}
//这个是调用wx的分享
export function wxShare(sharedata) {
//获取config的数据，上个方法中保存了
  let data = sessionStorage.getItem(store.shareInfo);
  let type = sharedata.type || 0; // 0,右上角触发，1朋友，2朋友圈
  
  if (!validatenull(data)) {
    data = JSON.parse(data)
    let sd = {
      title: sharedata.title, // 分享标题
      desc: sharedata.desc || "财叔分享", // 分享描述
      link: sharedata.link || window.location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
      imgUrl: sharedata.imgUrl || "https://imgs.5icaishu.com/favicon.ico", // 分享图标
      complete: function (res) {
        let ud = parseInt(localStorage.getItem(store.ud))
        if ((ud == 4) &&(type == 1)) {
          alert("调用完成:"+ JSON.stringify(res))
        }
      }
    }
    //这里是为了只给指定开发者打印
    let ud = parseInt(localStorage.getItem(store.ud))
    let debugDefault = false
    if ((ud == 4) &&(type == 1)) {
      debugDefault = false
    }
    wx.config({ //微信的相应配置
      debug: debugDefault, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
      appId: data.appid, // 必填，公众号的唯一标识
      timestamp: data.timestamp, // 必填，生成签名的时间戳
      nonceStr: data.noncestr, // 必填，生成签名的随机串
      signature: data.signature, // 必填，签名，见附录1
      jsApiList: [
        'updateAppMessageShareData',
        'updateTimelineShareData',
        'onMenuShareAppMessage', //旧的接口，即将废弃
        'onMenuShareTimeline' //旧的接口，即将废弃] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
      ]
    });
    wx.ready(function () { //
      wx.onMenuShareAppMessage(sd);
      wx.onMenuShareTimeline(sd);
      // wx.updateAppMessageShareData(sd);
      // wx.updateTimelineShareData(sd);
      let ud = parseInt(localStorage.getItem(store.ud))
      if ((ud == 4) &&(type == 1)) {
			
        // alert(type +":"+ JSON.stringify(sd)+":"+JSON.stringify(data))
      }
    });
    wx.error(function (res) {
      // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
      let ud = parseInt(localStorage.getItem(store.ud))
      if ((ud == 4) &&(type == 1)) {
        // alert(type +":"+ JSON.stringify(sd)+":"+JSON.stringify(data))
        alert("config信息验证失败" + JSON.stringify(res));
      }
    });
  }
}

• 最后方法写好了就开始调用了，首先是分享的是当前页面：

$route(to, from) {
 	let that = this;
   let name = to.name;
   //分享
   if (to.meta.NeedHideshare) {
     this.$hideShare();
   } else {
     //分享:link可以自定义，当前url，自定义内容  商品详情 | 活动详情 | 话题详情 | 作品 | 阅读 | 红包详情，分享的内容在每个页面
     if((name == "creditDetail") || (name == "activityDetail")||(name == "topicDetail")||(name == "book")||(name == "chapter")||(name == "redpacketDetail")||(name == 'shareRedpacket')){
       that.$getWxShareData(that, () => {});
     }else{
      //其他页面 当前url,内容全局统一
       that.$getWxShareData(that, () => {
         //分享
         let shareData = {};
         shareData["title"] = "阅读,是轻松的赚钱方式";
         shareData["desc"] =
           "看小说能赚钱，看得多赚的多！参与活动赚收益获积分，积分可兑换网红爆款商品！";
         that.$wxShare(shareData);
       });
     }
   }
},

• 然后分享的是别的页面，比如落地页：这个只需要把link修改就可以：

let link =
      window.location.protocol +
      "//" +
      window.location.host +
      "/account/redpackets/redpacketDetail?orderId=" +
      that.id;

分享就完成了