文档章节

微信js-sdk集成小结

isonghui
 isonghui
发布于 2016/12/01 10:37
字数 1428
阅读 358
收藏 2

完整的官方文档在此:

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

© 著作权归作者所有

共有 人打赏支持
isonghui
粉丝 5
博文 10
码字总数 4762
作品 0
昌平
私信 提问
加载中

评论(2)

isonghui
isonghui
哈哈,谢谢😁
MissSimple
MissSimple
语言风趣幽默
基于Koa.js的微信工具类小记

关于微信公众号开发和小程序开发的教程其实网上已经有很多了,但是基于koa.js 开发的教程其实不多,于是接下来对踩坑的经历做一些小结; 自己也写了一个微信工具类,项目地址是微信工具类 ...

evont
2018/07/09
0
0
深究WeixinJSBridge未定义之因

对于Fundebug这样一个没有使用微信JS-SDK的产品来说,我们竟然收到了WeixinJSBridge is not defined 的报错: 去网上一搜,发现很多开发者都遇到类似的问题: 我的微信项目,没有用到微信JS-...

kiwenlau
2017/02/20
0
0
【转载】微信公众号获取用户地理位置并列出附近的门店

思路分析: 1、在微信公众号内获取用户地理位置 需要js-sdk签名包(关于如何获取文档有介绍) 2、根据获取的地理位置ajax去后台请求,通过sql语句,查询中距离最近的门店(sql语句在网上搜的...

php的小菜鸟
2017/07/21
0
0
微信公众号开发纪要(4)-调用微信扫一扫功能

在微信公众号页面中调用微信扫一扫功能,就是调用微信JS-SDK。让JS-SDK完成调用摄像头扫描,然后我们将扫描结果进行业务操作。微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页...

pdzhsy
2018/07/16
0
0
如何正确的在项目中接入微信JS-SDK

微信JS-SDK的功能 如果你点进来,那么我相信你应该知道微信的JS-SDK可以用来做什么了。微信的官方文档描述如下。 微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包。...

detectiveHLH
2018/08/04
0
0

没有更多内容

加载失败,请刷新页面

加载更多

精读《论语》读后感作文3600字

精读《论语》读后感作文3600字: 学而篇第一:子曰:“学而时习之,不亦说乎?有朋友自远方来,不亦悦乎?人不知,而不愠,不亦君子乎? 朱熹解:即学而又时时习之,则学者熟,而衷心喜悦,其...

原创小博客
28分钟前
0
0
CPU内存结构

开局一张图 由于CPU频率太快了,为解决直接读取内存的数据上的延迟,在CPU和内存之间,存在3级缓存。 CPU在解决和缓存不一致上采用两种方式: 缓存一致性协议 总线锁机制 CPU CPU的一个时钟周...

春哥大魔王的博客
31分钟前
1
0
记一次centos 7内核升级事故

情景 公司做等保3测评,在进行系统漏洞检测时发现内核存在漏洞,需要进行升级。 名称 版本 升级前内核 CentOS Linux (3.10.0-327.el7.x86_64) 7 (Core) 升级后内核 CentOS Linux (3.10.0-957...

阿dai
56分钟前
8
0
PowerDesigner操作

1.去掉生成DDL里的注释 Database -> Edit Current DBMS -> Script -> Syntax -> BlockComment,去掉BlockComment里面的value内容。...

了凡川
今天
3
0
Django集成Markdown编辑器【附源码】

专注内容写作的你一定不要错过markdown 简单介绍 markdown是一种标记语言,通过简单的标记语法可以使普通的文本内容具有一定的格式,使用非常简单,学习成本极低 目前各大Blog平台都已支持m...

运维咖啡吧
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部