微信js sdk 接口调用详解.docx

JS SDK 调用详解调用详解目录目录1 概述o1.1 使用说明1.1.1 步骤一：引入 JS 文件1.1.2 步骤二：通过 config 接口注入权限验证配置1.1.3 步骤三：通过 ready 接口处理成功验证1.1.4 步骤四：通过 error 接口处理失败验证o1.2 接口调用说明2 基础接口o2.1 判断当前客户端版本是否支持指定 JS 接口3 分享接口o3.1 获取“分享到朋友圈”按钮点击状态及自定义分享内容接口o3.2 获取“分享给朋友”按钮点击状态及自定义分享内容接口o3.3 获取“分享到 ”按钮点击状态及自定义分享内容接口o3.4 获取“分享到腾讯微博”按钮点击状态及自定义分享内容接口4 图像接口o4.1 拍照或从相册中选图接口o4.2 预览图片接口o4.3 上传图片接口o4.4 下载图片接口5 音频接口o5.1 开始录音接口o5.2 停止录音接口o5.3 监听录音自动停止接口o5.4 播放语音接口o5.5 暂停播放接口o5.6 停止播放接口o5.7 监听语音播放完毕接口o5.8 上传语音接口o5.9 下载语音接口6 智能接口o6.1 识别音频并返回识别结果接口7 设备信息o7.1 获取网络状态接口8 地理位置o8.1 使用内置地图查看位置接口o8.2 获取地理位置接口9 界面操作o9.1 隐藏右上角菜单接口o9.2 显示右上角菜单接口o9.3 关闭当前网页窗口接口o9.4 批量隐藏功能按钮接口o9.5 批量显示功能按钮接口o9.6 隐藏所有非基础按钮接口o9.7 显示所有功能按钮接口10 扫一扫o10.1 调起扫一扫接口11 小店o11.1 跳转商品页接口12 卡券o12.1 调起适用于门店的卡券列表并获取用户选择列表o12.2 批量添加卡券接口o12.3 查看卡包中的卡券接口13 支付o13.1 发起一个支付请求14 附录 1-JS-SDK 使用权限签名算法15 附录 2-所有 JS 接口列表16 附录 3-所有菜单项列表17 附录 4-位置签名生成算法18 附录 5-支付扩展字段及签名生成算法19 附录 6-卡券扩展字段及签名生成算法20 附录 7-常见错误及解决方法21 附录 8-DEMO 页面和示例代码22 附录 9-问题反馈概述概述 JS-SDK 是公众平台面向网页开发者提供的基于内的网页开发工 具包。

