微信JS接口汇总及使用详解


Posted in Javascript onJanuary 09, 2015

基本说明

使用说明

1.引入JS文件
在需要调用JS接口的页面引入如下JS文件,(支持https):http://res.wx.qq.com/open/js/jweixin-1.0.0.js

备注:支持使用 AMD/CMD 标准模块加载方法加载

2.注入配置config接口
所有需要使用JSSDK的页面必须先注入配置信息,否则将无法调用(同一个url仅需调用一次,对于变化url的SPA的web app可在每次url变化时进行调用)。

wx.config({

 debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。

 appId: '', // 必填,公众号的唯一标识

 timestamp: , // 必填,生成签名的时间戳

 nonceStr: '', // 必填,生成签名的随机串

 signature: '',// 必填,签名,见附录1

 jsApiList: [] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2

});

3.验证通过ready接口

wx.ready(function(){
    // config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。

});

4.验证失败error接口

wx.error(function(res){

// config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。

});

接口调用说明
所有接口通过wx对象(也可使用jWeixin对象)来调用,参数是一个对象,除了每个接口本身需要传的参数之外,还有以下通用参数:

success:接口调用成功时执行的回调函数。
fail:接口调用失败时执行的回调函数。
complete:接口调用完成时执行的回调函数,无论成功或失败都会执行。
cancel:用户点击取消时的回调函数,仅部分有用户取消操作的api才会用到。
trigger: 监听Menu中的按钮点击时触发的方法,该方法仅支持Menu中的相关接口。

以上几个函数都带有一个参数,类型为对象,其中除了每个接口本身返回的数据之外,还有一个通用属性errMsg,其值格式如下:

调用成功时:"xxx:ok" ,其中xxx为调用的接口名
用户取消时:"xxx:cancel",其中xxx为调用的接口名
调用失败时:其值为具体错误信息

基础接口
判断当前客户端版本是否支持指定JS接口

wx.checkJsApi({

jsApiList: ['chooseImage'] // 需要检测的JS接口列表,所有JS接口列表见附录2,

success: function(res) {

// 以键值对的形式返回,可用的api值true,不可用为false

// 如:{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
});

分享接口

获取“分享到朋友圈”按钮点击状态及自定义分享内容接口

wx.onMenuShareTimeline({

    title: '', // 分享标题

    link: '', // 分享链接

imgUrl: '', // 分享图标

success: function () { 

// 用户确认分享后执行的回调函数

},

cancel: function () { 

// 用户取消分享后执行的回调函数

}

});

获取“分享给朋友”按钮点击状态及自定义分享内容接口

wx.onMenuShareAppMessage({

    title: '', // 分享标题

    desc: '', // 分享描述

    link: '', // 分享链接

    imgUrl: '', // 分享图标

    type: '', // 分享类型,music、video或link,不填默认为link

dataUrl: '', // 如果type是music或video,则要提供数据链接,默认为空

success: function () { 

// 用户确认分享后执行的回调函数

},

cancel: function () { 

// 用户取消分享后执行的回调函数

}

});

获取“分享到QQ”按钮点击状态及自定义分享内容接口

wx.onMenuShareQQ({

    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) {

var localId = res.localId; 

}

});

播放语音接口

wx.playVoice({

    localId: '' // 需要播放的音频的本地ID,由stopRecord接口获得

});

暂停播放接口

wx.pauseVoice({

    localId: '' // 需要暂停的音频的本地ID,由stopRecord接口获得

});

停止播放接口

wx.stopVoice({

    localId: '' // 需要停止的音频的本地ID,由stopRecord接口获得

});

监听语音播放完毕接口

wx.onVoicePlayEnd({

    serverId: '', // 需要下载的音频的服务器端ID,由uploadVoice接口获得

    success: function (res) {

        var localId = res.localId; // 返回音频的本地ID

    }

});

上传语音接口

wx.uploadVoice({

localId: '', // 需要上传的音频的本地ID,由stopRecord接口获得

isShowProgressTips: 1// 默认为1,显示进度提示

    success: function (res) {

        var serverId = res.serverId; // 返回音频的服务器端ID

    }

});

备注:可用微信下载多媒体文件接口下载上传的语音,此处获得的 serverId 即 media_id,参考文档../12/58bfcfabbd501c7cd77c19bd9cfa8354.html

