前端公众号开发，微信分享遇到的坑，分享的链接，描述，图片未能正常显示

首先要做微信公众号分享，必须要关注这个微信公众号，这是重点。

我的项目是vue的项目在项目中安装了微信jssdk，然后引用微信的jssdk。调用里面的方法。方法如下图代码，我分享的的页面不是当前页面，而是同一个域名下的其他页面。

一定要确认 config 中的 appid 与用来获取 jsapi_ticket 的 appid 一致。

前端需要用js获取当前页面除去'#'hash部分的链接（可用location.href.split('#')[0]获取,而且需要encodeURIComponent），因为页面一旦分享，微信客户端会在你的链接末尾加入其它参数，如果不是动态获取当前链接，将导致分享后的页面签名失败。

import wx from 'weixin-js-sdk' //引入js-sdk

//调用方法
weixinShare(shareTitle,shareDesc,linkUrl,imgUrl) {
        let url = process.env.imgUrl+'/ins_wc/wechat/getLogo';
        let param =window.location.href.split('#')[0];   //当前的链接域名，这个很重要，无论分享的链接是不是当前连接都必须要写入。
        let params = {
          url:param
        };
        this.$http.get(url, {params: params}).then( res => {
          let resArr = res.data.split(",");  
          let _this=this;
          //微信分享配置
          wx.config({
            debug: false,　                  //调试，如果分享出错可以设置true
            appId: process.env.appId, 
            timestamp: resArr[0],
            nonceStr: resArr[1],
            signature: resArr[2], 
            jsApiList: [
              'onMenuShareAppMessage', //1.0 分享到朋友
              'onMenuShareTimeline', //1.0分享到朋友圈
              'updateAppMessageShareData', //1.4 分享到朋友
              'updateTimelineShareData', //1.4分享到朋友圈
            ]

          });
          wx.ready(function(){
            let shareData = {
              title: shareTitle,
              desc: shareDesc,
              link: linkUrl, //分享的链接 必须跟安全域名的保持一致，不然分享无效
              imgUrl: imgUrl,
              success: function () {
                // 用户确认分享后执行的回调函数
                _this.$vux.toast.text('分享成功！！！');
                _this.showDialog=false;
              },
              cancel: function () {
                // 用户取消分享后执行的回调函数
                _this.$vux.toast.text('取消分享！！！');
              }
            };
            if(wx.onMenuShareAppMessage){ //微信文档中提到这两个接口即将弃用，故判断
              wx.onMenuShareAppMessage(shareData);//1.0 分享到朋友
              wx.onMenuShareTimeline(shareData);//1.0分享到朋友圈
            }else{
              wx.updateAppMessageShareData(shareData);//1.4 分享到朋友
              wx.updateTimelineShareData(shareData);//1.4分享到朋友圈
            }
          });
          wx.error(function(res){
            alert("wx.error="+JSON.stringify(res));
          });

        })
      },
   

我的多次遇到了验签失败，打印log发现jsApiList这个数组的值为空，看了微信官方文档，'onMenuShareAppMessage',  'onMenuShareTimeline', 这两个 方法即将被废弃推荐使用 'updateAppMessageShareData', 'updateTimelineShareData'这个两个方法。

用同事手机测试还遇到过爆出错为permission denied，说明该公众号没有权限使用这个JSAPI，或者是调用的JSAPI没有传入config的jsApiList参数中（部分接口需要认证之后才能使用），然后我重新关注了公众号，就可以正常分享了。