微信js-sdk集成小结

完整的官方文档在此：

https://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html

之前有些第三方开发的js库，确定是不要再用了。

• 公众号后台配置
  这个js-sdk的使用,是必须依附于一个公众号的,要想配置成功,首先公众号后台得把页面所需的域名配进来(官方文档里有), 注意配置的时候, 要把一个认证文件放在该域名指向的服务器,这个文件就在配置页面上下载
  
• 签名的生成
  看似复杂，实际上是描述最清晰，实现最简单的，主要就是如下几个步骤：
• • 根据appid获取Token
  • 根据token获取JsTicket
  • 根据JsTicket, 加上客户端传过来的随机字符串(这个真是随便生成一个就能够,写死的也不要紧,只要和前端用的同样就行)、时间戳和url（必须是前端页面的完整url地址，这是个大坑，后面会说），用SHA1算法加密生成signature（也就是签名）
    注意：Token和Ticket须要缓存，不能每次都去微信服务器取，会被拒绝的，因此本身记录一下每次来取的时间戳，比较一下， 只要不超过7200秒就能够
    代码片断在此: https://git.oschina.net/songhui/codes/kmanqvby4xz05e2hpwl1r15/widget
     
• 页面调试
  这里满满的都是坑呀，其实一开始本身写个测试页面，很容易就经过了，后来仅仅是把js代码从html中提取到一个独立js文件中，用微信官方的调试工具，居然怎么都通不过，每次都报

  config:invalid url domain

  
  上网处处查，都说是公众号后台域名配置不对，可我明明放在html文件中是能够的呀!!! 后来终于发现, 这竟然是"微信web开发者工具"的bug, bug, bug...  一样的页面在手机端的微信里好好的.
  
  以致于到了后来，我看见invalid url domain都很开心，这表示调试成功了。。。
   
• 关于url encode
  用到url有两个地方：给本身的后台发请求，获取签名的时候用一次，调用wx.onMenuShareAppMessaged 的时候用一次，获取签名的地址，要和页面自身地址彻底一致，若是页面地址简单，是没有任何问题的，若是地址复杂，保护一些"/"之类的特殊字符，就须要encodeURI方法来编码，但恰恰咱们的地址很是复杂，带一个子url的参数，这个参数里面还有参数，大概是这个样子：
  
  http://www.nijilijil.com/llll/url_detail.html?url=http%25253A%25252F%25252Fwww.nijilijil.com%25252Fllll%25252Fpicture_detail.html&id=1613&from=singlemessage
  
  （最后的from=singlemessage是微信转发的时候加的）用在签名方法里，后端会把&id=后面的当成整个url的参数舍去，这样生成的签名就不对了。
  
  为了解决这个问题，用了一个比较ugly的办法：把这个url再编码一次，把后面的&编码为特殊字符串"_AND_"，后端再解码回来
   
• 关于调用顺序
  官方文档里只给出了不一样API的说明，没有完整的例子，网上的例子一般是这样的：

     

  wx.config({
  
         debug: false,
  
         appId: '1111111111111',// 必填，公众号的惟一标识
  
         timestamp: timestamp,// 必填，生成签名的时间戳
  
         nonceStr: nonce,// 必填，生成签名的随机串
  
         signature: signature,// 必填，签名，
  
         jsApiList: [
  
            'onMenuShareAppMessage',
  
            'onMenuShareQQ',
  
            'onMenuShareWeibo',
  
            'onMenuShareQZone'
  
      ]});
  
      wx.error(function(res){
  
          console.log('出现一个问题:'+res.errorMessage);
  
      });
  
      wx.ready(function(){
  
          console.log('wx准备就绪');
      } 
      var shareConfig = {
  
          title: title, // 分享标题
  
          desc: descr, // 分享描述
  
           link: curl,
  
          imgUrl: image, // 分享图标
  
          type: 'link', // 分享类型,music、video或link，不填默认为link
  
          success: function () {
  
                   console.log('onMenuShareAppMessage ok');
  
              },
  
              cancel: function () {
  
                   console.log('onMenuShareAppMessage cancel');
  
              }
  
      };
  
      wx.onMenuShareAppMessage(shareConfig);

  
  config, ready, onMenuShareAppMessage几个属性顺序设置，其实这是有问题的，特别是在手机端，执行比较慢的时候，极可能onMenuShareAppMessage已经设置了， wx.ready尚未被执行，这时设置就失败了，并且没有任何错误信息。正确的作法是把onMenuShareAppMessage调用放在ready方法里面：

     

  var shareConfig = {
  
          title: title, // 分享标题
  
          desc: descr, // 分享描述
  
           link: curl,
  
          imgUrl: image, // 分享图标
  
          type: 'link', // 分享类型,music、video或link，不填默认为link
  
          success: function () {
  
                   console.log('onMenuShareAppMessage ok');
  
              },
  
              cancel: function () {
  
                   console.log('onMenuShareAppMessage cancel');
  
              }
  
      };
  
      wx.onMenuShareAppMessage(shareConfig);

   

• iframe的处理
  因为咱们的页面是一个通用父页面经过iframe容器嵌入子页面，分享的时候，固然但愿不一样的子页面标题和题图都不一样，这时就须要再iframe加载完成后，再获取子页面信息，大体是这样处理的：

  iframe.onload = function(){
  
       console.log("iframe load!");
  
       if(browser.versions.weixin){
  
          shareConfig(iframe.contentWindow.document.title ,iframe.contentWindow.document.title ,iframe.contentDocument.getElementById('share_img_url').innerHTML );
  
       }
  
  };

  
  其中share_img_url是子页面中为了分享专门设计的标签
   
• 微信的缓存 微信缓存是个超级坑，网上也不少说法介绍如何清缓存，都不必定靠谱，包括: * 使用系统自带设置->应用设置->微信->清除缓存功能 * 退出公众号再从新加 * 卸载微信从新安装(这也太凶残了) 然而,微信给人的感受是: 你又千条妙计,我又必定之规，至于规则究竟是什么，对不起，无可奉告！因此有时同一个页面，第二次打开就已经刷新缓存了；有时任你怎么清缓存，退出公众号都无效，卸载微信没试，我怕卸了之后不再想装了。根据经验，清缓存有80%的几率会生效。 鄙视微信，面向开发者的时候，彻底没有面向用户的易用性体验，这种感受很像之前的微软：windows，office都很好用，但你要是敢用微软产品搭建企业级服务，保证死的很惨。