demo.js 18 KB

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