下载语音接口

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({

    timestamp: 0, // 位置签名时间戳,仅当需要兼容6.0.2版本之前时提供

    nonceStr: '', // 位置签名随机串,仅当需要兼容6.0.2版本之前时提供

    addrSign: '', // 位置签名,仅当需要兼容6.0.2版本之前时提供,详见附录4

    success: function (res) {

        var longitude = res.longitude; // 纬度,浮点数,范围为90 ~ -90

        var latitude = res.latitude; // 经度,浮点数,范围为180 ~ -180。

        var speed = res.speed; // 速度,以米/每秒计

        var accuracy = res.accuracy; // 位置精度

    }

});

界面操作

隐藏右上角菜单接口

wx.hideOptionMenu();

显示右上角菜单接口

wx.showOptionMenu();

关闭当前网页窗口接口

wx.closeWindow();

批量隐藏功能按钮接口

wx.hideMenuItems({

    menuList: [] // 要隐藏的菜单项,所有menu项见附录3

});

批量显示功能按钮接口

wx.showMenuItems({

    menuList: [] // 要显示的菜单项,所有menu项见附录3

});

隐藏所有非基础按钮接口

wx.hideAllNonBaseMenuItem();

显示所有功能按钮接口

wx.showAllNonBaseMenuItem();

微信扫一扫

调起微信扫一扫接口

wx.scanQRCode({

desc: 'scanQRCode desc',

needResult: 0, // 默认为0,扫描结果由微信处理,1则直接返回扫描结果,

scanType: ["qrCode","barCode"], // 可以指定扫二维码还是一维码,默认二者都有

success: function () {

var result = res.resultStr; // 当needResult 为 1 时,扫码返回的结果

}

});

收获地址

编辑收货地址接口

wx.editAddress(

    timestamp: 0, // 位置签名时间戳,仅当需要兼容6.0.2版本之前时提供

    nonceStr: '', // 位置签名随机串,仅当需要兼容6.0.2版本之前时提供

    addrSign: '', // 位置签名,仅当需要兼容6.0.2版本之前时提供,详见附录4

    success: function (res) {

        var userName = res.userName; // 收货人姓名

        var telNumber = res.telNumber; // 收货人电话

        var postalCode = res.postalCode; // 邮编

        var provinceName = res.provinceName; // 国标收货地址第一级地址

        var cityName = res.cityName; // 国标收货地址第二级地址

        var countryName = res.countryName; // 国标收货地址第三级地址

        var address = res.address; // 详细收货地址信息

        var nationalCode = res.nationalCode; // 收货地址国家码

    }

});

获取最近的收货地址接口

wx.getLatestAddress({

    timestamp: 0, // 位置签名时间戳,仅当需要兼容6.0.2版本之前时提供

    nonceStr: '', // 位置签名随机串,仅当需要兼容6.0.2版本之前时提供

    addrSign: '', // 位置签名,仅当需要兼容6.0.2版本之前时提供,详见附录4

    success: function (res) {

        var userName = res.userName; // 收货人姓名

        var telNumber = res.telNumber; // 收货人电话

        var postalCode = res.postalCode; // 邮编

        var provinceName = res.provinceName; // 国标收货地址第一级地址

        var cityName = res.cityName; // 国标收货地址第二级地址

        var countryName = res.countryName; // 国标收货地址第三级地址

        var address = res.address; // 详细收货地址信息

        var nationalCode = res.nationalCode; // 收货地址国家码

    }

});

微信小店

跳转微信商品页接口

wx.openProductSpecificView({

productId: '', // 商品id

viewType: '' // 0.默认值,普通商品详情页1.扫一扫商品详情页2.小店商品详情页

});

微信卡券

调起适用于门店的卡券列表并获取用户选择列表

wx.chooseCard({

    shopId: '', // 门店Id

    cardType: '', // 卡券类型

    cardId: '', // 卡券Id

    timeStamp: 0, // 卡券签名时间戳

    nonceStr: '', // 卡券签名随机串

    cardSign: '', // 卡券签名,详见附录6

    success: function (res) {

        var cardList= res.cardList; // 用户选中的卡券列表信息

    }

});

批量添加卡券接口

wx.addCard({

cardList: [{

cardId: '',

cardExt: ''

}], // 需要添加的卡券列表

    success: function (res) {

        var cardList = res.cardList; // 添加的卡券列表信息

    }

});

查看微信卡包中的卡券接口

wx.openCard({

cardList: [{

cardId: '',

code: ''

}]// 需要打开的卡券列表

});

微信支付

发起一个微信支付请求

