微信JS SDK Demo 官方案例.doc

微信JS SDK Demo 官方案例摘要微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包。 通过使用微信JS-SDK，网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力，同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力，为微信用户提供更优质的网页体验。 此文档面向网页开发者介绍微信JS-SDK如何使用及相关注意事项。微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包。通过使用微信JS-SDK，网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力，同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力，为微信用户提供更优质的网页体验。此文档面向网页开发者介绍微信JS-SDK如何使用及相关注意事项。一：html代码部分微信JS-SDKDemo基础接口分享接口图像接口音频接口智能接口设备信息接口地理位置接口界面操作接口微信扫一扫接口微信小店接口微信卡券接口微信支付接口基础接口判断当前客户端是否支持指定JS接口checkJsApi分享接口获取“分享到朋友圈”按钮点击状态及自定义分享内容接口onMenuShareTimeline获取“分享给朋友”按钮点击状态及自定义分享内容接口onMenuShareAppMessage获取“分享到QQ”按钮点击状态及自定义分享内容接口onMenuShareQQ获取“分享到腾讯微博”按钮点击状态及自定义分享内容接口onMenuShareWeibo图像接口拍照或从手机相册中选图接口chooseImage预览图片接口previewImage上传图片接口uploadImage下载图片接口downloadImage音频接口开始录音接口startRecord停止录音接口stopRecord播放语音接口playVoice暂停播放接口pauseVoice停止播放接口stopVoice上传语音接口uploadVoice下载语音接口downloadVoice智能接口识别音频并返回识别结果接口translateVoice设备信息接口获取网络状态接口getNetworkType地理位置接口使用微信内置地图查看位置接口openLocation获取地理位置接口getLocation界面操作接口隐藏右上角菜单接口hideOptionMenu显示右上角菜单接口showOptionMenu关闭当前网页窗口接口closeWindow批量隐藏功能按钮接口hideMenuItems批量显示功能按钮接口showMenuItems隐藏所有非基础按钮接口hideAllNonBaseMenuItem显示所有功能按钮接口showAllNonBaseMenuItem微信扫一扫调起微信扫一扫接口scanQRCode(微信处理结果)scanQRCode(直接返回结果)微信小店接口跳转微信商品页接口openProductSpecificView微信卡券接口批量添加卡券接口addCard调起适用于门店的卡券列表并获取用户选择列表chooseCard查看微信卡包中的卡券接口openCard微信支付接口发起一个微信支付请求chooseWXPay/*注意：*1.所有的JS接口只能在公众号绑定的域名下调用，公众号开发者需要先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。*2.如果发现在Android不能分享自定义内容，请到官网下载最新的包覆盖安装，Android自定义分享接口需升级至8版本及以上。*3.完整JS-SDK文档地址：/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html*如有问题请通过以下渠道反馈：*邮箱地址：*邮件主题：【微信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);二：demo.js部分/*注意：*1.所有的JS接口只能在公众号绑定的域名下调用，公众号开发者需要先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。*2.如果发现在Android不能分享自定义内容，请到官网下载最新的包覆盖安装，Android自定义分享接口需升级至8版本及以上。*3.完整JS-SDK文档地址：/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html*如有问题请通过以下渠道反馈：*邮箱地址：*邮件主题：【微信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自定义分享接口需升级至8版本及以上。*3.完整JS-SDK文档地址：/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html*如有问题请通过以下渠道反馈：*邮箱地址：*邮件主题：【微信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:/subject/25785114/,imgUrl:/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:/subject/25785114/,imgUrl:/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:/subject/25785114/,imgUrl:/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:/subject/25785114/,imgUrl:/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智能接口varvoice=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);elsealert(无法识别););/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拍照、本地选图varimages=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:/view/photo/photo/public/p1353993776.jpg,urls:/view/photo/photo/public/p2152117150.jpg,/view/photo/photo/public/p1353993776.jpg,/view/photo/photo/public/p2152134700.jpg);/5.3上传图片document.querySelector(#uploadImage).onclick=function()if(images.localId.length=0)alert(请先使用chooseImage接口选择图片);return;vari=0,length=images.localId.length;images.serverId=;functionupload()wx.uploadImage(localId:images.localIdi,success:function(res)i+;alert(已上传：+i+/+length);images.serverId.push(res.serverId);if(ilength)upload();,fail:function(res)alert(JSON.stringify(res););upload();/5.4下载图片document.querySelector(#downloadImage).onclick=function()if(images.serverId.length=0)alert(请先使用uploadImage上传图片);return;vari=0,length=images.serverId.length;images.localId=;functiondownload()wx.downloadImage(serverId:images.serverIdi,success:function(res)i+;alert(已下载：+i+/+length);images.localId.push(res.localId);if(ilength)download(););download();/6设备信息接口/6.1获取当前网络状态document.querySelector(#getNetworkType).onclick=function()wx.getNetworkType(success:function(res)alert(