微信分享链接含敏感词被屏蔽的问题

       最近在开发一个微信活动web页面时，遇到了一个奇怪的问题。我调用了微信JS-SDK的接口，但是分享出去的链接有时正常，有时异常。而且分享时发送方分享链接有图标，接收方分享链接没有图标。截图如下：

        我的项目是基于vue2.0开发的，开发方式和基于jquery的开发方式有区别。在vue2.0中，需要先安装微信js插件，在node.js中输入命令：cnpm install weixin-js-sdk --save-dev，如果安装成功，在项目目录下的package.json文件中devDependencies下会出现weixin-js-sdk的版本号,说明安装成功，截图如下：

然后在需要调用微信config和reday的函数的js文件头部引入wx，代码如下：

import wx from 'weixin-js-sdk'
export default {
  /**
   * 申请使用微信JS接口
   * @param data
   */
  wxConfig: function (data) {
    wx.config({
      debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
      appId: data.appId, // 必填，公众号的唯一标识
      timestamp: data.timestamp, // 必填，生成签名的时间戳
      nonceStr: data.nonceStr, // 必填，生成签名的随机串
      signature: data.signature,// 必填，签名，见附录1
      jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
    });
  },
  /**
   * 微信对象已准备好时，初始化右上角分享按钮（分享给朋友，分享到朋友圈）
   */
  wxReady: function (shareInfo) {
    wx.ready(function () {
      wx.onMenuShareTimeline({      // 分享到朋友圈
        title: shareInfo.title,
        link: shareInfo.url, // 分享链接
        imgUrl: shareInfo.imgUrl, // 分享图标
        success: function () {
          // 用户确认分享后执行的回调函数
        },
        cancel: function () {
          // 用户取消分享后执行的回调函数
        },
        fail: function (res) {
        }
      });
      wx.onMenuShareAppMessage({    // 分享给朋友
        title: shareInfo.title,
        link: shareInfo.url, // 分享链接
        imgUrl: shareInfo.imgUrl, // 分享图标
        desc: shareInfo.desc,
        type: 'link', // 分享类型,music、video或link，不填默认为link
        dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
        success: function () {
          // 用户确认分享后执行的回调函数
        },
        cancel: function () {
          // 用户取消分享后执行的回调函数
        }
      });
    });
  },
}

       要调用微信的接口，需要先配置，那么在页面初始化的时候就需要初始化配置微信接口，在基于vue2.0项目的开发中，初始化和基于jquery的开发不一样，vue中有钩子函数的概念，在这里我使用mounted。代码如下：

mounted: function() {
    if (Common.isWeiXin()) {
      this.checkTime();
    }
    else {
      alert("请在微信中打开本页面！");
    }
  }

       checkTime()函数中调用了初始化配置微信js接口的函数。

       这样做完后，我在手机上微信测试我的页面，就出现了文章开头介绍的情况，在微信web开发者工具中实际测试发现，调用初始化微信js-sdk有时成功，有时失败。一开始我怀疑是wexin-js-sdk这个插件有bug，因为我在基于jquery开发时，是直接引入微信的js-sdk文件，一直都没有出现过什么问题。

       后来我一直想着在vue中引入第三方js文件，就是引入http://res.wx.qq.com/open/js/jweixin-1.0.0.js这个文件，查了好多资料，有介绍的，但是没有一步一步讲得很清楚的，因此这个方法没有成功。

       后来我在百度上查微信分享失败相关的关键字，就发现了下面这篇文章：微信分享之分享图标/分享图片不能显示。上面有这样几段话：

我的分享链接对象在程序中是这样设置的：

var shareInfo = {
  title : "XXXX12周年庆，派发现金红包啦！",  
  desc : "关注XXXX公众号，回复口令，即可抢红包！",  
  imgUrl : "http://images.v2gogo.com/2017/03/24/snatchredpacket.png",
  url : "http://snatch.v2gogo.com/snatchredpacket/desc/dist/index.html"
};

原来是我分享链接标题和描述中出现了“现金”和“红包”这两个敏感词，被微信屏幕了，呵呵，然后我把这个对象改成下面这样的：

var shareInfo = {
  title : "XXXX12周年庆，派发红bao啦！",  
  desc : "关注XXXX公众号，回复口令，即可开抢！",  
  imgUrl : "http://images.v2gogo.com/2017/03/24/snatchredpacket.png",
  url : "http://snatch.v2gogo.com/snatchredpacket/desc/dist/index.html"
};

然后我再测试时，就正常了。如下图:

又涨经验了。哈哈哈！