微信js SDK接口
2016-07-07 14:03
681 查看
微信JS-SDK说明文档 http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html
一、微信登录功能
在进行微信OAuth2.在进行微信OAuth2.0授权登录接入之前，在微信开放平台注册开发者帐号，并拥有一个已审核通过的网站应用，并获得相应的AppID和AppSecret，申请微信登录且通过审核后，可开始接入流程。（微信开放平台网址：https://open.weixin.qq.com/cgi-bin/showdocument?action=dir_list&t=resource/res_list&verify=1&id=open1419316505&token=&lang=zh_CN）
实例效果：
<!DOCTYPE html>
<html>
<head>
<title>微信登录功能</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="description" content="">
<meta name="keywords" content="">
<script src="http://www.xueersi.com/lib/jQuery/1.11.1/jquery.min.js?1458897912"></script>
</head>
<body>
<a href="https://open.weixin.qq.com/connect/qrconnect?appid=wx6b26b7c75e8f3e5a&redirect_uri=http%3A%2F%2Fwww.imooc.com%2Fpassport%2Fuser%2Ftpcallback%3Freferer%3Dhttp%3A%2F%2Fwww.imooc.com%26tp%3Dweixin%26bind%3D0&response_type=code&scope=snsapi_login#wechat_redirect">慕课网微信登录功能</a>
<a href="https://open.weixin.qq.com/connect/qrconnect?appid=wxadfc3188c82ef252&redirect_uri=http%3A%2F%2Fpassport.jikexueyuan.com%2Fconnect%2Fsuccess%3Ft%3Dweixin&response_type=code&scope=snsapi_login&t=weixin&state=weixin#wechat_redirect">极客学院微信登录功能</a>
<button id="LoginBtn">测试微信登录功能</button>
<div id="WXBox"></div>
</body>
</html>
<script src="http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>
<script type="text/javascript">
//js微信登录功能可以直接将所有配置写在a标签的额href链接中也可以写在js配置中
$('#LoginBtn').click(function(){
var obj = new WxLogin({
id:"WXBox", //第三方页面显示二维码的容器id
appid: "wxadfc3188c82ef252", //应用唯一标识，在微信开放平台提交应用审核通过后获得
scope: "snsapi_login", //应用授权作用域，拥有多个作用域用逗号（,）分隔，网页应用目前仅填写snsapi_login即可
redirect_uri: "http%3A%2F%2Fpassport.jikexueyuan.com%2Fconnect%2Fsuccess%3Ft%3Dweixin",//重定向地址，需要进行UrlEncode
state: "weixin#wechat_redirect"//用于保持请求和回调的状态，授权请求后原样带回给第三方。该参数可用于防止csrf攻击（跨站请求伪造攻击），建议第三方带上该参数，可设置为简单的随机数加session进行校验
});
})
</script>
二、微信JS接口相关功能实例
微信JS接口 分享到朋友圈 分享给朋友 分享到QQ 拍照或从手机相册中选图 识别音频并返回识别结果 使用微信内置地图查看位置
来源：http://www.cnblogs.com/txw1958/p/weixin-js.html
概述
微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包。
通过使用微信JS-SDK，网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力，同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力，为微信用户提供更优质的网页体验。
此文档面向网页开发者介绍微信JS-SDK如何使用及相关注意事项。
注意： 所有的JS接口只能在公众号绑定的域名下调用，公众号开发者需要先登录微信公众平台进入“公众号设置”》“功能设置”里填写“JS接口安全域名”。
备注：支持使用 AMD/CMD 标准模块加载方法加载
success：接口调用成功时执行的回调函数。
fail：接口调用失败时执行的回调函数。
complete：接口调用完成时执行的回调函数，无论成功或失败都会执行。
cancel：用户点击取消时的回调函数，仅部分有用户取消操作的api才会用到。
trigger: 监听Menu中的按钮点击时触发的方法，该方法仅支持Menu中的相关接口。
以上几个函数都带有一个参数，类型为对象，其中除了每个接口本身返回的数据之外，还有一个通用属性errMsg，其值格式如下：
调用成功时："xxx:ok" ，其中xxx为调用的接口名
用户取消时："xxx:cancel"，其中xxx为调用的接口名
调用失败时：其值为具体错误信息
备注：checkJsApi接口是客户端6.0.2新引入的一个预留接口，第一期开放的接口均可不使用checkJsApi来检测。
备注：可用微信下载多媒体文件接口下载上传的图片，此处获得的 serverId 即 media_id，参考文档 ../12/58bfcfabbd501c7cd77c19bd9cfa8354.html
备注：可用微信下载多媒体文件接口下载上传的语音，此处获得的 serverId 即 media_id，参考文档 ../12/58bfcfabbd501c7cd77c19bd9cfa8354.html
一、微信登录功能
在进行微信OAuth2.在进行微信OAuth2.0授权登录接入之前，在微信开放平台注册开发者帐号，并拥有一个已审核通过的网站应用，并获得相应的AppID和AppSecret，申请微信登录且通过审核后，可开始接入流程。（微信开放平台网址：https://open.weixin.qq.com/cgi-bin/showdocument?action=dir_list&t=resource/res_list&verify=1&id=open1419316505&token=&lang=zh_CN）
实例效果：
<!DOCTYPE html>
<html>
<head>
<title>微信登录功能</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="description" content="">
<meta name="keywords" content="">
<script src="http://www.xueersi.com/lib/jQuery/1.11.1/jquery.min.js?1458897912"></script>
</head>
<body>
<a href="https://open.weixin.qq.com/connect/qrconnect?appid=wx6b26b7c75e8f3e5a&redirect_uri=http%3A%2F%2Fwww.imooc.com%2Fpassport%2Fuser%2Ftpcallback%3Freferer%3Dhttp%3A%2F%2Fwww.imooc.com%26tp%3Dweixin%26bind%3D0&response_type=code&scope=snsapi_login#wechat_redirect">慕课网微信登录功能</a>
<a href="https://open.weixin.qq.com/connect/qrconnect?appid=wxadfc3188c82ef252&redirect_uri=http%3A%2F%2Fpassport.jikexueyuan.com%2Fconnect%2Fsuccess%3Ft%3Dweixin&response_type=code&scope=snsapi_login&t=weixin&state=weixin#wechat_redirect">极客学院微信登录功能</a>
<button id="LoginBtn">测试微信登录功能</button>
<div id="WXBox"></div>
</body>
</html>
<script src="http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>
<script type="text/javascript">
//js微信登录功能可以直接将所有配置写在a标签的额href链接中也可以写在js配置中
$('#LoginBtn').click(function(){
var obj = new WxLogin({
id:"WXBox", //第三方页面显示二维码的容器id
appid: "wxadfc3188c82ef252", //应用唯一标识，在微信开放平台提交应用审核通过后获得
scope: "snsapi_login", //应用授权作用域，拥有多个作用域用逗号（,）分隔，网页应用目前仅填写snsapi_login即可
redirect_uri: "http%3A%2F%2Fpassport.jikexueyuan.com%2Fconnect%2Fsuccess%3Ft%3Dweixin",//重定向地址，需要进行UrlEncode
state: "weixin#wechat_redirect"//用于保持请求和回调的状态，授权请求后原样带回给第三方。该参数可用于防止csrf攻击（跨站请求伪造攻击），建议第三方带上该参数，可设置为简单的随机数加session进行校验
});
})
</script>
二、微信JS接口相关功能实例
微信JS接口 分享到朋友圈 分享给朋友 分享到QQ 拍照或从手机相册中选图 识别音频并返回识别结果 使用微信内置地图查看位置
来源：http://www.cnblogs.com/txw1958/p/weixin-js.html
概述
微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包。
通过使用微信JS-SDK，网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力，同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力，为微信用户提供更优质的网页体验。
此文档面向网页开发者介绍微信JS-SDK如何使用及相关注意事项。
使用说明
在使用微信JS-SDK对应的JS接口前，需确保公众号已获得使用对应JS接口的权限，可登录微信公众平台进入“开发者中心”查看对应的接口权限。注意： 所有的JS接口只能在公众号绑定的域名下调用，公众号开发者需要先登录微信公众平台进入“公众号设置”》“功能设置”里填写“JS接口安全域名”。
步骤一：引入JS文件
在需要调用JS接口的页面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.0.0.js备注：支持使用 AMD/CMD 标准模块加载方法加载
步骤二：通过config接口注入权限验证配置
所有需要使用JS-SDK的页面必须先注入配置信息，否则将无法调用（同一个url仅需调用一次，对于变化url的SPA的web app可在每次url变化时进行调用）。wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: '', // 必填，公众号的唯一标识
timestamp: , // 必填，生成签名的时间戳
nonceStr: '', // 必填，生成签名的随机串
signature: '',// 必填，签名，见附录1
jsApiList: [] // 必填，需要使用的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对象)来调用，参数是一个对象，除了每个接口本身需要传的参数之外，还有以下通用参数：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"}
});备注：checkJsApi接口是客户端6.0.2新引入的一个预留接口，第一期开放的接口均可不使用checkJsApi来检测。
分享接口
请注意不要有诱导分享等违规行为，对于诱导分享行为将永久回收公众号接口权限，详细规则请查看：朋友圈管理常见问题 。获取“分享到朋友圈”按钮点击状态及自定义分享内容接口
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 (res) {
var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
}
});微信小店
跳转微信商品页接口
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
});
html代码部分:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>微信JS-SDK Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
<link rel="stylesheet" href="css/style.css">
</head>
<body ontouchstart="">
<div class="wxapi_container">
<div class="wxapi_index_container">
<ul class="label_box lbox_close wxapi_index_list">
<li class="label_item wxapi_index_item"><a class="label_inner" href="#menu-basic">基础接口</a></li>
<li class="label_item wxapi_index_item"><a class="label_inner" href="#menu-share">分享接口</a></li>
<li class="label_item wxapi_index_item"><a class="label_inner" href="#menu-image">图像接口</a></li>
<li class="label_item wxapi_index_item"><a class="label_inner" href="#menu-voice">音频接口</a></li>
<li class="label_item wxapi_index_item"><a class="label_inner" href="#menu-smart">智能接口</a></li>
<li class="label_item wxapi_index_item"><a class="label_inner" href="#menu-device">设备信息接口</a></li>
<li class="label_item wxapi_index_item"><a class="label_inner" href="#menu-location">地理位置接口</a></li>
<li class="label_item wxapi_index_item"><a class="label_inner" href="#menu-webview">界面操作接口</a></li>
<li class="label_item wxapi_index_item"><a class="label_inner" href="#menu-scan">微信扫一扫接口</a></li>
<li class="label_item wxapi_index_item"><a class="label_inner" href="#menu-shopping">微信小店接口</a></li>
<li class="label_item wxapi_index_item"><a class="label_inner" href="#menu-card">微信卡券接口</a></li>
<li class="label_item wxapi_index_item"><a class="label_inner" href="#menu-pay">微信支付接口</a></li>
</ul>
</div>
<div class="lbox_close wxapi_form">
<h3 id="menu-basic">基础接口</h3>
<span class="desc">判断当前客户端是否支持指定JS接口</span>
<button class="btn btn_primary" id="checkJsApi">checkJsApi</button>
<h3 id="menu-share">分享接口</h3>
<span class="desc">获取“分享到朋友圈”按钮点击状态及自定义分享内容接口</span>
<button class="btn btn_primary" id="onMenuShareTimeline">onMenuShareTimeline</button>
<span class="desc">获取“分享给朋友”按钮点击状态及自定义分享内容接口</span>
<button class="btn btn_primary" id="onMenuShareAppMessage">onMenuShareAppMessage</button>
<span class="desc">获取“分享到QQ”按钮点击状态及自定义分享内容接口</span>
<button class="btn btn_primary" id="onMenuShareQQ">onMenuShareQQ</button>
<span class="desc">获取“分享到腾讯微博”按钮点击状态及自定义分享内容接口</span>
<button class="btn btn_primary" id="onMenuShareWeibo">onMenuShareWeibo</button>
<h3 id="menu-image">图像接口</h3>
<span class="desc">拍照或从手机相册中选图接口</span>
<button class="btn btn_primary" id="chooseImage">chooseImage</button>
<span class="desc">预览图片接口</span>
<button class="btn btn_primary" id="previewImage">previewImage</button>
<span class="desc">上传图片接口</span>
<button class="btn btn_primary" id="uploadImage">uploadImage</button>
<span class="desc">下载图片接口</span>
<button class="btn btn_primary" id="downloadImage">downloadImage</button>
<h3 id="menu-voice">音频接口</h3>
<span class="desc">开始录音接口</span>
<button class="btn btn_primary" id="startRecord">startRecord</button>
<span class="desc">停止录音接口</span>
<button class="btn btn_primary" id="stopRecord">stopRecord</button>
<span class="desc">播放语音接口</span>
<button class="btn btn_primary" id="playVoice">playVoice</button>
<span class="desc">暂停播放接口</span>
<button class="btn btn_primary" id="pauseVoice">pauseVoice</button>
<span class="desc">停止播放接口</span>
<button class="btn btn_primary" id="stopVoice">stopVoice</button>
<span class="desc">上传语音接口</span>
<button class="btn btn_primary" id="uploadVoice">uploadVoice</button>
<span class="desc">下载语音接口</span>
<button class="btn btn_primary" id="downloadVoice">downloadVoice</button>
<h3 id="menu-smart">智能接口</h3>
<span class="desc">识别音频并返回识别结果接口</span>
<button class="btn btn_primary" id="translateVoice">translateVoice</button>
<h3 id="menu-device">设备信息接口</h3>
<span class="desc">获取网络状态接口</span>
<button class="btn btn_primary" id="getNetworkType">getNetworkType</button>
<h3 id="menu-location">地理位置接口</h3>
<span class="desc">使用微信内置地图查看位置接口</span>
<button class="btn btn_primary" id="openLocation">openLocation</button>
<span class="desc">获取地理位置接口</span>
<button class="btn btn_primary" id="getLocation">getLocation</button>
<h3 id="menu-webview">界面操作接口</h3>
<span class="desc">隐藏右上角菜单接口</span>
<button class="btn btn_primary" id="hideOptionMenu">hideOptionMenu</button>
<span class="desc">显示右上角菜单接口</span>
<button class="btn btn_primary" id="showOptionMenu">showOptionMenu</button>
<span class="desc">关闭当前网页窗口接口</span>
<button class="btn btn_primary" id="closeWindow">closeWindow</button>
<span class="desc">批量隐藏功能按钮接口</span>
<button class="btn btn_primary" id="hideMenuItems">hideMenuItems</button>
<span class="desc">批量显示功能按钮接口</span>
<button class="btn btn_primary" id="showMenuItems">showMenuItems</button>
<span class="desc">隐藏所有非基础按钮接口</span>
<button class="btn btn_primary" id="hideAllNonBaseMenuItem">hideAllNonBaseMenuItem</button>
<span class="desc">显示所有功能按钮接口</span>
<button class="btn btn_primary" id="showAllNonBaseMenuItem">showAllNonBaseMenuItem</button>
<h3 id="menu-scan">微信扫一扫</h3>
<span class="desc">调起微信扫一扫接口</span>
<button class="btn btn_primary" id="scanQRCode0">scanQRCode(微信处理结果)</button>
<button class="btn btn_primary" id="scanQRCode1">scanQRCode(直接返回结果)</button>
<h3 id="menu-shopping">微信小店接口</h3>
<span class="desc">跳转微信商品页接口</span>
<button class="btn btn_primary" id="openProductSpecificView">openProductSpecificView</button>
<h3 id="menu-card">微信卡券接口</h3>
<span class="desc">批量添加卡券接口</span>
<button class="btn btn_primary" id="addCard">addCard</button>
<span class="desc">调起适用于门店的卡券列表并获取用户选择列表</span>
<button class="btn btn_primary" id="chooseCard">chooseCard</button>
<span class="desc">查看微信卡包中的卡券接口</span>
<button class="btn btn_primary" id="openCard">openCard</button>
<h3 id="menu-pay">微信支付接口</h3>
<span class="desc">发起一个微信支付请求</span>
<button class="btn btn_primary" id="chooseWXPay">chooseWXPay</button>
</div>
</div>
</body>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script>
/*
* 注意：
* 1. 所有的JS接口只能在公众号绑定的域名下调用，公众号开发者需要先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
* 2. 如果发现在 Android 不能分享自定义内容，请到官网下载最新的包覆盖安装，Android 自定义分享接口需升级至 6.0.2.58 版本及以上。
* 3. 完整 JS-SDK 文档地址：http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html
*
* 如有问题请通过以下渠道反馈：
* 邮箱地址：weixin-open@qq.com
* 邮件主题：【微信JS-SDK反馈】具体问题
* 邮件内容说明：用简明的语言描述问题所在，并交代清楚遇到该问题的场景，可附上截屏图片，微信团队会尽快处理你的反馈。
*/
wx.config({
debug: false,
appId: 'wxf8b4f85f3a794e77',
timestamp: 1421142450,
nonceStr: '9hKgyCLgGZOgQmEI',
signature: 'bf7a5555f9ad0e7e491535f232349a40510a6f8f',
jsApiList: [
'checkJsApi',
'onMenuShareTimeline',
'onMenuShareAppMessage',
'onMenuShareQQ',
'onMenuShareWeibo',
'hideMenuItems',
'showMenuItems',
'hideAllNonBaseMenuItem',
'showAllNonBaseMenuItem',
'translateVoice',
'startRecord',
'stopRecord',
'onRecordEnd',
'playVoice',
'pauseVoice',
'stopVoice',
'uploadVoice',
'downloadVoice',
'chooseImage',
'previewImage',
'uploadImage',
'downloadImage',
'getNetworkType',
'openLocation',
'getLocation',
'hideOptionMenu',
'showOptionMenu',
'closeWindow',
'scanQRCode',
'chooseWXPay',
'openProductSpecificView',
'addCard',
'chooseCard',
'openCard'
]
});
</script>
<script src="js/demo.js"> </script>
</html>demo.js部分:
/*
* 注意：
* 1. 所有的JS接口只能在公众号绑定的域名下调用，公众号开发者需要先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
* 2. 如果发现在 Android 不能分享自定义内容，请到官网下载最新的包覆盖安装，Android 自定义分享接口需升级至 6.0.2.58 版本及以上。
* 3. 完整 JS-SDK 文档地址：http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html
*
* 如有问题请通过以下渠道反馈：
* 邮箱地址：weixin-open@qq.com
* 邮件主题：【微信JS-SDK反馈】具体问题
* 邮件内容说明：用简明的语言描述问题所在，并交代清楚遇到该问题的场景，可附上截屏图片，微信团队会尽快处理你的反馈。
*/
wx.config({
debug: false,
appId: 'wxf8b4f85f3a794e77',
timestamp: 1421142450,
nonceStr: '9hKgyCLgGZOgQmEI',
signature: 'bf7a5555f9ad0e7e491535f232349a40510a6f8f',
jsApiList: [
'checkJsApi',
'onMenuShareTimeline',
'onMenuShareAppMessage',
'onMenuShareQQ',
'onMenuShareWeibo',
'hideMenuItems',
'showMenuItems',
'hideAllNonBaseMenuItem',
'showAllNonBaseMenuItem',
'translateVoice',
'startRecord',
'stopRecord',
'onRecordEnd',
'playVoice',
'pauseVoice',
'stopVoice',
'uploadVoice',
'downloadVoice',
'chooseImage',
'previewImage',
'uploadImage',
'downloadImage',
'getNetworkType',
'openLocation',
'getLocation',
'hideOptionMenu',
'showOptionMenu',
'closeWindow',
'scanQRCode',
'chooseWXPay',
'openProductSpecificView',
'addCard',
'chooseCard',
'openCard'
]
});
/*
* 注意：
* 1. 所有的JS接口只能在公众号绑定的域名下调用，公众号开发者需要先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
* 2. 如果发现在 Android 不能分享自定义内容，请到官网下载最新的包覆盖安装，Android 自定义分享接口需升级至 6.0.2.58 版本及以上。
* 3. 完整 JS-SDK 文档地址：http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html
*
* 如有问题请通过以下渠道反馈：
* 邮箱地址：weixin-open@qq.com
* 邮件主题：【微信JS-SDK反馈】具体问题
* 邮件内容说明：用简明的语言描述问题所在，并交代清楚遇到该问题的场景，可附上截屏图片，微信团队会尽快处理你的反馈。
*/
wx.ready(function () {
// 1 判断当前版本是否支持指定 JS 接口，支持批量判断
document.querySelector('#checkJsApi').onclick = function () {
wx.checkJsApi({
jsApiList: [
'getNetworkType',
'previewImage'
],
success: function (res) {
alert(JSON.stringify(res));
}
});
};
// 2. 分享接口
// 2.1 监听“分享给朋友”，按钮点击、自定义分享内容及分享结果接口
document.querySelector('#onMenuShareAppMessage').onclick = function () {
wx.onMenuShareAppMessage({
title: '互联网之子',
desc: '在长大的过程中，我才慢慢发现，我身边的所有事，别人跟我说的所有事，那些所谓本来如此，注定如此的事，它们其实没有非得如此，事情是可以改变的。更重要的是，有些事既然错了，那就该做出改变。',
link: 'http://movie.douban.com/subject/25785114/',
imgUrl: 'http://img3.douban.com/view/movie_poster_cover/spst/public/p2166127561.jpg',
trigger: function (res) {
alert('用户点击发送给朋友');
},
success: function (res) {
alert('已分享');
},
cancel: function (res) {
alert('已取消');
},
fail: function (res) {
alert(JSON.stringify(res));
}
});
alert('已注册获取“发送给朋友”状态事件');
};
// 2.2 监听“分享到朋友圈”按钮点击、自定义分享内容及分享结果接口
document.querySelector('#onMenuShareTimeline').onclick = function () {
wx.onMenuShareTimeline({
title: '互联网之子',
link: 'http://movie.douban.com/subject/25785114/',
imgUrl: 'http://img3.douban.com/view/movie_poster_cover/spst/public/p2166127561.jpg',
trigger: function (res) {
alert('用户点击分享到朋友圈');
},
success: function (res) {
alert('已分享');
},
cancel: function (res) {
alert('已取消');
},
fail: function (res) {
alert(JSON.stringify(res));
}
});
alert('已注册获取“分享到朋友圈”状态事件');
};
// 2.3 监听“分享到QQ”按钮点击、自定义分享内容及分享结果接口
document.querySelector('#onMenuShareQQ').onclick = function () {
wx.onMenuShareQQ({
title: '互联网之子',
desc: '在长大的过程中，我才慢慢发现，我身边的所有事，别人跟我说的所有事，那些所谓本来如此，注定如此的事，它们其实没有非得如此，事情是可以改变的。更重要的是，有些事既然错了，那就该做出改变。',
link: 'http://movie.douban.com/subject/25785114/',
imgUrl: 'http://img3.douban.com/view/movie_poster_cover/spst/public/p2166127561.jpg',
trigger: function (res) {
alert('用户点击分享到QQ');
},
complete: function (res) {
alert(JSON.stringify(res));
},
success: function (res) {
alert('已分享');
},
cancel: function (res) {
alert('已取消');
},
fail: function (res) {
alert(JSON.stringify(res));
}
});
alert('已注册获取“分享到 QQ”状态事件');
};
// 2.4 监听“分享到微博”按钮点击、自定义分享内容及分享结果接口
document.querySelector('#onMenuShareWeibo').onclick = function () {
wx.onMenuShareWeibo({
title: '互联网之子',
desc: '在长大的过程中，我才慢慢发现，我身边的所有事，别人跟我说的所有事，那些所谓本来如此，注定如此的事，它们其实没有非得如此，事情是可以改变的。更重要的是，有些事既然错了，那就该做出改变。',
link: 'http://movie.douban.com/subject/25785114/',
imgUrl: 'http://img3.douban.com/view/movie_poster_cover/spst/public/p2166127561.jpg',
trigger: function (res) {
alert('用户点击分享到微博');
},
complete: function (res) {
alert(JSON.stringify(res));
},
success: function (res) {
alert('已分享');
},
cancel: function (res) {
alert('已取消');
},
fail: function (res) {
alert(JSON.stringify(res));
}
});
alert('已注册获取“分享到微博”状态事件');
};
// 3 智能接口
var voice = {
localId: '',
serverId: ''
};
// 3.1 识别音频并返回识别结果
document.querySelector('#translateVoice').onclick = function () {
if (voice.localId == '') {
alert('请先使用 startRecord 接口录制一段声音');
return;
}
wx.translateVoice({
localId: voice.localId,
complete: function (res) {
if (res.hasOwnProperty('translateResult')) {
alert('识别结果：' + res.translateResult);
} else {
alert('无法识别');
}
}
});
};
// 4 音频接口
// 4.2 开始录音
document.querySelector('#startRecord').onclick = function () {
wx.startRecord({
cancel: function () {
alert('用户拒绝授权录音');
}
});
};
// 4.3 停止录音
document.querySelector('#stopRecord').onclick = function () {
wx.stopRecord({
success: function (res) {
voice.localId = res.localId;
},
fail: function (res) {
alert(JSON.stringify(res));
}
});
};
// 4.4 监听录音自动停止
wx.onVoiceRecordEnd({
complete: function (res) {
voice.localId = res.localId;
alert('录音时间已超过一分钟');
}
});
// 4.5 播放音频
document.querySelector('#playVoice').onclick = function () {
if (voice.localId == '') {
alert('请先使用 startRecord 接口录制一段声音');
return;
}
wx.playVoice({
localId: voice.localId
});
};
// 4.6 暂停播放音频
document.querySelector('#pauseVoice').onclick = function () {
wx.pauseVoice({
localId: voice.localId
});
};
// 4.7 停止播放音频
document.querySelector('#stopVoice').onclick = function () {
wx.stopVoice({
localId: voice.localId
});
};
// 4.8 监听录音播放停止
wx.onVoicePlayEnd({
complete: function (res) {
alert('录音（' + res.localId + '）播放结束');
}
});
// 4.8 上传语音
document.querySelector('#uploadVoice').onclick = function () {
if (voice.localId == '') {
alert('请先使用 startRecord 接口录制一段声音');
return;
}
wx.uploadVoice({
localId: voice.localId,
success: function (res) {
alert('上传语音成功，serverId 为' + res.serverId);
voice.serverId = res.serverId;
}
});
};
// 4.9 下载语音
document.querySelector('#downloadVoice').onclick = function () {
if (voice.serverId == '') {
alert('请先使用 uploadVoice 上传声音');
return;
}
wx.downloadVoice({
serverId: voice.serverId,
success: function (res) {
alert('下载语音成功，localId 为' + res.localId);
voice.localId = res.localId;
}
});
};
// 5 图片接口
// 5.1 拍照、本地选图
var images = {
localId: [],
serverId: []
};
document.querySelector('#chooseImage').onclick = function () {
wx.chooseImage({
success: function (res) {
images.localId = res.localIds;
alert('已选择 ' + res.localIds.length + ' 张图片');
}
});
};
// 5.2 图片预览
document.querySelector('#previewImage').onclick = function () {
wx.previewImage({
current: 'http://img5.douban.com/view/photo/photo/public/p1353993776.jpg',
urls: [
'http://img3.douban.com/view/photo/photo/public/p2152117150.jpg',
'http://img5.douban.com/view/photo/photo/public/p1353993776.jpg',
'http://img3.douban.com/view/photo/photo/public/p2152134700.jpg'
]
});
};
// 5.3 上传图片
document.querySelector('#uploadImage').onclick = function () {
if (images.localId.length == 0) {
alert('请先使用 chooseImage 接口选择图片');
return;
}
var i = 0, length = images.localId.length;
images.serverId = [];
function upload() {
wx.uploadImage({
localId: images.localId[i],
success: function (res) {
i++;
alert('已上传：' + i + '/' + length);
images.serverId.push(res.serverId);
if (i < length) {
upload();
}
},
fail: function (res) {
alert(JSON.stringify(res));
}
});
}
upload();
};
// 5.4 下载图片
document.querySelector('#downloadImage').onclick = function () {
if (images.serverId.length === 0) {
alert('请先使用 uploadImage 上传图片');
return;
}
var i = 0, length = images.serverId.length;
images.localId = [];
function download() {
wx.downloadImage({
serverId: images.serverId[i],
success: function (res) {
i++;
alert('已下载：' + i + '/' + length);
images.localId.push(res.localId);
if (i < length) {
download();
}
}
});
}
download();
};
// 6 设备信息接口
// 6.1 获取当前网络状态
document.querySelector('#getNetworkType').onclick = function () {
wx.getNetworkType({
success: function (res) {
alert(res.networkType);
},
fail: function (res) {
alert(JSON.stringify(res));
}
});
};
// 7 地理位置接口
// 7.1 查看地理位置
document.querySelector('#openLocation').onclick = function () {
wx.openLocation({
latitude: 23.099994,
longitude: 113.324520,
name: 'TIT 创意园',
address: '广州市海珠区新港中路 397 号',
scale: 14,
infoUrl: 'http://weixin.qq.com'
});
};
// 7.2 获取当前地理位置
document.querySelector('#getLocation').onclick = function () {
wx.getLocation({
success: function (res) {
alert(JSON.stringify(res));
},
cancel: function (res) {
alert('用户拒绝授权获取地理位置');
}
});
};
// 8 界面操作接口
// 8.1 隐藏右上角菜单
document.querySelector('#hideOptionMenu').onclick = function () {
wx.hideOptionMenu();};
// 8.2 显示右上角菜单
document.querySelector('#showOptionMenu').onclick = function () {
wx.showOptionMenu();};
// 8.3 批量隐藏菜单项
document.querySelector('#hideMenuItems').onclick = function () {
wx.hideMenuItems({
menuList: [
'menuItem:readMode', // 阅读模式
'menuItem:share:timeline', // 分享到朋友圈
'menuItem:copyUrl' // 复制链接
],
success: function (res) {
alert('已隐藏“阅读模式”，“分享到朋友圈”，“复制链接”等按钮');
},
fail: function (res) {
alert(JSON.stringify(res));
}
});
};
// 8.4 批量显示菜单项
document.querySelector('#showMenuItems').onclick = function () {
wx.showMenuItems({
menuList: [
'menuItem:readMode', // 阅读模式
'menuItem:share:timeline', // 分享到朋友圈
'menuItem:copyUrl' // 复制链接
],
success: function (res) {
alert('已显示“阅读模式”，“分享到朋友圈”，“复制链接”等按钮');
},
fail: function (res) {
alert(JSON.stringify(res));
}
});
};
// 8.5 隐藏所有非基本菜单项
document.querySelector('#hideAllNonBaseMenuItem').onclick = function () {
wx.hideAllNonBaseMenuItem({
success: function () {
alert('已隐藏所有非基本菜单项');
}
});
};
// 8.6 显示所有被隐藏的非基本菜单项
document.querySelector('#showAllNonBaseMenuItem').onclick = function () {
wx.showAllNonBaseMenuItem({
success: function () {
alert('已显示所有非基本菜单项');
}
});
};
// 8.7 关闭当前窗口
document.querySelector('#closeWindow').onclick = function () {
wx.closeWindow();};
// 9 微信原生接口
// 9.1.1 扫描二维码并返回结果
document.querySelector('#scanQRCode0').onclick = function () {
wx.scanQRCode({
desc: 'scanQRCode desc'
});
};
// 9.1.2 扫描二维码并返回结果
document.querySelector('#scanQRCode1').onclick = function () {
wx.scanQRCode({
needResult: 1,
desc: 'scanQRCode desc',
success: function (res) {
alert(JSON.stringify(res));
}
});
};
// 10 微信支付接口
// 10.1 发起一个支付请求
document.querySelector('#chooseWXPay').onclick = function () {
wx.chooseWXPay({
timestamp: 1414723227,
nonceStr: 'noncestr',
package: 'addition=action_id%3dgaby1234%26limit_pay%3d&bank_type=WX&body=innertest&fee_type=1&input_charset=GBK¬ify_url=http%3A%2F%2F120.204.206.246%2Fcgi-bin%2Fmmsupport-bin%2Fnotifypay&out_trade_no=1414723227818375338&partner=1900000109&spbill_create_ip=127.0.0.1&total_fee=1&sign=432B647FE95C7BF73BCD177CEECBEF8D',
paySign: 'bd5b1933cda6e9548862944836a9b52e8c9a2b69'
});
};
// 11.3 跳转微信商品页
document.querySelector('#openProductSpecificView').onclick = function () {
wx.openProductSpecificView({
productId: 'pDF3iY_m2M7EQ5EKKKWd95kAxfNw'
});
};
// 12 微信卡券接口
// 12.1 添加卡券
document.querySelector('#addCard').onclick = function () {
wx.addCard({
cardList: [
{
cardId: 'pDF3iY9tv9zCGCj4jTXFOo1DxHdo',
cardExt: '{"code": "", "openid": "", "timestamp": "1418301401", "signature":"64e6a7cc85c6e84b726f2d1cbef1b36e9b0f9750"}'
},
{
cardId: 'pDF3iY9tv9zCGCj4jTXFOo1DxHdo',
cardExt: '{"code": "", "openid": "", "timestamp": "1418301401", "signature":"64e6a7cc85c6e84b726f2d1cbef1b36e9b0f9750"}'
}
],
success: function (res) {
alert('已添加卡券：' + JSON.stringify(res.cardList));
}
});
};
// 12.2 选择卡券
document.querySelector('#chooseCard').onclick = function () {
wx.chooseCard({
cardSign: '97e9c5e58aab3bdf6fd6150e599d7e5806e5cb91',
timestamp: 1417504553,
nonceStr: 'k0hGdSXKZEj3Min5',
success: function (res) {
alert('已选择卡券：' + JSON.stringify(res.cardList));
}
});
};
// 12.3 查看卡券
document.querySelector('#openCard').onclick = function () {
alert('您没有该公众号的卡券无法打开卡券。');
wx.openCard({
cardList: [
]
});
};
var shareData = {
title: '微信JS-SDK Demo',
desc: '微信JS-SDK,帮助第三方为用户提供更优质的移动web服务',
link: 'http://demo.open.weixin.qq.com/jssdk/',
imgUrl: 'http://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRt8Qia4lv7k3M9J1SKqKCImxJCt7j9rHYicKDI45jRPBxdzdyREWnk0ia0N5TMnMfth7SdxtzMvVgXg/0'
};
wx.onMenuShareAppMessage(shareData);
wx.onMenuShareTimeline(shareData);
});
wx.error(function (res) {
alert(res.errMsg);
});
html实例来源：http://my.oschina.net/superkangning/blog/367484实例来源http://my.oschina.net/superkangning/blog/367484http://my.oschina.net/superkangning/blog/367484
[code]
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Android支付宝和微信支付集成
- 微信APP支付Java代码
- 微信发红包，出现了内部错误。
- [置顶] 微信文章webview记录上次访问位置的实现原理和代码，webview记录并定位到上次访问位置
- JEEWX微信开发更便捷，Ngrok 内网穿透利器应用
- 史上最全微信运营工具
- JAVA版微信支付
- 基于微信的开发杂记
- 微信上线“企业信用查询”帮你轻松识别“老赖”企业
- 微信紧急上线“城市积水上报”功能应对南方持续暴雨
- 微信公众号运营的4个误区2种运营思路
- 微信红利期已过，身为内容创业者的你，未来要在哪里战斗？
- 西安微信开发公司哪家好？
- OpenCart 微信三级分销行业解决方案
- 微信获取code和openid
- 微信公众平台开发教程第21篇-“可信网址”白名单
- 微信公众平台开发教程第19篇-应用实例之人脸检测
- 微信公众帐号开发教程第18篇-应用实例之音乐搜索
- 微信公众帐号开发教程第16篇-应用实例之历史上的今天
- 微信公众帐号开发教程第15篇-自定义菜单的view类型（访问网页）