通过使用 JS-SDK，网页开发者可借助高效地使用拍照、选图、语音、 位置等系统的能力，同时可以直接使用分享、扫一扫、卡券、支付等 特有的能力，为用户提供更优质的网页体验此文档面向网页开发者介绍 JS-SDK 如何使用及相关注意事项使用说明使用说明在使用 JS-SDK 对应的 JS 接口前，需确保公众号已获得使用对应 JS 接口 的权限，可登录公众平台进入“开发者中心”查看对应的接口权限注意： 所有的 JS 接口只能在公众号绑定的域名下调用，公众号开发者需要先 登录公众平台进入“公众号设置”》“功能设置”里填写“JS 接口安全域名”步骤一：引入步骤一：引入 JS 文件文件在需要调用 JS 接口的页面引入如下 JS 文件，（支持 https）： AMD/CMD 标准模块加载方法加载步骤二：通过步骤二：通过 config 接口注入权限验证配置接口注入权限验证配置所有需要使用 JS-SDK 的页面必须先注入配置信息，否则将无法调用（同一个url 仅需调用一次，对于变化 url 的 SPA 的 web app 可在每次 url 变化时进行调 用）wx.config({debug: true, // 开启调试模式,调用的所有 api 的返回值会在客户端 alert 出来，若要查看传入的参数，可以在 pc 端打开，参数信息会通过 log 打 出，仅在 pc 端时才会打印。

appId: '', // 必填，公众号的唯一标识timestamp: , // 必填，生成签名的时间戳nonceStr: '', // 必填，生成签名的随机串signature: '',// 必填，签名，见附录 1jsApiList: [] // 必填，需要使用的 JS 接口列表，所有 JS 接口列表见附 录 2});步骤三：通过步骤三：通过 ready 接口处理成功验证接口处理成功验证wx.ready(function(){// config 信息验证后会执行 ready 方法，所有接口调用都必须在 config 接口获得结果之后，config 是一个客户端的异步操作，所以如果需要在页面加 载时就调用相关接口，则须把相关接口放在 ready 函数中调用来确保正确执行 对于用户触发时才调用的接口，则可以直接调用，不需要放在 ready 函数中});步骤四：通过步骤四：通过 error 接口处理失败验证接口处理失败验证wx.error(function(res){// config 信息验证失败会执行 error 函数，如签名过期导致验证失败， 具体错误信息可以打开 config 的 debug 模式查看，也可以在返回的 res 参数中 查看，对于 SPA 可以在这里更新签名。

});接口调用说明接口调用说明所有接口通过 wx 对象(也可使用 jWeixin 对象)来调用，参数是一个对象，除了 每个接口本身需要传的参数之外，还有以下通用参数：1. success：接口调用成功时执行的回调函数 2. fail：接口调用失败时执行的回调函数 3. complete：接口调用完成时执行的回调函数，无论成功或失败都会执行4. cancel：用户点击取消时的回调函数，仅部分有用户取消操作的 api 才 会用到 5. trigger: 监听 Menu 中的按钮点击时触发的方法，该方法仅支持 Menu 中的相关接口以上几个函数都带有一个参数，类型为对象，其中除了每个接口本身返回的数 据之外，还有一个通用属性 errMsg，其值格式如下：1. 调用成功时：“xxx:ok“ ，其中 xxx 为调用的接口名 2. 用户取消时：“xxx:cancel“，其中 xxx 为调用的接口名 3. 调用失败时：其值为具体错误信息基础接口基础接口判断当前客户端版本是否支持指定判断当前客户端版本是否支持指定 JS 接口接口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({title: '', // 分享标题link: '', // 分享链接imgUrl: '', // 分享图标success: function () { // 用户确认分享后执行的回调函数},cancel: function () { // 用户取消分享后执行的回调函数} });获取获取“分享给朋友分享给朋友”按钮点击状态及自定义分享内容接口按钮点击状态及自定义分享内容接口wx.onMenuShareAppMessage({title: '', // 分享标题desc: '', // 分享描述link: '', // 分享链接imgUrl: '', // 分享图标type: '', // 分享类型,music、video 或 link，不填默认为 linkdataUrl: '', // 如果 type 是 music 或 video，则要提供数据链接，默认 为空success: function () { // 用户确认分享后执行的回调函数},cancel: function () { // 用户取消分享后执行的回调函数} });获取获取“分享到分享到 ”按钮点击状态及自定义分享内容接口按钮点击状态及自定义分享内容接口wx.onMenuShare({title: '', // 分享标题desc: '', // 分享描述link: '', // 分享链接imgUrl: '' // 分享图标success: function () { // 用户确认分享后执行的回调函数},cancel: function () { // 用户取消分享后执行的回调函数} });获取获取“分享到腾讯微博分享到腾讯微博”按钮点击状态及自定义分享内容接口按钮点击状态及自定义分享内容接口wx.onMenuShareWeibo({title: '', // 分享标题desc: '', // 分享描述link: '', // 分享链接imgUrl: '' // 分享图标success: function () { // 用户确认分享后执行的回调函数},cancel: function () { // 用户取消分享后执行的回调函数} });图像接口图像接口拍照或从相册中选图接口拍照或从相册中选图接口wx.chooseImage({success: function (res) {var localIds = res.localIds; // 返回选定照片的本地 ID 列表， localId 可以作为 img 标签的 src 属性显示图片} });预览图片接口预览图片接口wx.previewImage({current: '', // 当前显示的图片链接urls: [] // 需要预览的图片链接列表});上传图片接口上传图片接口wx.uploadImage({localId: '', // 需要上传的图片的本地 ID，由 chooseImage 接口获得isShowProgressTips: 1// 默认为 1，显示进度提示success: function (res) {var serverId = res.serverId; // 返回图片的服务器端 ID} });备注：可用下载多媒体文件接口下载上传的图片，此处获得的 serverId 即 media_id，参考文档 ../12/58bfcfabbd501c7cd77c19bd9cfa8354.html下载图片接口下载图片接口wx.downloadImage({serverId: '', // 需要下载的图片的服务器端 ID，由 uploadImage 接口 获得isShowProgressTips: 1// 默认为 1，显示进度提示success: function (res) {var localId = res.localId; // 返回图片下载后的本地 ID} });音频接口音频接口开始录音接口开始录音接口wx.startRecord();停止录音接口停止录音接口wx.stopRecord({success: function (res) {var localId = res.localId;} });监听录音自动停止接口监听录音自动停止接口wx.onVoiceRecordEnd({// 录音时间超过一分钟没有停止的时候会执行 complete 回调complete: function (res) {va。