jsapi-demo-6.1.js 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544
  1. wx.ready(function () {
  2. alert("启动jsapi!");
  3. // 1 判断当前版本是否支持指定 JS 接口,支持批量判断
  4. document.querySelector('#checkJsApi').onclick = function () {
  5. wx.checkJsApi({
  6. jsApiList: [
  7. 'checkJsApi',
  8. 'onMenuShareTimeline',
  9. 'onMenuShareAppMessage',
  10. 'onMenuShareQQ',
  11. 'onMenuShareWeibo',
  12. 'hideMenuItems',
  13. 'showMenuItems',
  14. 'hideAllNonBaseMenuItem',
  15. 'showAllNonBaseMenuItem',
  16. 'translateVoice',
  17. 'startRecord',
  18. 'stopRecord',
  19. 'onRecordEnd',
  20. 'playVoice',
  21. 'pauseVoice',
  22. 'stopVoice',
  23. 'uploadVoice',
  24. 'downloadVoice',
  25. 'chooseImage',
  26. 'previewImage',
  27. 'uploadImage',
  28. 'downloadImage',
  29. 'getNetworkType',
  30. 'openLocation',
  31. 'getLocation',
  32. 'hideOptionMenu',
  33. 'showOptionMenu',
  34. 'closeWindow',
  35. 'scanQRCode',
  36. 'chooseWXPay',
  37. 'openProductSpecificView',
  38. 'addCard',
  39. 'chooseCard',
  40. 'openCard'
  41. ],
  42. success: function (res) {
  43. alert("检测通过:" +JSON.stringify(res));
  44. },
  45. fail: function(res) {
  46. alert("检测失败:" +JSON.stringify(res));
  47. },
  48. complete: function(res) {
  49. alert("检测结束");
  50. }
  51. });
  52. };
  53. // 2. 分享接口
  54. // 2.1 监听“分享给朋友”,按钮点击、自定义分享内容及分享结果接口
  55. document.querySelector('#onMenuShareAppMessage').onclick = function () {
  56. wx.onMenuShareAppMessage({
  57. title: 'wechat-php-sdk博客',
  58. desc: '微信公众平台php开发包,细化各项接口操作,支持链式调用。项目创建人:dodgepudding 项目地址:https://github.com/dodgepudding/wechat-php-sdk',
  59. link: 'http://binsee.github.io/wechat-php-sdk/',
  60. imgUrl: 'http://binsee.github.io/wechat-php-sdk/img/author.jpg',
  61. trigger: function (res) {
  62. alert("点击分享:" +JSON.stringify(res));
  63. // 用户确认分享后执行的回调函数
  64. },
  65. success: function (res) {
  66. alert("分享成功:" +JSON.stringify(res));
  67. // 用户确认分享后执行的回调函数
  68. },
  69. cancel: function (res) {
  70. alert("取消分享:" +JSON.stringify(res));
  71. // 用户取消分享后执行的回调函数
  72. },
  73. fail:function (res) {
  74. alert("分享失败:" +JSON.stringify(res));
  75. }
  76. });
  77. alert('已注册获取“发送给朋友”状态事件');
  78. };
  79. // 2.2 监听“分享到朋友圈”按钮点击、自定义分享内容及分享结果接口
  80. document.querySelector('#onMenuShareTimeline').onclick = function () {
  81. wx.onMenuShareTimeline({
  82. title: 'wechat-php-sdk博客',
  83. desc: '微信公众平台php开发包,细化各项接口操作,支持链式调用。项目创建人:dodgepudding 项目地址:https://github.com/dodgepudding/wechat-php-sdk',
  84. link: 'http://binsee.github.io/wechat-php-sdk/',
  85. imgUrl: 'http://binsee.github.io/wechat-php-sdk/img/author.jpg',
  86. trigger: function (res) {
  87. alert("点击分享:" +JSON.stringify(res));
  88. // 用户确认分享后执行的回调函数
  89. },
  90. success: function (res) {
  91. alert("分享成功:" +JSON.stringify(res));
  92. // 用户确认分享后执行的回调函数
  93. },
  94. cancel: function (res) {
  95. alert("取消分享:" +JSON.stringify(res));
  96. // 用户取消分享后执行的回调函数
  97. },
  98. fail:function (res) {
  99. alert("分享失败:" +JSON.stringify(res));
  100. }
  101. });
  102. alert('已注册获取“分享到朋友圈”状态事件');
  103. };
  104. // 2.3 监听“分享到QQ”按钮点击、自定义分享内容及分享结果接口
  105. document.querySelector('#onMenuShareQQ').onclick = function () {
  106. wx.onMenuShareQQ({
  107. title: 'wechat-php-sdk博客',
  108. desc: '微信公众平台php开发包,细化各项接口操作,支持链式调用。项目创建人:dodgepudding 项目地址:https://github.com/dodgepudding/wechat-php-sdk',
  109. link: 'http://binsee.github.io/wechat-php-sdk/',
  110. imgUrl: 'http://binsee.github.io/wechat-php-sdk/img/author.jpg',
  111. trigger: function (res) {
  112. alert("点击分享:" +JSON.stringify(res));
  113. // 用户确认分享后执行的回调函数
  114. },
  115. success: function (res) {
  116. alert("分享成功:" +JSON.stringify(res));
  117. // 用户确认分享后执行的回调函数
  118. },
  119. cancel: function (res) {
  120. alert("取消分享:" +JSON.stringify(res));
  121. // 用户取消分享后执行的回调函数
  122. },
  123. fail:function (res) {
  124. alert("分享失败:" +JSON.stringify(res));
  125. }
  126. });
  127. alert('已注册获取“分享到 QQ”状态事件');
  128. };
  129. // 2.4 监听“分享到微博”按钮点击、自定义分享内容及分享结果接口
  130. document.querySelector('#onMenuShareWeibo').onclick = function () {
  131. wx.onMenuShareWeibo({
  132. title: 'wechat-php-sdk博客',
  133. desc: '微信公众平台php开发包,细化各项接口操作,支持链式调用。项目创建人:dodgepudding 项目地址:https://github.com/dodgepudding/wechat-php-sdk',
  134. link: 'http://binsee.github.io/wechat-php-sdk/',
  135. imgUrl: 'http://binsee.github.io/wechat-php-sdk/img/author.jpg',
  136. trigger: function (res) {
  137. alert("点击分享:" +JSON.stringify(res));
  138. // 用户确认分享后执行的回调函数
  139. },
  140. success: function (res) {
  141. alert("分享成功:" +JSON.stringify(res));
  142. // 用户确认分享后执行的回调函数
  143. },
  144. cancel: function (res) {
  145. alert("取消分享:" +JSON.stringify(res));
  146. // 用户取消分享后执行的回调函数
  147. },
  148. fail:function (res) {
  149. alert("分享失败:" +JSON.stringify(res));
  150. }
  151. });
  152. alert('已注册获取“分享到微博”状态事件');
  153. };
  154. // 3 智能接口
  155. var voice = {
  156. localId: '',
  157. serverId: ''
  158. };
  159. // 3.1 识别音频并返回识别结果
  160. document.querySelector('#translateVoice').onclick = function () {
  161. if (voice.localId == '') {
  162. alert('请先使用 startRecord 接口录制一段声音');
  163. return;
  164. }
  165. wx.translateVoice({
  166. localId: voice.localId,
  167. complete: function (res) {
  168. if (res.hasOwnProperty('translateResult')) {
  169. alert('识别结果:' + res.translateResult);
  170. } else {
  171. alert('无法识别');
  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. // 4.3 停止录音
  186. document.querySelector('#stopRecord').onclick = function () {
  187. wx.stopRecord({
  188. success: function (res) {
  189. voice.localId = res.localId;
  190. },
  191. fail: function (res) {
  192. alert(JSON.stringify(res));
  193. }
  194. });
  195. };
  196. // 4.4 监听录音自动停止
  197. wx.onVoiceRecordEnd({
  198. complete: function (res) {
  199. voice.localId = res.localId;
  200. alert('录音时间已超过一分钟');
  201. }
  202. });
  203. // 4.5 播放音频
  204. document.querySelector('#playVoice').onclick = function () {
  205. if (voice.localId == '') {
  206. alert('请先使用 startRecord 接口录制一段声音');
  207. return;
  208. }
  209. wx.playVoice({
  210. localId: voice.localId
  211. });
  212. };
  213. // 4.6 暂停播放音频
  214. document.querySelector('#pauseVoice').onclick = function () {
  215. wx.pauseVoice({
  216. localId: voice.localId
  217. });
  218. };
  219. // 4.7 停止播放音频
  220. document.querySelector('#stopVoice').onclick = function () {
  221. wx.stopVoice({
  222. localId: voice.localId
  223. });
  224. };
  225. // 4.8 监听录音播放停止
  226. wx.onVoicePlayEnd({
  227. complete: function (res) {
  228. alert('录音(' + res.localId + ')播放结束');
  229. }
  230. });
  231. // 4.8 上传语音
  232. document.querySelector('#uploadVoice').onclick = function () {
  233. if (voice.localId == '') {
  234. alert('请先使用 startRecord 接口录制一段声音');
  235. return;
  236. }
  237. wx.uploadVoice({
  238. localId: voice.localId,
  239. success: function (res) {
  240. alert('上传语音成功,serverId 为' + res.serverId);
  241. voice.serverId = res.serverId;
  242. alert("上传语音信息:" + JSON.stringify(res));
  243. }
  244. });
  245. };
  246. // 4.9 下载语音
  247. document.querySelector('#downloadVoice').onclick = function () {
  248. if (voice.serverId == '') {
  249. alert('请先使用 uploadVoice 上传声音');
  250. return;
  251. }
  252. wx.downloadVoice({
  253. serverId: voice.serverId,
  254. success: function (res) {
  255. alert('下载语音成功,localId 为' + res.localId);
  256. voice.localId = res.localId;
  257. alert("下载语音信息:" + JSON.stringify(res));
  258. }
  259. });
  260. };
  261. // 5 图片接口
  262. // 5.1 拍照、本地选图
  263. var images = {
  264. localId: [],
  265. serverId: []
  266. };
  267. document.querySelector('#chooseImage').onclick = function () {
  268. wx.chooseImage({
  269. success: function (res) {
  270. images.localId = res.localIds;
  271. alert('已选择 ' + res.localIds.length + ' 张图片');
  272. }
  273. });
  274. };
  275. // 5.2 图片预览
  276. document.querySelector('#previewImage').onclick = function () {
  277. wx.previewImage({
  278. current: 'http://img5.douban.com/view/photo/photo/public/p1353993776.jpg',
  279. urls: [
  280. 'http://img3.douban.com/view/photo/photo/public/p2152117150.jpg',
  281. 'http://img5.douban.com/view/photo/photo/public/p1353993776.jpg',
  282. 'http://img3.douban.com/view/photo/photo/public/p2152134700.jpg'
  283. ]
  284. });
  285. };
  286. // 5.3 上传图片
  287. document.querySelector('#uploadImage').onclick = function () {
  288. if (images.localId.length == 0) {
  289. alert('请先使用 chooseImage 接口选择图片');
  290. return;
  291. }
  292. var i = 0, length = images.localId.length;
  293. images.serverId = [];
  294. function upload() {
  295. wx.uploadImage({
  296. localId: images.localId[i],
  297. success: function (res) {
  298. i++;
  299. alert('已上传:' + i + '/' + length);
  300. alert("上传图片信息:" + JSON.stringify(res));
  301. images.serverId.push(res.serverId);
  302. if (i < length) {
  303. upload();
  304. }
  305. },
  306. fail: function (res) {
  307. alert(JSON.stringify(res));
  308. }
  309. });
  310. }
  311. upload();
  312. };
  313. // 5.4 下载图片
  314. document.querySelector('#downloadImage').onclick = function () {
  315. if (images.serverId.length === 0) {
  316. alert('请先使用 uploadImage 上传图片');
  317. return;
  318. }
  319. var i = 0, length = images.serverId.length;
  320. images.localId = [];
  321. function download() {
  322. wx.downloadImage({
  323. serverId: images.serverId[i],
  324. success: function (res) {
  325. i++;
  326. alert('已下载:' + i + '/' + length);
  327. alert("下载图片信息:" + JSON.stringify(res));
  328. images.localId.push(res.localId);
  329. if (i < length) {
  330. download();
  331. }
  332. }
  333. });
  334. }
  335. download();
  336. };
  337. // 6 设备信息接口
  338. // 6.1 获取当前网络状态
  339. document.querySelector('#getNetworkType').onclick = function () {
  340. wx.getNetworkType({
  341. success: function (res) {
  342. alert(res.networkType);
  343. },
  344. fail: function (res) {
  345. alert(JSON.stringify(res));
  346. }
  347. });
  348. };
  349. // 7 地理位置接口
  350. // 7.1 查看地理位置
  351. document.querySelector('#openLocation').onclick = function () {
  352. wx.openLocation({
  353. latitude: 23.099994,
  354. longitude: 113.324520,
  355. name: 'TIT 创意园',
  356. address: '广州市海珠区新港中路 397 号',
  357. scale: 14,
  358. infoUrl: 'http://weixin.qq.com'
  359. });
  360. };
  361. // 7.2 获取当前地理位置
  362. document.querySelector('#getLocation').onclick = function () {
  363. wx.getLocation({
  364. success: function (res) {
  365. alert(JSON.stringify(res));
  366. },
  367. cancel: function (res) {
  368. alert('用户拒绝授权获取地理位置');
  369. }
  370. });
  371. };
  372. // 8 界面操作接口
  373. // 8.1 隐藏右上角菜单
  374. document.querySelector('#hideOptionMenu').onclick = function () {
  375. wx.hideOptionMenu();
  376. };
  377. // 8.2 显示右上角菜单
  378. document.querySelector('#showOptionMenu').onclick = function () {
  379. wx.showOptionMenu();
  380. };
  381. // 8.3 批量隐藏菜单项
  382. document.querySelector('#hideMenuItems').onclick = function () {
  383. wx.hideMenuItems({
  384. menuList: [
  385. 'menuItem:readMode', // 阅读模式
  386. 'menuItem:share:timeline', // 分享到朋友圈
  387. 'menuItem:copyUrl' // 复制链接
  388. ],
  389. success: function (res) {
  390. alert('已隐藏“阅读模式”,“分享到朋友圈”,“复制链接”等按钮');
  391. },
  392. fail: function (res) {
  393. alert(JSON.stringify(res));
  394. }
  395. });
  396. };
  397. // 8.4 批量显示菜单项
  398. document.querySelector('#showMenuItems').onclick = function () {
  399. wx.showMenuItems({
  400. menuList: [
  401. 'menuItem:readMode', // 阅读模式
  402. 'menuItem:share:timeline', // 分享到朋友圈
  403. 'menuItem:copyUrl' // 复制链接
  404. ],
  405. success: function (res) {
  406. alert('已显示“阅读模式”,“分享到朋友圈”,“复制链接”等按钮');
  407. },
  408. fail: function (res) {
  409. alert(JSON.stringify(res));
  410. }
  411. });
  412. };
  413. // 8.5 隐藏所有非基本菜单项
  414. document.querySelector('#hideAllNonBaseMenuItem').onclick = function () {
  415. wx.hideAllNonBaseMenuItem({
  416. success: function () {
  417. alert('已隐藏所有非基本菜单项');
  418. }
  419. });
  420. };
  421. // 8.6 显示所有被隐藏的非基本菜单项
  422. document.querySelector('#showAllNonBaseMenuItem').onclick = function () {
  423. wx.showAllNonBaseMenuItem({
  424. success: function () {
  425. alert('已显示所有非基本菜单项');
  426. }
  427. });
  428. };
  429. // 8.7 关闭当前窗口
  430. document.querySelector('#closeWindow').onclick = function () {
  431. wx.closeWindow();
  432. };
  433. // 9 微信原生接口
  434. // 9.1.1 扫描二维码并返回结果
  435. document.querySelector('#scanQRCode0').onclick = function () {
  436. wx.scanQRCode({
  437. desc: 'scanQRCode desc'
  438. });
  439. };
  440. // 9.1.2 扫描二维码并返回结果
  441. document.querySelector('#scanQRCode1').onclick = function () {
  442. wx.scanQRCode({
  443. needResult: 1,
  444. desc: 'scanQRCode desc',
  445. success: function (res) {
  446. alert(JSON.stringify(res));
  447. }
  448. });
  449. };
  450. // 10 微信支付接口
  451. // 10.1 发起一个支付请求
  452. document.querySelector('#chooseWXPay').onclick = function () {
  453. wx.chooseWXPay({
  454. timestamp: 1414723227,
  455. nonceStr: 'noncestr',
  456. 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',
  457. paySign: 'bd5b1933cda6e9548862944836a9b52e8c9a2b69'
  458. });
  459. };
  460. // 11.3 跳转微信商品页
  461. document.querySelector('#openProductSpecificView').onclick = function () {
  462. wx.openProductSpecificView({
  463. productId: 'pDF3iY0ptap-mIIPYnsM5n8VtCR0'
  464. });
  465. };
  466. // 12 微信卡券接口
  467. // 12.1 添加卡券
  468. document.querySelector('#addCard').onclick = function () {
  469. wx.addCard({
  470. cardList: [
  471. {
  472. cardId: 'pDF3iY9tv9zCGCj4jTXFOo1DxHdo',
  473. cardExt: '{"code": "", "openid": "", "timestamp": "1418301401", "signature":"64e6a7cc85c6e84b726f2d1cbef1b36e9b0f9750"}'
  474. },
  475. {
  476. cardId: 'pDF3iY9tv9zCGCj4jTXFOo1DxHdo',
  477. cardExt: '{"code": "", "openid": "", "timestamp": "1418301401", "signature":"64e6a7cc85c6e84b726f2d1cbef1b36e9b0f9750"}'
  478. }
  479. ],
  480. success: function (res) {
  481. alert('已添加卡券:' + JSON.stringify(res.cardList));
  482. }
  483. });
  484. };
  485. // 12.2 选择卡券
  486. document.querySelector('#chooseCard').onclick = function () {
  487. wx.chooseCard({
  488. cardSign: '97e9c5e58aab3bdf6fd6150e599d7e5806e5cb91',
  489. timestamp: 1417504553,
  490. nonceStr: 'k0hGdSXKZEj3Min5',
  491. success: function (res) {
  492. alert('已选择卡券:' + JSON.stringify(res.cardList));
  493. }
  494. });
  495. };
  496. // 12.3 查看卡券
  497. document.querySelector('#openCard').onclick = function () {
  498. alert('您没有该公众号的卡券无法打开卡券。');
  499. wx.openCard({
  500. cardList: [
  501. ]
  502. });
  503. };
  504. });
  505. wx.error(function (res) {
  506. alert(res.errMsg);
  507. });