微信JS-SDK是微信公众平台 面向网页开发者提供的基于微信内的网页开发工具包。
通过使用微信JS-SDK,网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力,同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力,为微信用户提供更优质的网页体验。
此文档面向网页开发者介绍微信JS-SDK如何使用及相关注意事项。
先登录微信公众平台进入“公众号设置”的“功能设置”里填写“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 标准模块加载方法加载
所有需要使用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 填入非空任意值即可。
wx.ready(function(){
// config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。
});wx.error(function(res){
// config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
});所有接口通过wx对象(也可使用jWeixin对象)来调用,参数是一个对象,除了每个接口本身需要传的参数之外,还有以下通用参数:
备注:不要尝试在trigger中使用ajax异步请求修改本次分享的内容,因为客户端分享操作是一个同步操作,这时候使用ajax的回包会还没有返回。
以上几个函数都带有一个参数,类型为对象,其中除了每个接口本身返回的数据之外,还有一个通用属性errMsg,其值格式如下:
调用成功时:“xxx:ok” ,其中xxx为调用的接口名
用户取消时:“xxx:cancel”,其中xxx为调用的接口名
调用失败时:其值为具体错误信息
wx.checkJsApi({
jsApiList: ['chooseImage'], // 需要检测的JS接口列表,所有JS接口列表见附录2,
success: function(res) {
// 以键值对的形式返回,可用的api值true,不可用为false
// 如:{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
}
});备注:checkJsApi接口是客户端6.0.2新引入的一个预留接口,第一期开放的接口均可不使用checkJsApi来检测。
请注意,不要有诱导分享等违规行为,对于诱导分享行为将永久回收公众号接口权限,详细规则请查看:朋友圈管理常见问题
请注意,原有的 wx.onMenuShareTimeline、wx.onMenuShareAppMessage、wx.onMenuShareQQ、wx.onMenuShareQZone 接口,即将废弃。请尽快迁移使用客户端6.7.2及JSSDK 1.4.0以上版本支持的 wx.updateAppMessageShareData、wx.updateTimelineShareData接口。
wx.ready(function () { //需在用户可能点击分享按钮前就先调用
wx.updateAppMessageShareData({
title: '', // 分享标题
desc: '', // 分享描述
link: '', // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: '', // 分享图标
success: function () {
// 设置成功
}
})
}); wx.ready(function () { //需在用户可能点击分享按钮前就先调用
wx.updateTimelineShareData({
title: '', // 分享标题
link: '', // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: '', // 分享图标
success: function () {
// 设置成功
}
})
}); wx.onMenuShareTimeline({
title: '', // 分享标题
link: '', // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: '', // 分享图标
success: function () {
// 用户点击了分享后执行的回调函数
}
},wx.onMenuShareAppMessage({
title: '', // 分享标题
desc: '', // 分享描述
link: '', // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: '', // 分享图标
type: '', // 分享类型,music、video或link,不填默认为link
dataUrl: '', // 如果type是music或video,则要提供数据链接,默认为空
success: function () {
// 用户点击了分享后执行的回调函数
}
});wx.onMenuShareQQ({
title: '', // 分享标题
desc: '', // 分享描述
link: '', // 分享链接
imgUrl: '', // 分享图标
success: function () {
// 用户确认分享后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
});wx.onMenuShareQZone({
title: '', // 分享标题
desc: '', // 分享描述
link: '', // 分享链接
imgUrl: '', // 分享图标
success: function () {
// 用户确认分享后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
});wx.chooseImage({
count: 1, // 默认9
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
success: function (res) {
var localIds = res.localIds; // 返回选定照片的本地ID列表,localId可以作为img标签的src属性显示图片
}
});wx.previewImage({
current: '', // 当前显示图片的http链接
urls: [] // 需要预览的图片http链接列表
});wx.uploadImage({
localId: '', // 需要上传的图片的本地ID,由chooseImage接口获得
isShowProgressTips: 1, // 默认为1,显示进度提示
success: function (res) {
var serverId = res.serverId; // 返回图片的服务器端ID
}
});备注:上传图片有效期3天,可用微信多媒体接口下载图片到自己的服务器,此处获得的 serverId 即 media_id。
wx.downloadImage({
serverId: '', // 需要下载的图片的服务器端ID,由uploadImage接口获得
isShowProgressTips: 1, // 默认为1,显示进度提示
success: function (res) {
var localId = res.localId; // 返回图片下载后的本地ID
}
});wx.getLocalImgData({
localId: '', // 图片的localID
compressionRatio: 0.3, // 压缩比例,iOS 默认值 0.3
success: function (res) {
var localData = res.localData; // localData是图片的base64数据,可以用img标签显示
}
});备注:此接口仅在 iOS WKWebview 下提供,用于兼容 iOS WKWebview 不支持 localId 直接显示图片的问题。具体可参考《iOS WKWebview网页开发适配指南》
wx.stopRecord({
success: function (res) {
var localId = res.localId;
}
});wx.onVoiceRecordEnd({
// 录音时间超过一分钟没有停止的时候会执行 complete 回调
complete: function (res) {
var localId = res.localId;
}
});wx.playVoice({
localId: '' // 需要播放的音频的本地ID,由stopRecord接口获得
});wx.pauseVoice({
localId: '' // 需要暂停的音频的本地ID,由stopRecord接口获得
});wx.stopVoice({
localId: '' // 需要停止的音频的本地ID,由stopRecord接口获得
});wx.onVoicePlayEnd({
success: function (res) {
var localId = res.localId; // 返回音频的本地ID
}
});wx.uploadVoice({
localId: '', // 需要上传的音频的本地ID,由stopRecord接口获得
isShowProgressTips: 1, // 默认为1,显示进度提示
success: function (res) {
var serverId = res.serverId; // 返回音频的服务器端ID
}
});备注:上传语音有效期3天,可用微信多媒体接口下载语音到自己的服务器,此处获得的 serverId 即 media_id,参考文档 .目前多媒体文件下载接口的频率限制为10000次/天,如需要调高频率,请登录微信公众平台,在开发 - 接口权限的列表中,申请提高临时上限。

wx.downloadVoice({
serverId: '', // 需要下载的音频的服务器端ID,由uploadVoice接口获得
isShowProgressTips: 1, // 默认为1,显示进度提示
success: function (res) {
var localId = res.localId; // 返回音频的本地ID
}
});wx.translateVoice({
localId: '', // 需要识别的音频的本地Id,由录音相关接口获得
isShowProgressTips: 1, // 默认为1,显示进度提示
success: function (res) {
alert(res.translateResult); // 语音识别的结果
}
});wx.getNetworkType({
success: function (res) {
var networkType = res.networkType; // 返回网络类型2g,3g,4g,wifi
}
});wx.openLocation({
latitude: 0, // 纬度,浮点数,范围为90 ~ -90
longitude: 0, // 经度,浮点数,范围为180 ~ -180。
name: '', // 位置名
address: '', // 地址详情说明
scale: 1, // 地图缩放级别,整型值,范围从1~28。默认为最大
infoUrl: '' // 在查看位置界面底部显示的超链接,可点击跳转
});wx.getLocation({
type: 'wgs84', // 默认为wgs84的gps坐标,如果要返回直接给openLocation用的火星坐标,可传入'gcj02'
success: function (res) {
var latitude = res.latitude; // 纬度,浮点数,范围为90 ~ -90
var longitude = res.longitude; // 经度,浮点数,范围为180 ~ -180。
var speed = res.speed; // 速度,以米/每秒计
var accuracy = res.accuracy; // 位置精度
}
});wx.startSearchBeacons({
ticket:"", //摇周边的业务ticket, 系统自动添加在摇出来的页面链接后面
complete:function(argv){
//开启查找完成后的回调函数
}
});备注:如需接入摇一摇周边功能,请参考:申请开通摇一摇周边
wx.stopSearchBeacons({
complete:function(res){
//关闭查找完成后的回调函数
}
});wx.onSearchBeacons({
complete:function(argv){
//回调函数,可以数组形式取得该商家注册的在周边的相关设备列表
}
});备注:上述摇一摇周边接口使用注意事项及更多返回结果说明,请参考:摇一摇周边获取设备信息
wx.hideMenuItems({
menuList: [] // 要隐藏的菜单项,只能隐藏“传播类”和“保护类”按钮,所有menu项见附录3
});wx.showMenuItems({
menuList: [] // 要显示的菜单项,所有menu项见附录3
});wx.hideAllNonBaseMenuItem();
// “基本类”按钮详见附录3wx.showAllNonBaseMenuItem();wx.scanQRCode({
needResult: 0, // 默认为0,扫描结果由微信处理,1则直接返回扫描结果,
scanType: ["qrCode","barCode"], // 可以指定扫二维码还是一维码,默认二者都有
success: function (res) {
var result = res.resultStr; // 当needResult 为 1 时,扫码返回的结果
}
});wx.openProductSpecificView({
productId: '', // 商品id
viewType: '' // 0.默认值,普通商品详情页1.扫一扫商品详情页2.小店商品详情页
});微信卡券接口中使用的签名凭证api_ticket,与步骤三中config使用的签名凭证jsapi_ticket不同,开发者在调用微信卡券JS-SDK的过程中需依次完成两次不同的签名,并确保凭证的缓存。
api_ticket 是用于调用微信卡券JS API的临时票据,有效期为7200 秒,通过access_token 来获取。
开发者注意事项:
接口调用请求说明
http请求方式: GET https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=wx_card
参数说明
参数 | 是否必须 | 说明 |
|---|---|---|
access_token | 是 | 接口调用凭证 |
返回数据
数据示例:
{
"errcode":0,
"errmsg":"ok",
"ticket":"bxLdikRXVbTPdHSM05e5u5sUoXNKdvsdshFKA",
"expires_in":7200
}参数名 | 描述 |
|---|---|
errcode | 错误码 |
errmsg | 错误信息 |
ticket | api_ticket,卡券接口中签名所需凭证 |
expires_in | 有效时间 |
错误码
wx.chooseCard({
shopId: '', // 门店Id
cardType: '', // 卡券类型
cardId: '', // 卡券Id
timestamp: 0, // 卡券签名时间戳
nonceStr: '', // 卡券签名随机串
signType: '', // 签名方式,默认'SHA1'
cardSign: '', // 卡券签名
success: function (res) {
var cardList= res.cardList; // 用户选中的卡券列表信息
}
});参数名 | 必填 | 类型 | 示例值 | 描述 |
|---|---|---|---|---|
shopId | 否 | string(24) | 1234 | 门店ID。shopID用于筛选出拉起带有指定location_list(shopID)的卡券列表,非必填。 |
cardType | 否 | string(24) | GROUPON | 卡券类型,用于拉起指定卡券类型的卡券列表。当cardType为空时,默认拉起所有卡券的列表,非必填。 |
cardId | 否 | string(32) | p1Pj9jr90_SQRaVqYI239Ka1erk | 卡券ID,用于拉起指定cardId的卡券列表,当cardId为空时,默认拉起所有卡券的列表,非必填。 |
timestamp | 是 | string(32) | 14300000000 | 时间戳。 |
nonceStr | 是 | string(32) | sduhi123 | 随机字符串。 |
signType | 是 | string(32) | SHA1 | 签名方式,目前仅支持SHA1 |
cardSign | 是 | string(64) | abcsdijcous123 | 签名。 |
cardSign 详见附录4。
开发者特别注意:签名错误会导致拉取卡券列表异常为空,请仔细检查参与签名的参数有效性。
特别提醒
拉取列表仅与用户本地卡券有关,拉起列表异常为空的情况通常有三种:签名错误、时间戳无效、筛选机制有误。请开发者依次排查定位原因。
wx.addCard({
cardList: [{
cardId: '',
cardExt: ''
}], // 需要添加的卡券列表
success: function (res) {
var cardList = res.cardList; // 添加的卡券列表信息
}
});cardExt 详见附录4,开发者若调用接口报签名错误、已领完等异常情况可以参照:卡券签名错误排查方法
wx.openCard({
cardList: [{
cardId: '',
code: ''
}]// 需要打开的卡券列表
});请参考微信支付文档,JSAPI调起支付API:https://pay.weixin.qq.com/wiki/doc/apiv3/apis/chapter3_1_4.shtml
备注:
微信支付V2的开发文档:https://pay.weixin.qq.com/wiki/doc/api/index.html
微信支付V3的开发文档:https://pay.weixin.qq.com/wiki/doc/apiv3/index.shtml
wx.openAddress({
success: function (res) {
var userName = res.userName; // 收货人姓名
var postalCode = res.postalCode; // 邮编
var provinceName = res.provinceName; // 国标收货地址第一级地址(省)
var cityName = res.cityName; // 国标收货地址第二级地址(市)
var countryName = res.countryName; // 国标收货地址第三级地址(国家)
var detailInfo = res.detailInfo; // 详细收货地址信息
var nationalCode = res.nationalCode; // 收货地址国家码
var telNumber = res.telNumber; // 收货人手机号码
}
});备注:
微信地址共享使用的数据字段包括:
其中,地区对应是国标三级地区码,如“广东省-广州市-天河区”,对应的邮编是是510630。详情参考链接:http://xzqh.mca.gov.cn/defaultQuery
jsapi_ticket
生成签名之前必须先了解一下jsapi_ticket,jsapi_ticket是公众号用于调用微信JS接口的临时票据。正常情况下,jsapi_ticket的有效期为7200秒,通过access_token来获取。由于获取jsapi_ticket的api调用次数非常有限,频繁刷新jsapi_ticket会导致api调用受限,影响自身业务,开发者必须在自己的服务全局缓存jsapi_ticket 。
成功返回如下JSON:
{
"errcode":0,
"errmsg":"ok",
"ticket":"bxLdikRXVbTPdHSM05e5u5sUoXNKd8-41ZO3MhKoyN5OfkWITDGgnr2fwJ0m9E8NYzWKVZvdVtaUgWvsdshFKA",
"expires_in":7200
}获得jsapi_ticket之后,就可以生成JS-SDK权限验证的签名了。
签名算法
签名生成规则如下:参与签名的字段包括noncestr(随机字符串), 有效的jsapi_ticket, timestamp(时间戳), url(当前网页的URL,不包含#及其后面部分) 。对所有待签名参数按照字段名的ASCII 码从小到大排序(字典序)后,使用URL键值对的格式(即key1=value1&key2=value2…)拼接成字符串string1。这里需要注意的是所有参数名均为小写字符。对string1作sha1加密,字段名和字段值都采用原始值,不进行URL 转义。
即signature=sha1(string1)。 示例:
noncestr=Wm3WZYTPz0wzccnW
jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg
timestamp=1414587457
url=http://mp.weixin.qq.com?params=value步骤1. 对所有待签名参数按照字段名的ASCII 码从小到大排序(字典序)后,使用URL键值对的格式(即key1=value1&key2=value2…)拼接成字符串string1:
jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg&noncestr=Wm3WZYTPz0wzccnW×tamp=1414587457&url=http://mp.weixin.qq.com?params=value步骤2. 对string1进行sha1签名,得到signature:
0f9de62fce790f9a083d5c99e95740ceb90c27ed注意事项
如出现invalid signature 等错误详见附录5常见错误及解决办法。
版本 1.6.0 接口
updateAppMessageShareData
updateTimelineShareData
onMenuShareTimeline(即将废弃)
onMenuShareAppMessage(即将废弃)
onMenuShareQQ(即将废弃)
onMenuShareWeibo
onMenuShareQZone
startRecord
stopRecord
onVoiceRecordEnd
playVoice
pauseVoice
stopVoice
onVoicePlayEnd
uploadVoice
downloadVoice
chooseImage
previewImage
uploadImage
downloadImage
translateVoice
getNetworkType
openLocation
getLocation
hideOptionMenu
showOptionMenu
hideMenuItems
showMenuItems
hideAllNonBaseMenuItem
showAllNonBaseMenuItem
closeWindow
scanQRCode
openProductSpecificView
addCard
chooseCard
openCard
基本类
举报: “menuItem:exposeArticle”
调整字体: “menuItem:setFont”
日间模式: “menuItem:dayMode”
夜间模式: “menuItem:nightMode”
刷新: “menuItem:refresh”
查看公众号(已添加): “menuItem:profile”
查看公众号(未添加): “menuItem:addContact”
传播类
发送给朋友: “menuItem:share:appMessage”
分享到朋友圈: “menuItem:share:timeline”
分享到QQ: “menuItem:share:qq”
分享到Weibo: “menuItem:share:weiboApp”
收藏: “menuItem:favorite”
分享到FB: “menuItem:share:facebook”
分享到 QQ 空间 “menuItem:share:QZone”
保护类
编辑标签: “menuItem:editTag”
删除: “menuItem:delete”
复制链接: “menuItem:copyUrl”
原网页: “menuItem:originPage”
阅读模式: “menuItem:readMode”
在QQ浏览器中打开: “menuItem:openWithQQBrowser”
在Safari中打开: “menuItem:openWithSafari”
邮件: “menuItem:share:email”
一些特殊公众号: “menuItem:share:brand”
JSSDK使用者请读这里,JSAPI用户可以跳过
卡券签名和JSSDK的签名完全独立,两者的算法和意义完全不同,请不要混淆。JSSDK的签名是使用所有JS接口都需要走的一层鉴权,用以标识调用者的身份,和卡券本身并无关系。其次,卡券的签名考虑到协议的扩展性和简单的防数据擅改,设计了一套独立的签名协议。另外由于历史原因,卡券的JS接口先于JSSDK出现,当时的JSAPI并没有鉴权体系,所以在卡券的签名里也加上了appsecret/api_ticket这些身份信息,希望开发者理解。
卡券 api_ticket
卡券 api_ticket 是用于调用卡券相关接口的临时票据,有效期为 7200 秒,通过 access_token 来获取。这里要注意与 jsapi_ticket 区分开来。由于获取卡券 api_ticket 的 api 调用次数非常有限,频繁刷新卡券 api_ticket 会导致 api 调用受限,影响自身业务,开发者必须在自己的服务全局缓存卡券 api_ticket 。
1.参考以下文档获取access_token(有效期7200秒,开发者必须在自己的服务全局缓存access_token):…/15/54ce45d8d30b6bf6758f68d2e95bc627.html
2.用第一步拿到的access_token 采用http GET方式请求获得卡券 api_ticket(有效期7200秒,开发者必须在自己的服务全局缓存卡券 api_ticket):https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=wx_card
卡券扩展字段cardExt说明
cardExt本身是一个JSON字符串,是商户为该张卡券分配的唯一性信息,包含以下字段:
字段 | 是否必填 | 是否参与签名 | 说明 |
|---|---|---|---|
code | 否 | 是 | 指定的卡券code码,只能被领一次。自定义code模式的卡券必须填写,非自定义code和预存code模式的卡券不必填写。详情见: 是否自定义code码 |
openid | 否 | 是 | 指定领取者的openid,只有该用户能领取。bind_openid字段为true的卡券必须填写,bind_openid字段为false不必填写。 |
timestamp | 是 | 是 | 时间戳,商户生成从1970年1月1日00:00:00至今的秒数,即当前的时间,且最终需要转换为字符串形式;由商户生成后传入,不同添加请求的时间戳须动态生成,若重复将会导致领取失败!。 |
nonce_str | 否 | 是 | 随机字符串,由开发者设置传入, 加强安全性(若不填写可能被重放请求) 。随机字符串,不长于32位。推荐使用大小写字母和数字,不同添加请求的nonce须动态生成,若重复将会导致领取失败。 |
fixed_begintimestamp | 否 | 否 | 卡券在第三方系统的实际领取时间,为东八区时间戳(UTC+8,精确到秒)。当卡券的有效期类型为 DAT E_TYPE_FIX_TERM时专用,标识卡券的实际生效时间,用于解决商户系统内起始时间和领取时间不同步的问题。 |
outer_str | 否 | 否 | 领取渠道参数,用于标识本次领取的渠道值。 |
signature | 是 | - | 签名,商户将接口列表中的参数按照指定方式进行签名,签名方式使用SHA1,具体签名方案参见下文;由商户按照规范签名后传入。 |
签名说明
强烈建议开发者使用卡券资料包中的签名工具SDK进行签名或使用debug工具进行校验: http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=cardsign
卡券签名cardSign说明
1.将 api_ticket、appid、location_id、timestamp、nonce_str、card_id、card_type的value值进行字符串的字典序排序。
2.将所有参数字符串拼接成一个字符串进行sha1加密,得到cardSign。
调用config 接口的时候传入参数 debug: true 可以开启debug模式,页面会alert出错误信息。以下为常见错误及解决方法:
'http(s)://'部分,以及’?‘后面的GET参数部分,但不包括’#'hash后面的部分。
DEMO页面: https://www.weixinsxy.com/jssdk/
示例代码:
https://www.weixinsxy.com/jssdk/sample.zip
备注:链接中包含php、java、nodejs以及python的示例代码供第三方参考,第三方切记要对获取的accesstoken以及jsapi_ticket进行缓存以确保不会触发频率限制。
用简明的语言描述问题所在,并交代清楚遇到该问题的场景,可附上截屏图片,微信团队会尽快处理你的反馈。