wx.chooseWXPay({

timestamp: 0, // 支付签名时间戳

noncestr: '', // 支付签名随机串

package: '', // 订单详情扩展字符串,详见附录5

paySign: '', // 支付签名,详见附录5

});
Javascript 相关文章推荐
jquery的ajax请求全面了解
Mar 20 Javascript
三种检测iPhone/iPad设备方向的方法
Apr 23 Javascript
javascript实现动态模态绑定grid过程代码
Sep 22 Javascript
jquery+ajax请求且带返回值的代码
Aug 12 Javascript
使用Ajax生成的Excel文件并下载的实例
Nov 21 Javascript
微信公众号开发 自定义菜单跳转页面并获取用户信息实例详解
Dec 08 Javascript
javascript监听页面刷新和页面关闭事件方法详解
Jan 09 Javascript
AngularJS 打开新的标签页实现代码
Sep 07 Javascript
基于vue 动态加载图片src的解决方法
Feb 05 Javascript
jquery操作checkbox的常用方法总结【附测试源码下载】
Jun 10 jQuery
如何基于JS截获动态代码
Dec 25 Javascript
微信小程序收藏功能的实现代码
Jun 19 Javascript
推荐一款jQuery插件模板
Jan 09 #Javascript
JavaScript中Cookie操作实例
Jan 09 #Javascript
使用javascript实现简单的选项卡切换
Jan 09 #Javascript
14个有用的Jquery技巧分享
Jan 08 #Javascript
jQuery中insertBefore()方法用法实例
Jan 08 #Javascript
jQuery中insertAfter()方法用法实例
Jan 08 #Javascript
jQuery中prependTo()方法用法实例
Jan 08 #Javascript
You might like
PHP 已经成熟
2006/12/04 PHP
php判断电脑访问、手机访问的例子
2014/05/10 PHP
php实现建立多层级目录的方法
2014/07/19 PHP
PHP与MYSQL中UTF8编码的中文排序实例
2014/10/21 PHP
PHP中类与对象功能、用法实例解读
2020/03/27 PHP
javascript+dom树型菜单类,希望朋友们一起进步
2007/05/03 Javascript
javascript YUI 读码日记之 YAHOO.util.Dom - Part.4
2008/03/22 Javascript
JavaScript国旗变换效果代码
2008/08/13 Javascript
JQuery解析HTML、JSON和XML实例详解
2014/03/29 Javascript
javascript校验价格合法性实例(必须输入2位小数)
2014/05/05 Javascript
在AngularJS应用中实现一些动画效果的代码
2015/06/18 Javascript
基于JavaScript实现表格滚动分页
2017/11/22 Javascript
解读vue生成的文件目录结构及说明
2017/11/27 Javascript
mocha的时序规则讲解
2019/02/16 Javascript
基于vue-cli、elementUI的Vue超简单入门小例子(推荐)
2019/04/17 Javascript
Layer UI表格列日期格式化及取消自动填充日期的实现方法
2020/05/10 Javascript
在Mac OS上部署Nginx和FastCGI以及Flask框架的教程
2015/05/02 Python
Python中的pygal安装和绘制直方图代码分享
2017/12/08 Python
Linux(Redhat)安装python3.6虚拟环境(推荐)
2018/05/05 Python
python3中函数参数的四种简单用法
2018/07/09 Python
Python实现登陆文件验证方法
2018/10/06 Python
python+pyqt5实现KFC点餐收银系统
2019/01/24 Python
Python scipy的二维图像卷积运算与图像模糊处理操作示例
2019/09/06 Python
python图形界面开发之wxPython树控件使用方法详解
2020/02/24 Python
你应该知道的30个css选择器
2014/03/19 HTML / CSS
Lookfantastic澳大利亚官网:英国知名美妆购物网站
2021/01/07 全球购物
mysql_pconnect()和mysql_connect()有什么区别
2012/05/25 面试题
师范生自荐信
2013/10/27 职场文书
幼儿如何来做好自我评价
2013/11/05 职场文书
法律专业应届生自荐信范文
2014/01/06 职场文书
幼儿教师国培感言
2014/02/19 职场文书
《问银河》教学反思
2014/02/19 职场文书
减负增效提质方案
2014/05/23 职场文书
2014班子“三严三实”对照检查材料思想汇报
2014/09/18 职场文书
《七月的天山》教学反思
2016/02/19 职场文书
如何利用 CSS Overview 面板重构优化你的网站
2021/10/24 HTML / CSS