基于node.js的微信JS-SDK简单应用
招聘信息：
2015是Hybrid App崛起之年，Web App和Native App各有其强大之处，也有着致命的缺点，人们一边追求native流畅的用户体验，一边同时期望产品能够快速的迭代更新，Hybrid成为必然的趋势。腾讯一马当先，发布了业内震惊一时的JS-SDK，这对于基于微信的H5开发者来说简直是如降甘露，从此开发者们告别了用箭头来提示右上角可以分享，并且随时可以使用微信的原生能力，微信变成了一个超级浏览器。一、准备工作1.在微信公众平台申请测试账号，并设置好好 JS 接口安全域名 （注：域名必须可以外网访问）2.查看二、开始编码使用微信sdk必须自己实现微信的签名算法。大概需要4个步骤：1.获取 access_token；2.根据 access_token 获取 jsapi_ticket3.根据 appId(公众号唯一id)、noncestr(随机字符串)、timestamp(时间戳)、url(当前页面完整url,不包括#aaa=bbb) 通过sha1算法签名4.将信息返回给前端 ， 设置wx.config。由于获取access_token 和 jsapi_ticket 的接口都有访问限制，所以明确指出需要第三方做缓存处理。此处我们缓存jsapi_ticket 就可以了。/config/wechat.cfg.jsmodule.exports&=&{
&&&&grant_type:&'client_credential',
&&&&appid:&'xxxxxxxxxxxxxxx',
&&&&secret:&'xxxxxxxxxxxxxxxxxxxxxxxxxx',
&&&&noncestr:'Wm3WZYTPz0wzccnW',
&&&&accessTokenUrl:'https://api./cgi-bin/token',
&&&&ticketUrl:'https://api./cgi-bin/ticket/getticket',
&&&&cache_duration:*24&//缓存时长为24小时
}最主要部分是签名：signature.jsvar&request&=&require('request'),
&&&&cache&=&require('memory-cache'),
&&&&sha1&=&require('sha1'),
&&&&config&=&require('../config/wechat.cfg');
exports.sign&=&function&(url,callback)&{
&&&&var&noncestr&=&config.noncestr,
&&&&&&&&timestamp&=&Math.floor(Date.now()/1000),&//精确到秒
&&&&&&&&jsapi_
&&&&if(cache.get('ticket')){
&&&&&&&&jsapi_ticket&=&cache.get('ticket');
&&&&&&&&console.log('1'&+&'jsapi_ticket='&+&jsapi_ticket&+&'&noncestr='&+&noncestr&+&'×tamp='&+&timestamp&+&'&url='&+&url);
&&&&&&&&callback({
&&&&&&&&&&&&noncestr:noncestr,
&&&&&&&&&&&&timestamp:timestamp,
&&&&&&&&&&&&url:url,
&&&&&&&&&&&&jsapi_ticket:jsapi_ticket,
&&&&&&&&&&&&signature:sha1('jsapi_ticket='&+&jsapi_ticket&+&'&noncestr='&+&noncestr&+&'×tamp='&+&timestamp&+&'&url='&+&url)
&&&&&&&&});
&&&&}else{
&&&&&&&&request(config.accessTokenUrl&+&'?grant_type='&+&config.grant_type&+&'&appid='&+&config.appid&+&'&secret='&+&config.secret&,function(error,&response,&body){
&&&&&&&&&&&&if&(!error&&&&response.statusCode&==&200)&{
&&&&&&&&&&&&&&&&var&tokenMap&=&JSON.parse(body);
&&&&&&&&&&&&&&&&request(config.ticketUrl&+&'?access_token='&+&tokenMap.access_token&+&'&type=jsapi',&function(error,&resp,&json){
&&&&&&&&&&&&&&&&&&&&if&(!error&&&&response.statusCode&==&200)&{
&&&&&&&&&&&&&&&&&&&&&&&&var&ticketMap&=&JSON.parse(json);
&&&&&&&&&&&&&&&&&&&&&&&&cache.put('ticket',ticketMap.ticket,config.cache_duration);&&//加入缓存
&&&&&&&&&&&&&&&&&&&&&&&&console.log('jsapi_ticket='&+&ticketMap.ticket&+&'&noncestr='&+&noncestr&+&'×tamp='&+&timestamp&+&'&url='&+&url);
&&&&&&&&&&&&&&&&&&&&&&&&callback({
&&&&&&&&&&&&&&&&&&&&&&&&&&&&noncestr:noncestr,
&&&&&&&&&&&&&&&&&&&&&&&&&&&&timestamp:timestamp,
&&&&&&&&&&&&&&&&&&&&&&&&&&&&url:url,
&&&&&&&&&&&&&&&&&&&&&&&&&&&&jsapi_ticket:ticketMap.ticket,
&&&&&&&&&&&&&&&&&&&&&&&&&&&&signature:sha1('jsapi_ticket='&+&ticketMap.ticket&+&'&noncestr='&+&noncestr&+&'×tamp='&+&timestamp&+&'&url='&+&url)
&&&&&&&&&&&&&&&&&&&&&&&&});
&&&&&&&&&&&&&&&&&&&&}
&&&&&&&&&&&&&&&&})
&&&&&&&&&&&&}
&&&&&&&&})
}由于只是简单的demo，也就没有采用promise，而是采用的普通的回调。客户端部分document.getElementById('refresh').onclick&=&function(){location.reload();}
*&&以下内容多摘自官方demo
wx.config({
&&&&debug:&true,&//&开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
&&&&appId:&appId,&//&必填，公众号的唯一标识
&&&&timestamp:&timestamp,&//&必填，生成签名的时间戳
&&&&nonceStr:&nonceStr,&//&必填，生成签名的随机串
&&&&signature:&signature,//&必填，签名，见附录1
&&&&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']&//&必填，需要使用的JS接口列表，
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//',
&&&&&&imgUrl:&'http://demo.open./jssdk/images/p.jpg',
&&&&&&trigger:&function&(res)&{
&&&&&&&&//&不要尝试在trigger中使用ajax异步请求修改本次分享的内容，因为客户端分享操作是一个同步操作，这时候使用ajax的回包会还没有返回
&&&&&&&&alert('用户点击发送给朋友');
&&&&&&success:&function&(res)&{
&&&&&&&&alert('已分享');
&&&&&&cancel:&function&(res)&{
&&&&&&&&alert('已取消');
&&&&&&fail:&function&(res)&{
&&&&&&&&alert(JSON.stringify(res));
&&&&alert('已注册获取“发送给朋友”状态事件');
&&&&//&5&图片接口
&&//&5.1&拍照、本地选图
&&var&images&=&{
&&&&localId:&[],
&&&&serverId:&[]
&&document.querySelector('#chooseImage').onclick&=&function&()&{
&&&&wx.chooseImage({
&&&&&&success:&function&(res)&{
&&&&&&&&images.localId&=&res.localI
&&&&&&&&alert('已选择&'&+&res.localIds.length&+&'&张图片');
&&&&//&5.2&图片预览
&&document.querySelector('#previewImage').onclick&=&function&()&{
&&&&wx.previewImage({
&&&&&&current:&'/view/photo/photo/public/p.jpg',
&&&&&&urls:&[
&&&&&&&&'/view/photo/photo/public/p.jpg',
&&&&&&&&'/view/photo/photo/public/p.jpg',
&&&&&&&&'/view/photo/photo/public/p.jpg'
&&&&//&7.2&获取当前地理位置
&&document.querySelector('#getLocation').onclick&=&function&()&{
&&&&wx.getLocation({
&&&&&&success:&function&(res)&{
&&&&&&&&alert(JSON.stringify(res));
&&&&&&cancel:&function&(res)&{
&&&&&&&&alert('用户拒绝授权获取地理位置');
&&&&//&9&微信原生接口
&&//&9.1.1&扫描二维码并返回结果
&&document.querySelector('#scanQRCode0').onclick&=&function&()&{
&&&&wx.scanQRCode();
wx.error(function(res){
&&&&JSON.stringify(res)
});至此，基本功能已经完成。附上效果图踩的坑：1.签名算法不一致：通过验证算法正确性2.url必须完全一致，并且外网可访问。将代码部署到BAE，或者其他应用引擎服务器上。3.noncestr，需要精确到秒。源码：
微信扫一扫
订阅每日移动开发及APP推广热点资讯公众号：CocoaChina
您还没有登录！请或
点击量11134点击量9353点击量8096点击量6379点击量5600点击量5537点击量5374点击量4930点击量4680
关注微信 每日推荐
扫一扫 浏览移动版
&2015 Chukong Technologies,Inc.
京公网安备89当前访客身份：游客 [
我们总是老得太快，聪明得太迟！ 原因就是我们接触太多不必要的信息，其实只需要一条或两条信息我们就能了解一个事物，没必要把简单事情复杂化，大道至精
：引用来自“srhlwdamon”的评论请问 这个 js/dem...
：demo.js 报wx未定义求解？
：wx.config里面的timestamp: ,
：分析得很透彻！见识了！
：我的安卓正常, IOS出现config:fail错误, checkJs...
：style.css 能提供下吗？谢谢楼主 发我邮箱wu858...
：引用来自“Da韓韓韓”的评论 引用来自“西南茂”...
：引用来自“西南茂”的评论 问一下博主，微信jss...
：引用来自“西南茂”的评论问一下博主，微信jssdk...
今日访问：64
昨日访问：124
本周访问：64
本月访问：2936
所有访问：92115
微信JS SDK Demo 官方案例
发表于1年前( 11:14)&&
阅读（71529）&|&评论（）
0人收藏此文章,
微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包。
通过使用微信JS-SDK，网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力，同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力，为微信用户提供更优质的网页体验。
此文档面向网页开发者介绍微信JS-SDK如何使用及相关注意事项。
微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包。
通过使用微信JS-SDK，网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力，同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力，为微信用户提供更优质的网页体验。
此文档面向网页开发者介绍微信JS-SDK如何使用及相关注意事项。
一：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&&&&&
&/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./open/js/jweixin-1.0.0.js"&&/script&&&&&
&script&&&&&
*&注意：&&&&
*&1.&所有的JS接口只能在公众号绑定的域名下调用，公众号开发者需要先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。&&&&
*&2.&如果发现在&Android&不能分享自定义内容，请到官网下载最新的包覆盖安装，Android&自定义分享接口需升级至&6.0.2.58&版本及以上。&&&&
*&3.&完整&JS-SDK&文档地址：http://mp./wiki/7/aaa137b55fb2e48dd613f.html&&&&
*&如有问题请通过以下渠道反馈：&&&&
*&邮箱地址：weixin-&&&&
*&邮件主题：【微信JS-SDK反馈】具体问题&&&&
*&邮件内容说明：用简明的语言描述问题所在，并交代清楚遇到该问题的场景，可附上截屏图片，微信团队会尽快处理你的反馈。&&&&
wx.config({&&&&
debug:&false,&&&&
appId:&'wxf8b4f85f3a794e77',&&&&
timestamp:&,&&&&
nonceStr:&'9hKgyCLgGZOgQmEI',&&&&
signature:&'bf7ae7e349af',&&&&
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&&&&&
二：demo.js部分
&&&*&注意：
&&&*&1.&所有的JS接口只能在公众号绑定的域名下调用，公众号开发者需要先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
&&&*&2.&如果发现在&Android&不能分享自定义内容，请到官网下载最新的包覆盖安装，Android&自定义分享接口需升级至&6.0.2.58&版本及以上。
&&&*&3.&完整&JS-SDK&文档地址：http://mp./wiki/7/aaa137b55fb2e48dd613f.html
&&&*&如有问题请通过以下渠道反馈：
&&&*&邮箱地址：weixin-
&&&*&邮件主题：【微信JS-SDK反馈】具体问题
&&&*&邮件内容说明：用简明的语言描述问题所在，并交代清楚遇到该问题的场景，可附上截屏图片，微信团队会尽快处理你的反馈。
&&wx.config({
&&&&&&debug:&false,
&&&&&&appId:&'wxf8b4f85f3a794e77',
&&&&&&timestamp:&,
&&&&&&nonceStr:&'9hKgyCLgGZOgQmEI',
&&&&&&signature:&'bf7ae7e349af',
&&&&&&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./wiki/7/aaa137b55fb2e48dd613f.html
&*&如有问题请通过以下渠道反馈：
&*&邮箱地址：weixin-
&*&邮件主题：【微信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//',
&&&&&&imgUrl:&'/view/movie_poster_cover/spst/public/p.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//',
&&&&&&imgUrl:&'/view/movie_poster_cover/spst/public/p.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//',
&&&&&&imgUrl:&'/view/movie_poster_cover/spst/public/p.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//',
&&&&&&imgUrl:&'/view/movie_poster_cover/spst/public/p.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&接口录制一段声音');
&&&&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&接口录制一段声音');
&&&&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&接口录制一段声音');
&&&&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&上传声音');
&&&&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.localI
&&&&&&&&alert('已选择&'&+&res.localIds.length&+&'&张图片');
&&//&5.2&图片预览
&&document.querySelector('#previewImage').onclick&=&function&()&{
&&&&wx.previewImage({
&&&&&&current:&'/view/photo/photo/public/p.jpg',
&&&&&&urls:&[
&&&&&&&&'/view/photo/photo/public/p.jpg',
&&&&&&&&'/view/photo/photo/public/p.jpg',
&&&&&&&&'/view/photo/photo/public/p.jpg'
&&//&5.3&上传图片
&&document.querySelector('#uploadImage').onclick&=&function&()&{
&&&&if&(images.localId.length&==&0)&{
&&&&&&alert('请先使用&chooseImage&接口选择图片');
&&&&var&i&=&0,&length&=&images.localId.
&&&&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&上传图片');
&&&&var&i&=&0,&length&=&images.serverId.
&&&&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:&''
&&//&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:&,
&&&&&&nonceStr:&'noncestr',
&&&&&&package:&'addition=action_id%3dgaby1234%26limit_pay%3d&bank_type=WX&body=innertest&fee_type=1&input_charset=GBK&notify_url=http%3A%2F%2F120.204.206.246%2Fcgi-bin%2Fmmsupport-bin%2Fnotifypay&out_trade_no=8375338&partner=&spbill_create_ip=127.0.0.1&total_fee=1&sign=432B647FE95C7BF73BCD177CEECBEF8D',
&&&&&&paySign:&'bd5b1933cda6e6a9b52e8c9a2b69'
&&//&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":&"",&"signature":"64e6a7cc85c6e84b726f2d1cbef1b36e9b0f9750"}'
&&&&&&&&},
&&&&&&&&&&cardId:&'pDF3iY9tv9zCGCj4jTXFOo1DxHdo',
&&&&&&&&&&cardExt:&'{"code":&"",&"openid":&"",&"timestamp":&"",&"signature":"64e6a7cc85c6e84b726f2d1cbef1b36e9b0f9750"}'
&&&&&&success:&function&(res)&{
&&&&&&&&alert('已添加卡券：'&+&JSON.stringify(res.cardList));
&&//&12.2&选择卡券
&&document.querySelector('#chooseCard').onclick&=&function&()&{
&&&&wx.chooseCard({
&&&&&&cardSign:&'97e9c5e58aab3bdf6fde',
&&&&&&timestamp:&,
&&&&&&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./jssdk/',
&&&&imgUrl:&'/mmbiz/icTdbqWNOwNRt8Qia4lv7k3M9J1SKqKCImxJCt7j9rHYicKDI45jRPBxdzdyREWnk0ia0N5TMnMfth7SdxtzMvVgXg/0'
&&wx.onMenuShareAppMessage(shareData);
&&wx.onMenuShareTimeline(shareData);
wx.error(function&(res)&{
&&alert(res.errMsg);
更多开发者职位上
1)">1)">1" ng-class="{current:{{currentPage==page}}}" ng-repeat="page in pages"><li class='page' ng-if="(endIndex<li class='page next' ng-if="(currentPage
相关文章阅读