微信JS-SDK 示例

最新推荐文章于 2024-11-03 11:01:20 发布

落日长烟

最新推荐文章于 2024-11-03 11:01:20 发布

阅读量194

点赞数

本文链接：https://blog.csdn.net/qlzw1990/article/details/121507064

版权

微信JS-SDK 示例

1、html部分

  1 <!DOCTYPE html>
  2 <!-- saved from url=(0028){sh:$selfUrl} -->
  3 <html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  4   <meta charset="utf-8">
  5   <title>微信JS-SDK Demo</title>
  6   <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
  7   <link rel="stylesheet" href="{sh::RES}/jssdk/css/style.css">
  8 </head>
  9 <body ontouchstart="">
 10 <div class="wxapi_container">
 11     <div class="wxapi_index_container">
 12       <ul class="label_box lbox_close wxapi_index_list">
 13         <li class="label_item wxapi_index_item"><a class="label_inner" href="{sh:$selfUrl}#menu-basic">基础接口</a></li>
 14         <li class="label_item wxapi_index_item"><a class="label_inner" href="{sh:$selfUrl}#menu-share">分享接口</a></li>
 15         <li class="label_item wxapi_index_item"><a class="label_inner" href="{sh:$selfUrl}#menu-image">图像接口</a></li>
 16         <li class="label_item wxapi_index_item"><a class="label_inner" href="{sh:$selfUrl}#menu-voice">音频接口</a></li>
 17         <li class="label_item wxapi_index_item"><a class="label_inner" href="{sh:$selfUrl}#menu-smart">智能接口</a></li>
 18         <li class="label_item wxapi_index_item"><a class="label_inner" href="{sh:$selfUrl}#menu-device">设备信息接口</a></li>
 19         <li class="label_item wxapi_index_item"><a class="label_inner" href="{sh:$selfUrl}#menu-location">地理位置接口</a></li>
 20         <li class="label_item wxapi_index_item"><a class="label_inner" href="{sh:$selfUrl}#menu-webview">界面操作接口</a></li>
 21         <li class="label_item wxapi_index_item"><a class="label_inner" href="{sh:$selfUrl}#menu-scan">微信扫一扫接口</a></li>
 22         <li class="label_item wxapi_index_item"><a class="label_inner" href="{sh:$selfUrl}#menu-shopping">微信小店接口</a></li>
 23         <li class="label_item wxapi_index_item"><a class="label_inner" href="{sh:$selfUrl}#menu-card">微信卡券接口</a></li>
 24         <li class="label_item wxapi_index_item"><a class="label_inner" href="{sh:$selfUrl}#menu-pay">微信支付接口</a></li>
 25       </ul>
 26     </div>
 27     <div class="lbox_close wxapi_form">
 28       <h3 id="menu-basic">基础接口</h3>
 29       <span class="desc">判断当前客户端是否支持指定JS接口</span>
 30       <button class="btn btn_primary" id="checkJsApi">checkJsApi</button>
 31 
 32       <h3 id="menu-share">分享接口</h3>
 33       <span class="desc">获取“分享到朋友圈”按钮点击状态及自定义分享内容接口</span>
 34       <button class="btn btn_primary" id="onMenuShareTimeline">onMenuShareTimeline</button>
 35       <span class="desc">获取“分享给朋友”按钮点击状态及自定义分享内容接口</span>
 36       <button class="btn btn_primary" id="onMenuShareAppMessage">onMenuShareAppMessage</button>
 37       <span class="desc">获取“分享到QQ”按钮点击状态及自定义分享内容接口</span>
 38       <button class="btn btn_primary" id="onMenuShareQQ">onMenuShareQQ</button>
 39       <span class="desc">获取“分享到腾讯微博”按钮点击状态及自定义分享内容接口</span>
 40       <button class="btn btn_primary" id="onMenuShareWeibo">onMenuShareWeibo</button>
 41       <span class="desc">获取“分享到QZone”按钮点击状态及自定义分享内容接口</span>
 42       <button class="btn btn_primary" id="onMenuShareQZone">onMenuShareQZone</button>
 43 
 44       <h3 id="menu-image">图像接口</h3>
 45       <span class="desc">拍照或从手机相册中选图接口</span>
 46       <button class="btn btn_primary" id="chooseImage">chooseImage</button>
 47       <span class="desc">预览图片接口</span>
 48       <button class="btn btn_primary" id="previewImage">previewImage</button>
 49       <span class="desc">上传图片接口</span>
 50       <button class="btn btn_primary" id="uploadImage">uploadImage</button>
 51       <span class="desc">下载图片接口</span>
 52       <button class="btn btn_primary" id="downloadImage">downloadImage</button>
 53 
 54       <h3 id="menu-voice">音频接口</h3>
 55       <span class="desc">开始录音接口</span>
 56       <button class="btn btn_primary" id="startRecord">startRecord</button>
 57       <span class="desc">停止录音接口</span>
 58       <button class="btn btn_primary" id="stopRecord">stopRecord</button>
 59       <span class="desc">播放语音接口</span>
 60       <button class="btn btn_primary" id="playVoice">playVoice</button>
 61       <span class="desc">暂停播放接口</span>
 62       <button class="btn btn_primary" id="pauseVoice">pauseVoice</button>
 63       <span class="desc">停止播放接口</span>
 64       <button class="btn btn_primary" id="stopVoice">stopVoice</button>
 65       <span class="desc">上传语音接口</span>
 66       <button class="btn btn_primary" id="uploadVoice">uploadVoice</button>
 67       <span class="desc">下载语音接口</span>
 68       <button class="btn btn_primary" id="downloadVoice">downloadVoice</button>
 69 
 70       <h3 id="menu-smart">智能接口</h3>
 71       <span class="desc">识别音频并返回识别结果接口</span>
 72       <button class="btn btn_primary" id="translateVoice">translateVoice</button>
 73 
 74       <h3 id="menu-device">设备信息接口</h3>
 75       <span class="desc">获取网络状态接口</span>
 76       <button class="btn btn_primary" id="getNetworkType">getNetworkType</button>
 77 
 78       <h3 id="menu-location">地理位置接口</h3>
 79       <span class="desc">使用微信内置地图查看位置接口</span>
 80       <button class="btn btn_primary" id="openLocation">openLocation</button>
 81       <span class="desc">获取地理位置接口</span>
 82       <button class="btn btn_primary" id="getLocation">getLocation</button>
 83 
 84       <h3 id="menu-webview">界面操作接口</h3>
 85       <span class="desc">隐藏右上角菜单接口</span>
 86       <button class="btn btn_primary" id="hideOptionMenu">hideOptionMenu</button>
 87       <span class="desc">显示右上角菜单接口</span>
 88       <button class="btn btn_primary" id="showOptionMenu">showOptionMenu</button>
 89       <span class="desc">关闭当前网页窗口接口</span>
 90       <button class="btn btn_primary" id="closeWindow">closeWindow</button>
 91       <span class="desc">批量隐藏功能按钮接口</span>
 92       <button class="btn btn_primary" id="hideMenuItems">hideMenuItems</button>
 93       <span class="desc">批量显示功能按钮接口</span>
 94       <button class="btn btn_primary" id="showMenuItems">showMenuItems</button>
 95       <span class="desc">隐藏所有非基础按钮接口</span>
 96       <button class="btn btn_primary" id="hideAllNonBaseMenuItem">hideAllNonBaseMenuItem</button>
 97       <span class="desc">显示所有功能按钮接口</span>
 98       <button class="btn btn_primary" id="showAllNonBaseMenuItem">showAllNonBaseMenuItem</button>
 99 
