微信js-sdk集成小结

最新推荐文章于 2024-08-15 09:26:51 发布

weixin_34168700

最新推荐文章于 2024-08-15 09:26:51 发布

阅读量144

点赞数

原文链接：https://my.oschina.net/u/2012189/blog/797682

版权

2019独角兽企业重金招聘Python工程师标准>>>

完整的官方文档在此：

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都很好用，但你要是敢用微软产品搭建企业级服务，保证死的很惨。