文档章节

微信js-sdk集成小结

isonghui
 isonghui
发布于 2016/12/01 10:37
字数 1428
阅读 316
收藏 2
点赞 0
评论 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
粉丝 4
博文 10
码字总数 4762
作品 0
昌平
加载中

评论(2)

isonghui
isonghui
哈哈,谢谢:grin:
MissSimple
MissSimple
语言风趣幽默
微信中页面二次分享小图标丢失问题

每天踩点坑,每天成长一点点,这样工作才会变得有趣。微信JSSDK踩坑记录。 在我们有房APP1.1的版本中增加了房产资讯的功能,昨天晚上有同事在群里反馈从APP中分享的资讯到微信中,然后再次分...

尹吉欢 ⋅ 05/08 ⋅ 0

如何入门微信小游戏开发,有哪些学习资料?

开发微信小游戏并非难事 1.首先,微信小游戏的开发方法 可以看到微信游戏的开发方式 答主有一些COCOS的开发经验,于是这里我们主要探讨COCOS制作小游戏的方法 2.需要学习什么 JS(JavaScrip...

qq_40126542 ⋅ 05/05 ⋅ 0

React Native SDK for OSS

此文主要介绍 React Native SDK for OSS的方方面面,包括相关基本概念、项目背景、项目方案、环境搭建运行、使用姿势、注意事项等。文末的附件可运行Example Zip压缩包和针对新手的入门实用文...

zuozhao ⋅ 05/18 ⋅ 0

Yii2.0实现微信公众号后台开发

研读 微信公众平台开发者文档 ,然后再阅读本文,效果更佳! 接入微信 Yii2后台配置 1.在app/config/params.php中配置token参数 2.在app/config/main.php中配置路由 因为接口模块使用的RESTf...

botkenni ⋅ 05/27 ⋅ 0

android studio 生成aar 时 jar的 文件会消失

目前是用 android studio 3.1 制作一个 aar,里面就是调用tapjoy sdk 原始jar里面有2个文件夹,生成aar之后 aar里面的libs里面的jar中 js目录没了,js目录里面有1个html和1个js文件。 有没有...

dcteris ⋅ 04/16 ⋅ 0

JavaScript零基础入门——(八)JavaScript的数组

JavaScript零基础入门——(八)JavaScript的数组 欢迎大家回到我们的JavaScript零基础入门,上一节课我们讲了有关JavaScript正则表达式的相关知识点,便于大家更好的对字符串进行处理。这一...

JandenMa ⋅ 06/19 ⋅ 0

JavaScript零基础入门——(十)JavaScript的DOM基础

JavaScript零基础入门——(十)JavaScript的DOM基础 欢迎大家回到我们的JavaScript零基础入门,上一节课,我们了解了JavaScript中的函数,这一节课,我们来了解一下JavaScript的DOM。 第一节...

JandenMa ⋅ 前天 ⋅ 0

Facebook 正在重构 React Native,将重写大量底层

Facebook 五年前为 React Native 框架设计的原则,负面影响了与 JavaScript 代码的整合程度,也加大了某些特性的开发难度。因此 Facebook 现在准备对 React Native 架构进行重构,通过引入更...

局长 ⋅ 06/16 ⋅ 0

小程序iOS客户端框架——控件事件逻辑框架与控件原生化

小程序自发布以来,为开发者和用户提供了一种轻量级的App。作为一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或者搜一下即可打开应用。小程序也体现了“用...

codeGoogle ⋅ 04/24 ⋅ 0

云 GIS 网络客户端开发平台 - iClient-JS

SuperMap iClient JavaScript (简称 iClient-JS )是云 GIS 网络客户端开发平台。基于现代 Web 技术栈全新构建,是 SuperMap 云四驾马车和在线 GIS 平台系列产品的统一 JS 客户端。集成了领先...

ahnan ⋅ 2017/12/04 ⋅ 5

没有更多内容

加载失败,请刷新页面

加载更多

下一页

10个免费的服务器监控工具

监控你的WEB服务器或者WEB主机运行是否正常与健康是非常重要的。你要确保用户始终可以打开你的网站并且网速不慢。服务器监控工具允许你收集和分析有关你的Web服务器的数据。 有许多非常好的服...

李朝强 ⋅ 29分钟前 ⋅ 0

压缩工具之zip-tar

zip 支持目录压缩。使用yum安装zip包,使用yum安装unzip包 zip 1.txt.zip 1.txt #将1.txt文件压缩,新生成的压缩文件为1.txt.zip,原文件保留 zip -r 123.zip 123/ #-r对目录操作。将123/目录...

ZHENG-JY ⋅ 29分钟前 ⋅ 0

Dubbo @Activate注解使用和实现解析

Activate注解标识一个扩展是否被激活和使用,可以放在定义的类上和方法上,dubbo用它在SPI扩张类定义上,标识这个扩展实现激活的条件和时机,先看下定义: /** * Activate * <p/> * ...

哲别0 ⋅ 36分钟前 ⋅ 0

6.5 zip压缩工具 tar打包 打包并压缩

1.tar tar命令格式 [-zjxcvfpP] filename tar -z:表示同时用gzip压缩。 -j:表示同时用bzip2压缩。 -J:表示同时用xz压缩。 -x:表示解包或者解压缩。 -t:表示查看tar包里的文件。 -c:表示建...

oschina130111 ⋅ 38分钟前 ⋅ 0

Linux系统工程狮养成记

如今的社会,随着时代的发展,出现了很多职业,像电子类,计算机类的专业,出现了各种各样的工程师,有算法工程师,java工程师,前端工程师,后台工程师,Linux工程师,运维工程师等等,不同...

六库科技 ⋅ 45分钟前 ⋅ 0

Linux 机器的渗透测试命令备忘表

如下是一份 Linux 机器的渗透测试备忘录,是在后期开发期间或者执行命令注入等操作时的一些典型命令,设计为测试人员进行本地枚举检查之用。 此外,你还可以从这儿(https://gbhackers.com/c...

寰宇01 ⋅ 46分钟前 ⋅ 0

windows 安装java开发环境,配置jdk

下载jdk安装文件 链接:https://pan.baidu.com/s/1UEKPjnAdMqNj612B39Pfsg 密码:ipqx 如果javac无法使用 1,检查环境变量名称中是否有空格。。。,去除后即可 2,将JAVA_HOME替换为原始路径...

阿豪boy ⋅ 48分钟前 ⋅ 0

简析log4j的实现方式

刚加入新公司,对日志的要求比较严格,对此特意花了几天时间看了一下log4j的源码,大概了解了一下log4j的实现方式,总结如下: log4j的实现分为两个步骤:log4j.xml的加载,logger的使用 这里...

zdatbit ⋅ 今天 ⋅ 0

win环境下jdk7与jdk8共存配置

1.jdk安装包 jdk安装包 安装步骤略 2.jdk等配置文件修改 在安装JDK1.8时(本机先安装jdk1.7再安装的jdk1.8),会将java.exe、javaw.exe、javaws.exe三个文件copy到了C:\Windows\System32,这...

泉天下 ⋅ 今天 ⋅ 0

windows profesional 2017 build problem

.net framework .... https://stackoverflow.com/questions/43330915/could-not-load-file-or-assembly-microsoft-build-frameworkvs-2017...

机油战士 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部