100       <h3 id="menu-scan">微信扫一扫</h3>
101       <span class="desc">调起微信扫一扫接口</span>
102       <button class="btn btn_primary" id="scanQRCode0">scanQRCode(微信处理结果)</button>
103       <button class="btn btn_primary" id="scanQRCode1">scanQRCode(直接返回结果)</button>
104 
105       <h3 id="menu-shopping">微信小店接口</h3>
106       <span class="desc">跳转微信商品页接口</span>
107       <button class="btn btn_primary" id="openProductSpecificView">openProductSpecificView</button>
108 
109       <h3 id="menu-card">微信卡券接口</h3>
110       <span class="desc">批量添加卡券接口</span>
111       <button class="btn btn_primary" id="addCard">addCard</button>
112       <span class="desc">调起适用于门店的卡券列表并获取用户选择列表</span>
113       <button class="btn btn_primary" id="chooseCard">chooseCard</button>
114       <span class="desc">查看微信卡包中的卡券接口</span>
115       <button class="btn btn_primary" id="openCard">openCard</button>
116 
117       <h3 id="menu-pay">微信支付接口</h3>
118       <span class="desc">发起一个微信支付请求</span>
119       <button class="btn btn_primary" id="chooseWXPay">chooseWXPay</button>
120     </div>
121   </div>
122 
123 <script src="{sh::RES}/jssdk/js/jweixin-1.0.0.js"></script>
124 
125 
126 
127 <!-- 获取签名的核心 begin -->
128 <?php
129 import("@.ORG.jssdk");
130 $jssdk = new JSSDK(C('oauth_config.appid'), C('oauth_config.appsecret'));
131 $signPackage = $jssdk->GetSignPackage();
132 ?>
133 <!-- 获取签名的核心 end -->
134 <script>
135   /*
136    * 注意：
137    * 1. 所有的JS接口只能在公众号绑定的域名下调用，公众号开发者需要先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
138    * 2. 如果发现在 Android 不能分享自定义内容，请到官网下载最新的包覆盖安装，Android 自定义分享接口需升级至 6.0.2.58 版本及以上。
139    * 3. 常见问题及完整 JS-SDK 文档地址：http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html
140    *
141    * 开发中遇到问题详见文档“附录5-常见错误及解决办法”解决，如仍未能解决可通过以下渠道反馈：
142    * 邮箱地址：weixin-open@qq.com
143    * 邮件主题：【微信JS-SDK反馈】具体问题
144    * 邮件内容说明：用简明的语言描述问题所在，并交代清楚遇到该问题的场景，可附上截屏图片，微信团队会尽快处理你的反馈。
145    */
146   wx.config({
147       debug: false,
148       appId: '<?php echo $signPackage["appId"];?>',
149       timestamp: <?php echo $signPackage["timestamp"];?>,
150       nonceStr: '<?php echo $signPackage["nonceStr"];?>',
151       signature: '<?php echo $signPackage["signature"];?>',
152       jsApiList: [
153         'checkJsApi',
154         'onMenuShareTimeline',
155         'onMenuShareAppMessage',
156         'onMenuShareQQ',
157         'onMenuShareWeibo',
158         'onMenuShareQZone',
159         'hideMenuItems',
160         'showMenuItems',
161         'hideAllNonBaseMenuItem',
162         'showAllNonBaseMenuItem',
163         'translateVoice',
164         'startRecord',
165         'stopRecord',
166         'onVoiceRecordEnd',
167         'playVoice',
168         'onVoicePlayEnd',
169         'pauseVoice',
170         'stopVoice',
171         'uploadVoice',
172         'downloadVoice',
173         'chooseImage',
174         'previewImage',
175         'uploadImage',
176         'downloadImage',
177         'getNetworkType',
178         'openLocation',
179         'getLocation',
180         'hideOptionMenu',
181         'showOptionMenu',
182         'closeWindow',
183         'scanQRCode',
184         'chooseWXPay',
185         'openProductSpecificView',
186         'addCard',
187         'chooseCard',
188         'openCard'
189       ]
190   });
191 </script>
192 <script src="{sh::RES}/jssdk/js/zepto.min.js"></script>
193 <script src="{sh::RES}/jssdk/js/demo.js"> </script>
194 
195 <div id="cli_dialog_div"></div></body></html>

