微信 JS-SDK 说明文档
概述
微信JS-SDK是微信公众平台 面向网页开发者提供的基于微信内的网页开发工具包。
通过使用微信JS-SDK,网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力,同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力,为微信用户提供更优质的网页体验。
此文档面向网页开发者介绍微信JS-SDK如何使用及相关注意事项。
JSSDK使用步骤
步骤一:绑定域名
先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
备注:登录后可在“开发者中心”查看对应的接口权限。
步骤二:引入JS文件
在需要调用JS接口的页面引入如下JS文件,(支持https):http://res.wx.qq.com/open/js/jweixin-1.6.0.js
如需进一步提升服务稳定性,当上述资源不可访问时,可改访问:http://res2.wx.qq.com/open/js/jweixin-1.6.0.js (支持https)。
备注:支持使用 AMD/CMD 标准模块加载方法加载
步骤三:通过config接口注入权限验证配置
所有需要使用JS-SDK的页面必须先注入配置信息,否则将无法调用(同一个url仅需调用一次,对于变化url的SPA的web app可在每次url变化时进行调用,目前Android微信客户端不支持pushState的H5新特性,所以使用pushState来实现web app的页面会导致签名失败,此问题会在Android6.2中修复)。
wx.config({debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。appId: '', // 必填,公众号的唯一标识timestamp: , // 必填,生成签名的时间戳nonceStr: '', // 必填,生成签名的随机串signature: '',// 必填,签名jsApiList: [] // 必填,需要使用的JS接口列表
});
签名算法见文末的附录1,所有JS接口列表见文末的附录2
注意:如果使用的是小程序云开发静态网站托管的域名的网页,可以免鉴权直接跳任意合法合规小程序,调用 wx.config 时 appId 需填入非个人主体的已认证小程序,不需计算签名,timestamp、nonceStr、signature 填入非空任意值即可。
步骤四:通过ready接口处理成功验证
wx.ready(function(){// config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。
});
步骤五:通过error接口处理失败验证
wx.error(function(res){// config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
});
接口调用说明
所有接口通过wx对象(也可使用jWeixin对象)来调用,参数是一个对象,除了每个接口本身需要传的参数之外,还有以下通用参数:
success:接口调用成功时执行的回调函数。
fail:接口调用失败时执行的回调函数。
complete:接口调用完成时执行的回调函数,无论成功或失败都会执行。
cancel:用户点击取消时的回调函数,仅部分有用户取消操作的api才会用到。
trigger: 监听Menu中的按钮点击时触发的方法,该方法仅支持Menu中的相关接口。
备注:不要尝试在trigger中使用ajax异步请求修改本次分享的内容,因为客户端分享操作是一个同步操作,这时候使用ajax的回包会还没有返回。
以上几个函数都带有一个参数,类型为对象,其中除了每个接口本身返回的数据之外,还有一个通用属性errMsg,其值格式如下:
调用成功时:“xxx:ok” ,其中xxx为调用的接口名
用户取消时:“xxx:cancel”,其中xxx为调用的接口名
调用失败时:其值为具体错误信息
>>> 微信JS-SDK 官方说明文档 <<<
模拟JSSDK权限校验
通过 web 开发者工具,可以模拟 JSSDK 在微信客户端中的请求,并直观地看到鉴权结果和 log。以微信 JSSDK DEMO 页面为例:
https://www.weixinsxy.com/jssdk/
在调试器中打开该 URL,可以方便地在右侧的 JS-SDK Tab 中看到当前页面 wx.config 的校验情况和 JSSDK 的调用 log。 如下是校验通过的页面:
在控制台里会显示当前页面拥有权限的 JS-SDK 列表。
如下是校验未通过的页面:
结合左侧的微信 Webview 模拟器,可以直观地调试 JSSDK 的效果,能够在console栏里看到调用的API的结果。
注意:0.7.0 及以后版本的微信 web 开发者工具支持卡券 JSSDK 的调试,但对于希望调试的卡券公众号,我们要求开发者微信号与之建立绑定关系,绑定流程同授权登录一致。
URL收藏与二维码预览
为了方便开发者快速打开要调试的网页,开发者工具有两个方便的小功能:
URL收藏
类似浏览器里的书签功能,你可以把你经常需要调试的网页通过点击URL地址栏上的星星的icon将其收藏。
收藏之后你可以在收藏夹里看到所收藏的URL:
取消收藏也很简单,在已经收藏的URL的星星上再点击一次就可以取消收藏。
二维码预览
为了方便开发者快速通过手机打开网页预览效果,可以通过点击「预览」按钮给出当前网页的二维码:
移动调试
注意:移动调试仅支持0.5.0 - 0.7.0版本的开发者工具。1.x版本的开发者工具不支持此功能!
移动端网页的表现,通常和桌面浏览器上有所区别,包括样式的呈现、脚本的逻辑等等,这会给开发者带来一定的困扰。现在,微信安卓客户端 webview 已经开始全面升级至 X5 Blink 内核,新的内核无论在渲染能力、API 支持还是在开发辅助上都有很大进步。通过微信 web 开发者工具中的远程调试功能,实时映射手机屏幕到微信 web 开发者工具上,将帮助开发者更高效地调试 X5 Blink 内核的网页,具体步骤如下:
(1)准备工作
安装0.5.0或以上版本的微信 web 开发者工具
确认移动设备是否支持远程调试功能
打开微信 web 开发者工具,选择“移动调试”tab,点击验证移动设备是否支持。随后使用移动设备扫描弹出的二维码,在设备上即可获得支持信息。
打开移动设备中的 USB 调试功能
1.打开移动设备,进入“设置”->“开发人员选项”
2.勾选“USB 调试功能”
需要注意的是,Android 4.2 之后的设备,开发人员选项默认是隐藏的,通过以下步骤可以打开:
1.打开移动设备,进入“设置”->“关于手机”
2.找到并单击“内部版本号”7次
安装移动设备 USB 驱动
通常开发者可以在移动设备厂商的官网中下载到相关驱动,或者使用<a href=“http://m.qq.com/ “腾讯手机管家”” target="_blank">腾讯手机管家来安装设备驱动。
打开 X5 Blink 内核的 inspector 功能
打开微信 web 开发者工具,选择“移动调试”tab ,使用设备扫描“调试步骤”中的二维码。
如下图,勾选“是否打开 TBS 内核 Inspector 调试功能”,并重启微信。
(2)开始调试
使用 USB 数据线连接移动设备与 PC 或者 Mac 后,点击打开微信 web 开发者工具“移动调试”tab,选择 X5 Blink 调试功能,将会打开一个新窗口,在微信中访问任意网页即可开始调试。关于 X5 Blink 内核更多信息,可以查看官网介绍。
在所有准备工作都完成的情况下,窗口中可以看到当前设备的基本信息:
点击任意页面的“inspect”,打开新窗口,开发者会看到熟悉的调试界面:
点击上图右上角的“手机”图标,将启用屏幕映射功能:
微信 web 开发者工具集成的移动调试功能,基于 weinre 并做了一些改进,相比直接使用 weinre 有两个优点:
1.无须手工在页面中加入 weinre 调试脚本
2.可以在 weinre 的网络请求页卡中,看到完整的 http 请求 log,非局限于 ajax 请求
如下图所示:
注意,移动调试功能暂不支持 https。
Chrome DevTools
微信 web 开发者工具集成了 Chrome DevTools。同之前在 PC 上的调试体验一致,可以快速上手。
如下图所示:
微信 JS-SDK 说明文档相关推荐
- 使用微信js sdk关于选择及上传图片至腾讯云COS
使用微信js sdk关于选择及上传图片至腾讯云COS 使用微信js sdk关于选择及上传图片至腾讯云COS 背景 名词 参考 效果图展示 开发步骤 1:概要步骤 2:上代码 结束: 使用微信js sd ...
- 实战微信JS SDK开发:贺卡制作与播放(1)
前段时间忙于CanTK 2.0的开发,所以博客一直没有更新.CanTK 2.0主要增强了游戏和富媒体的开发,现在编码和测试基本完成了,等文档完成了再正式发布,里面有不少激动人心的功能,等发布时再一一细 ...
- 微信-js sdk invalid signature签名错误 问题解决
微信-js sdk invalid signature签名错误 问题解决 参考文章: (1)微信-js sdk invalid signature签名错误 问题解决 (2)https://www.cn ...
- 微信js sdk 分享 失败 有时候好 有时候坏
微信js sdk 分享 失败 有时候好 有时候坏 用了一个www开头的域名 和一个xx.com的域名 两个在解析上有问题. 实践是www.xx.com的比较 稳定 转载于:https://www.c ...
- 微信JS SDK开放,前端开发者“鸡冻”了!
HTML5又一次逆袭了,其实之前微信也是有一些JS API的,比如分享.但这次一股脑开放了拍摄.录音.语音识别.二维码.地图.支付.分享.卡券等几十个API,这条消息不需宣传,瞬间就占满了HTML5从 ...
- 微信js sdk 授权上传头像下载代码片段和注意事项
/* * 描述:当前页授权 * @param url 例:index.html / 如果有参数,需加密index.html?id=1 */ 1.对需要运用js sdk的页面授权 get ...
- 微信js sdk动态引用
一般情况下,微信的js-sdk只需要直接引用script即可 <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js&qu ...
- 微信JS SDK开发 共享问题小结
首先,我要吐槽一下这个SDK,看了第一遍,完全不知所云,一会获取这个,一会获取那个,也没确切的告诉怎么获取. 和腾讯客服(拿钱不干事的好工作)讨教,人家不懂技术,不知道怎么解决,也没有相关技术人员对应 ...
- php转发朋友圈缩略图片,解释最全的,手把手教的微信JS sdk分享设置教程-微信分享插件PHP源码JS-SDK接口,分享到朋友圈 转发好友带缩略图...
亲们,此文是我上传的有关微信分享插件PHP源码JS-SDK接口的.rar和.zip的说明使用文件 许多朋友都面临自己编写的网站通过微信转发时,无论是分享微信好友或是微信朋友圈时,出现无缩略图显示的问题 ...
- 微信JS SDK Demo 官方案例
2019独角兽企业重金招聘Python工程师标准>>> 微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包. 通过使用微信JS-SDK,网页开发者可借助微信 ...
最新文章
- 【quickhybrid】架构一个Hybrid框架
- 在线python编程编译器-编译器python
- Linux设备模型(热插拔、mdev 与 firmware)
- Discuz7使用syntaxhighlighter_2.0.320实现代码高亮
- 伪代码的简单例子_使用策略+工厂模式彻底干掉代码中的if else!
- python操作hive数据库代码_windows下怎么用python连接hive数据库
- redis timeout设置多少合适_热水器怎么调温度?一般热水器温度设置多少度比较合适?...
- linux6.4添加源,RHEL6.4更改为CentOS源
- 关于手动误删表空间文件出现ora01033解决办法
- OPENCV提取图片中的文字
- 波束形成,通过matlab仿真不同参数的波束形成以及旁絆级
- 程序员诗集 - 十月十六游黄浦江(下)
- python和vba操作excel_对比VBA学Python操作Excel
- 社交礼仪,商务礼仪,酒桌上需注意的细节
- matlab直角坐标转换极坐标,matlab-在MATLAB中怎么将直角坐标转化为极坐标 – 手机爱问...
- Mysql中TO_DAYS函数
- 最适合新手小白的8个python开发环境(内附python IDE最新下载地址+软件激活码+长期有效)
- myeclipse 加载SVN报 Could not create the view: org.tigris.subversion.subclipse.ui.repository.Rep
- 对象存储 S3 在分布式文件系统中的应用
- 搜狗输入法如何开启截屏快捷键
热门文章
- android下拉菜单_如何调整和重新排列Android的快速设置下拉菜单
- c语言写uart协议实时读写,串口Xmodem协议的发送数据 程序
- eterm协议指令解析
- HTML 后台管理页面布局
- 一个中国码农在硅谷求职的实用经历
- [转]用python来开发webgame服务端(3)
- 学生电影网页设计作品 影视主题学生网页制作 简单网页设计作业 静态影视介绍网页模板
- 缠中说禅:缠非缠、禅非禅,枯木龙吟照大千(整理版)
- 利用matlab命令窗口绘制simulink仿真示波器波形的方法,利用MATLAB命令窗口绘制Simulink仿真示波器波形的方法...
- 会议 | 百度首席科学家吴华图灵大会演讲:NLP技术的演变与发展