2、js部分

  1 /*
  2  * 注意：
  3  * 1. 所有的JS接口只能在公众号绑定的域名下调用，公众号开发者需要先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
  4  * 2. 如果发现在 Android 不能分享自定义内容，请到官网下载最新的包覆盖安装，Android 自定义分享接口需升级至 6.0.2.58 版本及以上。
  5  * 3. 完整 JS-SDK 文档地址：http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html
  6  *
  7  * 如有问题请通过以下渠道反馈：
  8  * 邮箱地址：weixin-open@qq.com
  9  * 邮件主题：【微信JS-SDK反馈】具体问题
 10  * 邮件内容说明：用简明的语言描述问题所在，并交代清楚遇到该问题的场景，可附上截屏图片，微信团队会尽快处理你的反馈。
 11  */
 12 wx.ready(function () {
 13   // 1 判断当前版本是否支持指定 JS 接口，支持批量判断
 14   document.querySelector('#checkJsApi').onclick = function () {
 15     wx.checkJsApi({
 16       jsApiList: [
 17         'getNetworkType',
 18         'previewImage'
 19       ],
 20       success: function (res) {
 21         alert(JSON.stringify(res));
 22       }
 23     });
 24   };
 25 
 26   // 2. 分享接口
 27   // 2.1 监听“分享给朋友”，按钮点击、自定义分享内容及分享结果接口
 28   document.querySelector('#onMenuShareAppMessage').onclick = function () {
 29     wx.onMenuShareAppMessage({
 30       title: '互联网之子',
 31       desc: '在长大的过程中，我才慢慢发现，我身边的所有事，别人跟我说的所有事，那些所谓本来如此，注定如此的事，它们其实没有非得如此，事情是可以改变的。更重要的是，有些事既然错了，那就该做出改变。',
 32       link: 'http://movie.douban.com/subject/25785114/',
 33       imgUrl: 'http://demo.open.weixin.qq.com/jssdk/images/p2166127561.jpg',
 34       trigger: function (res) {
 35         // 不要尝试在trigger中使用ajax异步请求修改本次分享的内容，因为客户端分享操作是一个同步操作，这时候使用ajax的回包会还没有返回
 36         alert('用户点击发送给朋友');
 37       },
 38       success: function (res) {
 39         alert('已分享');
 40       },
 41       cancel: function (res) {
 42         alert('已取消');
 43       },
 44       fail: function (res) {
 45         alert(JSON.stringify(res));
 46       }
 47     });
 48     alert('已注册获取“发送给朋友”状态事件');
 49   };
 50 
 51   // 2.2 监听“分享到朋友圈”按钮点击、自定义分享内容及分享结果接口
 52   document.querySelector('#onMenuShareTimeline').onclick = function () {
 53     wx.onMenuShareTimeline({
 54       title: '互联网之子',
 55       link: 'http://movie.douban.com/subject/25785114/',
 56       imgUrl: 'http://demo.open.weixin.qq.com/jssdk/images/p2166127561.jpg',
 57       trigger: function (res) {
 58         // 不要尝试在trigger中使用ajax异步请求修改本次分享的内容，因为客户端分享操作是一个同步操作，这时候使用ajax的回包会还没有返回
 59         alert('用户点击分享到朋友圈');
 60       },
 61       success: function (res) {
 62         alert('已分享');
 63       },
 64       cancel: function (res) {
 65         alert('已取消');
 66       },
 67       fail: function (res) {
 68         alert(JSON.stringify(res));
 69       }
 70     });
 71     alert('已注册获取“分享到朋友圈”状态事件');
 72   };
 73 
 74   // 2.3 监听“分享到QQ”按钮点击、自定义分享内容及分享结果接口
 75   document.querySelector('#onMenuShareQQ').onclick = function () {
 76     wx.onMenuShareQQ({
 77       title: '互联网之子',
 78       desc: '在长大的过程中，我才慢慢发现，我身边的所有事，别人跟我说的所有事，那些所谓本来如此，注定如此的事，它们其实没有非得如此，事情是可以改变的。更重要的是，有些事既然错了，那就该做出改变。',
 79       link: 'http://movie.douban.com/subject/25785114/',
 80       imgUrl: 'http://img3.douban.com/view/movie_poster_cover/spst/public/p2166127561.jpg',
 81       trigger: function (res) {
 82         alert('用户点击分享到QQ');
 83       },
 84       complete: function (res) {
 85         alert(JSON.stringify(res));
 86       },
 87       success: function (res) {
 88         alert('已分享');
 89       },
 90       cancel: function (res) {
 91         alert('已取消');
 92       },
 93       fail: function (res) {
 94         alert(JSON.stringify(res));
 95       }
 96     });
 97     alert('已注册获取“分享到 QQ”状态事件');
 98   };
 99   
100   // 2.4 监听“分享到微博”按钮点击、自定义分享内容及分享结果接口
101   document.querySelector('#onMenuShareWeibo').onclick = function () {
102     wx.onMenuShareWeibo({
103       title: '互联网之子',
104       desc: '在长大的过程中，我才慢慢发现，我身边的所有事，别人跟我说的所有事，那些所谓本来如此，注定如此的事，它们其实没有非得如此，事情是可以改变的。更重要的是，有些事既然错了，那就该做出改变。',
105       link: 'http://movie.douban.com/subject/25785114/',
106       imgUrl: 'http://img3.douban.com/view/movie_poster_cover/spst/public/p2166127561.jpg',
107       trigger: function (res) {
108         alert('用户点击分享到微博');
109       },
110       complete: function (res) {
111         alert(JSON.stringify(res));
112       },
113       success: function (res) {
114         alert('已分享');
115       },
116       cancel: function (res) {
117         alert('已取消');
118       },
119       fail: function (res) {
120         alert(JSON.stringify(res));
121       }
122     });
123     alert('已注册获取“分享到微博”状态事件');
124   };
125 
126   // 2.5 监听“分享到QZone”按钮点击、自定义分享内容及分享接口
127   document.querySelector('#onMenuShareQZone').onclick = function () {
128     wx.onMenuShareQZone({
129       title: '互联网之子',
130       desc: '在长大的过程中，我才慢慢发现，我身边的所有事，别人跟我说的所有事，那些所谓本来如此，注定如此的事，它们其实没有非得如此，事情是可以改变的。更重要的是，有些事既然错了，那就该做出改变。',
131       link: 'http://movie.douban.com/subject/25785114/',
132       imgUrl: 'http://img3.douban.com/view/movie_poster_cover/spst/public/p2166127561.jpg',
133       trigger: function (res) {
134         alert('用户点击分享到QZone');
135       },
136       complete: function (res) {
137         alert(JSON.stringify(res));
138       },
139       success: function (res) {
140         alert('已分享');
141       },
142       cancel: function (res) {
143         alert('已取消');
144       },
145       fail: function (res) {
146         alert(JSON.stringify(res));
147       }
148     });
149     alert('已注册获取“分享到QZone”状态事件');
150   };
151 
152 
153   // 3 智能接口
154   var voice = {
155     localId: '',
156     serverId: ''
157   };
158   // 3.1 识别音频并返回识别结果
159   document.querySelector('#translateVoice').onclick = function () {
160     if (voice.localId == '') {
161       alert('请先使用 startRecord 接口录制一段声音');
162       return;
163     }
164     wx.translateVoice({
165       localId: voice.localId,
166       complete: function (res) {
167         if (res.hasOwnProperty('translateResult')) {
168           alert('识别结果：' + res.translateResult);
169         } else {
170           alert('无法识别');
171         }
172       }
173     });
174   };
175 
176   // 4 音频接口
177   // 4.2 开始录音
178   document.querySelector('#startRecord').onclick = function () {
179     wx.startRecord({
180       cancel: function () {
181         alert('用户拒绝授权录音');
182       }
183     });
184   };
185 
186   // 4.3 停止录音
187   document.querySelector('#stopRecord').onclick = function () {
188     wx.stopRecord({
189       success: function (res) {
190         voice.localId = res.localId;
191       },
192       fail: function (res) {
193         alert(JSON.stringify(res));
194       }
195     });
196   };
197 
198   // 4.4 监听录音自动停止
199   wx.onVoiceRecordEnd({
200     complete: function (res) {
201       voice.localId = res.localId;
202       alert('录音时间已超过一分钟');
203     }
204   });
205 
206   // 4.5 播放音频
207   document.querySelector('#playVoice').onclick = function () {
208     if (voice.localId == '') {
209       alert('请先使用 startRecord 接口录制一段声音');
210       return;
211     }
212     wx.playVoice({
213       localId: voice.localId
214     });
215   };
216 
217   // 4.6 暂停播放音频
218   document.querySelector('#pauseVoice').onclick = function () {
219     wx.pauseVoice({
220       localId: voice.localId
221     });
222   };
223 
224   // 4.7 停止播放音频
225   document.querySelector('#stopVoice').onclick = function () {
226     wx.stopVoice({
227       localId: voice.localId
228     });
229   };
230 
231   // 4.8 监听录音播放停止
232   wx.onVoicePlayEnd({
233     complete: function (res) {
234       alert('录音(' + res.localId + ')播放结束');
235     }
236   });
237 
238   // 4.8 上传语音
239   document.querySelector('#uploadVoice').onclick = function () {
240     if (voice.localId == '') {
241       alert('请先使用 startRecord 接口录制一段声音');
242       return;
243     }
244     wx.uploadVoice({
245       localId: voice.localId,
246       success: function (res) {
247         alert('上传语音成功，serverId 为' + res.serverId);
248         voice.serverId = res.serverId;
249       }
250     });
251   };
252 
253   // 4.9 下载语音
254   document.querySelector('#downloadVoice').onclick = function () {
255     if (voice.serverId == '') {
256       alert('请先使用 uploadVoice 上传声音');
257       return;
258     }
259     wx.downloadVoice({
260       serverId: voice.serverId,
261       success: function (res) {
262         alert('下载语音成功，localId 为' + res.localId);
263         voice.localId = res.localId;
264       }
265     });
266   };
267 
268   // 5 图片接口
269   // 5.1 拍照、本地选图
270   var images = {
271     localId: [],
272     serverId: []
273   };
274   document.querySelector('#chooseImage').onclick = function () {
275     wx.chooseImage({
276       success: function (res) {
277         images.localId = res.localIds;
278         alert('已选择 ' + res.localIds.length + ' 张图片');
279       }
280     });
281   };
282 
283   // 5.2 图片预览
284   document.querySelector('#previewImage').onclick = function () {
285     wx.previewImage({
286       current: 'http://img5.douban.com/view/photo/photo/public/p1353993776.jpg',
287       urls: [
288         'http://img3.douban.com/view/photo/photo/public/p2152117150.jpg',
289         'http://img5.douban.com/view/photo/photo/public/p1353993776.jpg',
290         'http://img3.douban.com/view/photo/photo/public/p2152134700.jpg'
291       ]
292     });
293   };
294 
295   // 5.3 上传图片
296   document.querySelector('#uploadImage').onclick = function () {
297     if (images.localId.length == 0) {
298       alert('请先使用 chooseImage 接口选择图片');
299       return;
300     }
301     var i = 0, length = images.localId.length;
302     images.serverId = [];
303     function upload() {
304       wx.uploadImage({
305         localId: images.localId[i],
306         success: function (res) {
307           i++;
308           //alert('已上传：' + i + '/' + length);
309           images.serverId.push(res.serverId);
310           if (i < length) {
311             upload();
312           }
313         },
314         fail: function (res) {
315           alert(JSON.stringify(res));
316         }
317       });
318     }
319     upload();
320   };
321 
322   // 5.4 下载图片
323   document.querySelector('#downloadImage').onclick = function () {
324     if (images.serverId.length === 0) {
325       alert('请先使用 uploadImage 上传图片');
326       return;
327     }
328     var i = 0, length = images.serverId.length;
329     images.localId = [];
330     function download() {
331       wx.downloadImage({
332         serverId: images.serverId[i],
333         success: function (res) {
334           i++;
335           alert('已下载：' + i + '/' + length);
336           images.localId.push(res.localId);
337           if (i < length) {
338             download();
339           }
340         }
341       });
342     }
343     download();
344   };
345 
346   // 6 设备信息接口
347   // 6.1 获取当前网络状态
348   document.querySelector('#getNetworkType').onclick = function () {
349     wx.getNetworkType({
350       success: function (res) {
351         alert(res.networkType);
352       },
353       fail: function (res) {
354         alert(JSON.stringify(res));
355       }
356     });
357   };
358 
359   // 7 地理位置接口
360   // 7.1 查看地理位置
361   document.querySelector('#openLocation').onclick = function () {
362     wx.openLocation({
363       latitude: 23.099994,
364       longitude: 113.324520,
365       name: 'TIT 创意园',
366       address: '广州市海珠区新港中路 397 号',
367       scale: 14,
368       infoUrl: 'http://weixin.qq.com'
369     });
370   };
371 
372   // 7.2 获取当前地理位置
373   document.querySelector('#getLocation').onclick = function () {
374     wx.getLocation({
375       success: function (res) {
376         alert(JSON.stringify(res));
377       },
378       cancel: function (res) {
379         alert('用户拒绝授权获取地理位置');
380       }
381     });
382   };
383 
384   // 8 界面操作接口
385   // 8.1 隐藏右上角菜单
386   document.querySelector('#hideOptionMenu').onclick = function () {
387     wx.hideOptionMenu();
388   };
389 
390   // 8.2 显示右上角菜单
391   document.querySelector('#showOptionMenu').onclick = function () {
392     wx.showOptionMenu();
393   };
394 
395   // 8.3 批量隐藏菜单项
396   document.querySelector('#hideMenuItems').onclick = function () {
397     wx.hideMenuItems({
398       menuList: [
399         'menuItem:readMode', // 阅读模式
400         'menuItem:share:timeline', // 分享到朋友圈
401         'menuItem:copyUrl' // 复制链接
402       ],
403       success: function (res) {
404         alert('已隐藏“阅读模式”，“分享到朋友圈”，“复制链接”等按钮');
405       },
406       fail: function (res) {
407         alert(JSON.stringify(res));
408       }
409     });
410   };
411 
412   // 8.4 批量显示菜单项
413   document.querySelector('#showMenuItems').onclick = function () {
414     wx.showMenuItems({
415       menuList: [
416         'menuItem:readMode', // 阅读模式
417         'menuItem:share:timeline', // 分享到朋友圈
418         'menuItem:copyUrl' // 复制链接
419       ],
420       success: function (res) {
421         alert('已显示“阅读模式”，“分享到朋友圈”，“复制链接”等按钮');
422       },
423       fail: function (res) {
424         alert(JSON.stringify(res));
425       }
426     });
427   };
428 
429   // 8.5 隐藏所有非基本菜单项
430   document.querySelector('#hideAllNonBaseMenuItem').onclick = function () {
431     wx.hideAllNonBaseMenuItem({
432       success: function () {
433         alert('已隐藏所有非基本菜单项');
434       }
435     });
436   };
437 
438   // 8.6 显示所有被隐藏的非基本菜单项
439   document.querySelector('#showAllNonBaseMenuItem').onclick = function () {
440     wx.showAllNonBaseMenuItem({
441       success: function () {
442         alert('已显示所有非基本菜单项');
443       }
444     });
445   };
446 
447   // 8.7 关闭当前窗口
448   document.querySelector('#closeWindow').onclick = function () {
449     wx.closeWindow();
450   };
451 
452   // 9 微信原生接口
453   // 9.1.1 扫描二维码并返回结果
454   document.querySelector('#scanQRCode0').onclick = function () {
455     wx.scanQRCode();
456   };
457   // 9.1.2 扫描二维码并返回结果
458   document.querySelector('#scanQRCode1').onclick = function () {
459     wx.scanQRCode({
460       needResult: 1,
461       desc: 'scanQRCode desc',
462       success: function (res) {
463         alert(JSON.stringify(res));
464       }
465     });
466   };
467 
468   // 10 微信支付接口
469   // 10.1 发起一个支付请求
470   document.querySelector('#chooseWXPay').onclick = function () {
471     // 注意：此 Demo 使用 2.7 版本支付接口实现，建议使用此接口时参考微信支付相关最新文档。
472     wx.chooseWXPay({
473       timestamp: 1414723227,
474       nonceStr: 'noncestr',
475       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=1414723227818375338&partner=1900000109&spbill_create_ip=127.0.0.1&total_fee=1&sign=432B647FE95C7BF73BCD177CEECBEF8D',
476       signType: 'SHA1', // 注意：新版支付接口使用 MD5 加密
477       paySign: 'bd5b1933cda6e9548862944836a9b52e8c9a2b69'
478     });
479   };
480 
481   // 11.3  跳转微信商品页
482   document.querySelector('#openProductSpecificView').onclick = function () {
483     wx.openProductSpecificView({
484       productId: 'pDF3iY_m2M7EQ5EKKKWd95kAxfNw',
485       extInfo: '123'
486     });
487   };
488 
489   // 12 微信卡券接口
490   // 12.1 添加卡券
491   document.querySelector('#addCard').onclick = function () {
492     wx.addCard({
493       cardList: [
494         {
495           cardId: 'pDF3iY9tv9zCGCj4jTXFOo1DxHdo',
496           cardExt: '{"code": "", "openid": "", "timestamp": "1418301401", "signature":"f54dae85e7807cc9525ccc127b4796e021f05b33"}'
497         },
498         {
499           cardId: 'pDF3iY9tv9zCGCj4jTXFOo1DxHdo',
500           cardExt: '{"code": "", "openid": "", "timestamp": "1418301401", "signature":"f54dae85e7807cc9525ccc127b4796e021f05b33"}'
501         }
502       ],
503       success: function (res) {
504         alert('已添加卡券：' + JSON.stringify(res.cardList));
505       }
506     });
507   };
508 
509   var codes = [];
510   // 12.2 选择卡券
511   document.querySelector('#chooseCard').onclick = function () {
512     wx.chooseCard({
513       cardSign: '8ef8aa071f1d2186cb1355ec132fed04ebba1c3f',
514       timestamp: 1437997723,
515       nonceStr: 'k0hGdSXKZEj3Min5',
516       success: function (res) {
517         res.cardList = JSON.parse(res.cardList);
518         encrypt_code = res.cardList[0]['encrypt_code'];
519         alert('已选择卡券：' + JSON.stringify(res.cardList));
520         decryptCode(encrypt_code, function (code) {
521           codes.push(code);
522         });
523       }
524     });
525   };
526 
527   // 12.3 查看卡券
528   document.querySelector('#openCard').onclick = function () {
529     if (codes.length < 1) {
530       alert('请先使用 chooseCard 接口选择卡券。');
531       return false;
532     }
533     var cardList = [];
534     for (var i = 0; i < codes.length; i++) {
535       cardList.push({
536         cardId: 'pDF3iY9tv9zCGCj4jTXFOo1DxHdo',
537         code: codes[i]
538       });
539     }
540     wx.openCard({
541       cardList: cardList
542     });
543   };
544 
545   var shareData = {
546     title: '微信JS-SDK Demo',
547     desc: '微信JS-SDK,帮助第三方为用户提供更优质的移动web服务',
548     link: 'http://demo.open.weixin.qq.com/jssdk/',
549     imgUrl: 'http://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRt8Qia4lv7k3M9J1SKqKCImxJCt7j9rHYicKDI45jRPBxdzdyREWnk0ia0N5TMnMfth7SdxtzMvVgXg/0'
550   };
551   wx.onMenuShareAppMessage(shareData);
552   wx.onMenuShareTimeline(shareData);
553 
554   function decryptCode(code, callback) {
555     $.getJSON('/jssdk/decrypt_code.php?code=' + encodeURI(code), function (res) {
556       if (res.errcode == 0) {
557         codes.push(res.code);
558       }
559     });
560   }
561 });
562 
563 wx.error(function (res) {
564   alert(res.errMsg);
565 });

3、后台部分

  1 <?php
  2 class JSSDK {
  3   private $appId;
  4   private $appSecret;
  5 
  6   public function __construct($appId, $appSecret) {
  7     $this->appId = $appId;
  8     $this->appSecret = $appSecret;
  9   }
 10 
 11   public function getSignPackage() {
 12     $jsapiTicket = $this->getJsApiTicket();
 13 
 14     // 注意 URL 一定要动态获取，不能 hardcode.
 15     $protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off' || $_SERVER['SERVER_PORT'] == 443) ? "https://" : "http://";
 16     $url = "$protocol$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";
 17 
 18     $timestamp = time();
 19     $nonceStr = $this->createNonceStr();
 20 
 21     // 这里参数的顺序要按照 key 值 ASCII 码升序排序
 22     $string = "jsapi_ticket=$jsapiTicket&noncestr=$nonceStr&timestamp=$timestamp&url=$url";
 23 
 24     $signature = sha1($string);
 25 
 26     $signPackage = array(
 27       "appId"     => $this->appId,
 28       "nonceStr"  => $nonceStr,
 29       "timestamp" => $timestamp,
 30       "url"       => $url,
 31       "signature" => $signature,
 32       "rawString" => $string
 33     );
 34     return $signPackage; 
 35   }
 36 
 37   private function createNonceStr($length = 16) {
 38     $chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
 39     $str = "";
 40     for ($i = 0; $i < $length; $i++) {
 41       $str .= substr($chars, mt_rand(0, strlen($chars) - 1), 1);
 42     }
 43     return $str;
 44   }
 45 
 46   private function getJsApiTicket() {
 47     // jsapi_ticket 应该全局存储与更新，以下代码以写入到文件中做示例
 48     $data = json_decode(file_get_contents("jsapi_ticket.json"));
 49     if ($data->expire_time < time()) {
 50       $accessToken = $this->getAccessToken();
 51       // 如果是企业号用以下 URL 获取 ticket
 52       // $url = "https://qyapi.weixin.qq.com/cgi-bin/get_jsapi_ticket?access_token=$accessToken";
 53       $url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?type=jsapi&access_token=$accessToken";
 54       $res = json_decode($this->httpGet($url));
 55       $ticket = $res->ticket;
 56       if ($ticket) {
 57         $data->expire_time = time() + 7000;
 58         $data->jsapi_ticket = $ticket;
 59         $fp = fopen("jsapi_ticket.json", "w");
 60         fwrite($fp, json_encode($data));
 61         fclose($fp);
 62       }
 63     } else {
 64       $ticket = $data->jsapi_ticket;
 65     }
 66 
 67     return $ticket;
 68   }
 69 
 70   private function getAccessToken() {
 71     // access_token 应该全局存储与更新，以下代码以写入到文件中做示例
 72     $data = json_decode(file_get_contents("access_token.json"));
 73     if ($data->expire_time < time()) {
 74       // 如果是企业号用以下URL获取access_token
 75       // $url = "https://qyapi.weixin.qq.com/cgi-bin/gettoken?corpid=$this->appId&corpsecret=$this->appSecret";
 76       $url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=$this->appId&secret=$this->appSecret";
 77       $res = json_decode($this->httpGet($url));
 78       $access_token = $res->access_token;
 79       if ($access_token) {
 80         $data->expire_time = time() + 7000;
 81         $data->access_token = $access_token;
 82         $fp = fopen("access_token.json", "w");
 83         fwrite($fp, json_encode($data));
 84         fclose($fp);
 85       }
 86     } else {
 87       $access_token = $data->access_token;
 88     }
 89     return $access_token;
 90   }
 91 
 92   private function httpGet($url) {
 93     $curl = curl_init();
 94     curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
 95     curl_setopt($curl, CURLOPT_TIMEOUT, 500);
 96     // 为保证第三方服务器与微信服务器之间数据传输的安全性，所有微信接口采用https方式调用，必须使用下面2行代码打开ssl安全校验。
 97     // 如果在部署过程中代码在此处验证失败，请到 http://curl.haxx.se/ca/cacert.pem 下载新的证书判别文件。
 98     curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, true);
 99     curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, true);
100     curl_setopt($curl, CURLOPT_URL, $url);
101 
102     $res = curl_exec($curl);
103     curl_close($curl);
104 
105     return $res;
106   }
107 }

注意：

1、示例代码只是讲解整体流程，关于路径部分可自行调整

2、由于app_secret比较保密，建议保存在服务端，由后台发起