`

微信Javascript SDK 在线演示代码

 
阅读更多

微信的Javascript SDK发布，大家抢先观看代码实现吧！

相关功能：

  • 分享到朋友圈 
  • 分享给朋友 
  • 分享到QQ 
  • 拍照或从手机相册中选图 
  • 识别音频并返回识别结果 
  • 使用微信内置地图查看位置

HTML代码

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <metacharset="utf-8">
  5. <title>微信JS-SDK Demo</title>
  6. <metaname="viewport"content="width=device-width, initial-scale=1, user-scalable=0">
  7. <linkrel="stylesheet"href="http://demo.open.weixin.qq.com/jssdk/css/style.css?ts=1420774989">
  8. </head>
  9. <bodyontouchstart="">
  10. <divclass="wxapi_container">
  11. <divclass="wxapi_index_container">
  12. <ulclass="label_box lbox_close wxapi_index_list">
  13. <liclass="label_item wxapi_index_item"><aclass="label_inner"href="#menu-basic">基础接口</a></li>
  14. <liclass="label_item wxapi_index_item"><aclass="label_inner"href="#menu-share">分享接口</a></li>
  15. <liclass="label_item wxapi_index_item"><aclass="label_inner"href="#menu-image">图像接口</a></li>
  16. <liclass="label_item wxapi_index_item"><aclass="label_inner"href="#menu-voice">音频接口</a></li>
  17. <liclass="label_item wxapi_index_item"><aclass="label_inner"href="#menu-smart">智能接口</a></li>
  18. <liclass="label_item wxapi_index_item"><aclass="label_inner"href="#menu-device">设备信息接口</a></li>
  19. <liclass="label_item wxapi_index_item"><aclass="label_inner"href="#menu-location">地理位置接口</a></li>
  20. <liclass="label_item wxapi_index_item"><aclass="label_inner"href="#menu-webview">界面操作接口</a></li>
  21. <liclass="label_item wxapi_index_item"><aclass="label_inner"href="#menu-scan">微信扫一扫接口</a></li>
  22. <liclass="label_item wxapi_index_item"><aclass="label_inner"href="#menu-shopping">微信小店接口</a></li>
  23. <liclass="label_item wxapi_index_item"><aclass="label_inner"href="#menu-card">微信卡券接口</a></li>
  24. <liclass="label_item wxapi_index_item"><aclass="label_inner"href="#menu-pay">微信支付接口</a></li>
  25. </ul>
  26. </div>
  27. <divclass="lbox_close wxapi_form">
  28. <h3id="menu-basic">基础接口</h3>
  29. <spanclass="desc">判断当前客户端是否支持指定JS接口</span>
  30. <buttonclass="btn btn_primary"id="checkJsApi">checkJsApi</button>
  31.  
  32. <h3id="menu-share">分享接口</h3>
  33. <spanclass="desc">获取“分享到朋友圈”按钮点击状态及自定义分享内容接口</span>
  34. <buttonclass="btn btn_primary"id="onMenuShareTimeline">onMenuShareTimeline</button>
  35. <spanclass="desc">获取“分享给朋友”按钮点击状态及自定义分享内容接口</span>
  36. <buttonclass="btn btn_primary"id="onMenuShareAppMessage">onMenuShareAppMessage</button>
  37. <spanclass="desc">获取“分享到QQ”按钮点击状态及自定义分享内容接口</span>
  38. <buttonclass="btn btn_primary"id="onMenuShareQQ">onMenuShareQQ</button>
  39. <spanclass="desc">获取“分享到腾讯微博”按钮点击状态及自定义分享内容接口</span>
  40. <buttonclass="btn btn_primary"id="onMenuShareWeibo">onMenuShareWeibo</button>
  41.  
  42. <h3id="menu-image">图像接口</h3>
  43. <spanclass="desc">拍照或从手机相册中选图接口</span>
  44. <buttonclass="btn btn_primary"id="chooseImage">chooseImage</button>
  45. <spanclass="desc">预览图片接口</span>
  46. <buttonclass="btn btn_primary"id="previewImage">previewImage</button>
  47. <spanclass="desc">上传图片接口</span>
  48. <buttonclass="btn btn_primary"id="uploadImage">uploadImage</button>
  49. <spanclass="desc">下载图片接口</span>
  50. <buttonclass="btn btn_primary"id="downloadImage">downloadImage</button>
  51.  
  52. <h3id="menu-voice">音频接口</h3>
  53. <spanclass="desc">开始录音接口</span>
  54. <buttonclass="btn btn_primary"id="startRecord">startRecord</button>
  55. <spanclass="desc">停止录音接口</span>
  56. <buttonclass="btn btn_primary"id="stopRecord">stopRecord</button>
  57. <spanclass="desc">播放语音接口</span>
  58. <buttonclass="btn btn_primary"id="playVoice">playVoice</button>
  59. <spanclass="desc">暂停播放接口</span>
  60. <buttonclass="btn btn_primary"id="pauseVoice">pauseVoice</button>
  61. <spanclass="desc">停止播放接口</span>
  62. <buttonclass="btn btn_primary"id="stopVoice">stopVoice</button>
  63. <spanclass="desc">上传语音接口</span>
  64. <buttonclass="btn btn_primary"id="uploadVoice">uploadVoice</button>
  65. <spanclass="desc">下载语音接口</span>
  66. <buttonclass="btn btn_primary"id="downloadVoice">downloadVoice</button>
  67.  
  68. <h3id="menu-smart">智能接口</h3>
  69. <spanclass="desc">识别音频并返回识别结果接口</span>
  70. <buttonclass="btn btn_primary"id="translateVoice">translateVoice</button>
  71.  
  72. <h3id="menu-device">设备信息接口</h3>
  73. <spanclass="desc">获取网络状态接口</span>
  74. <buttonclass="btn btn_primary"id="getNetworkType">getNetworkType</button>
  75.  
  76. <h3id="menu-location">地理位置接口</h3>
  77. <spanclass="desc">使用微信内置地图查看位置接口</span>
  78. <buttonclass="btn btn_primary"id="openLocation">openLocation</button>
  79. <spanclass="desc">获取地理位置接口</span>
  80. <buttonclass="btn btn_primary"id="getLocation">getLocation</button>
  81.  
  82. <h3id="menu-webview">界面操作接口</h3>
  83. <spanclass="desc">隐藏右上角菜单接口</span>
  84. <buttonclass="btn btn_primary"id="hideOptionMenu">hideOptionMenu</button>
  85. <spanclass="desc">显示右上角菜单接口</span>
  86. <buttonclass="btn btn_primary"id="showOptionMenu">showOptionMenu</button>
  87. <spanclass="desc">关闭当前网页窗口接口</span>
  88. <buttonclass="btn btn_primary"id="closeWindow">closeWindow</button>
  89. <spanclass="desc">批量隐藏功能按钮接口</span>
  90. <buttonclass="btn btn_primary"id="hideMenuItems">hideMenuItems</button>
  91. <spanclass="desc">批量显示功能按钮接口</span>
  92. <buttonclass="btn btn_primary"id="showMenuItems">showMenuItems</button>
  93. <spanclass="desc">隐藏所有非基础按钮接口</span>
  94. <buttonclass="btn btn_primary"id="hideAllNonBaseMenuItem">hideAllNonBaseMenuItem</button>
  95. <spanclass="desc">显示所有功能按钮接口</span>
  96. <buttonclass="btn btn_primary"id="showAllNonBaseMenuItem">showAllNonBaseMenuItem</button>
  97.  
  98. <h3id="menu-scan">微信扫一扫</h3>
  99. <spanclass="desc">调起微信扫一扫接口</span>
  100. <buttonclass="btn btn_primary"id="scanQRCode0">scanQRCode(微信处理结果)</button>
  101. <buttonclass="btn btn_primary"id="scanQRCode1">scanQRCode(直接返回结果)</button>
  102.  
  103. <h3id="menu-shopping">微信小店接口</h3>
  104. <spanclass="desc">跳转微信商品页接口</span>
  105. <buttonclass="btn btn_primary"id="openProductSpecificView">openProductSpecificView</button>
  106.  
  107. <h3id="menu-card">微信卡券接口</h3>
  108. <spanclass="desc">批量添加卡券接口</span>
  109. <buttonclass="btn btn_primary"id="addCard">addCard</button>
  110. <spanclass="desc">调起适用于门店的卡券列表并获取用户选择列表</span>
  111. <buttonclass="btn btn_primary"id="chooseCard">chooseCard</button>
  112. <spanclass="desc">查看微信卡包中的卡券接口</span>
  113. <buttonclass="btn btn_primary"id="openCard">openCard</button>
  114.  
  115. <h3id="menu-pay">微信支付接口</h3>
  116. <spanclass="desc">发起一个微信支付请求</span>
  117. <buttonclass="btn btn_primary"id="chooseWXPay">chooseWXPay</button>
  118. </div>
  119. </div>
  120. </body>
  121. <scriptsrc="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
  122. <script>
  123. wx.config({
  124. debug:false,
  125. appId:'wxf8b4f85f3a794e77',
  126. timestamp:1420774989,
  127. nonceStr:'2nDgiWM7gCxhL8v0',
  128. signature:'1f8a6552c1c99991fc8bb4e2a818fe54b2ce7687',
  129. jsApiList:[
  130. 'checkJsApi',
  131. 'onMenuShareTimeline',
  132. 'onMenuShareAppMessage',
  133. 'onMenuShareQQ',
  134. 'onMenuShareWeibo',
  135. 'hideMenuItems',
  136. 'showMenuItems',
  137. 'hideAllNonBaseMenuItem',
  138. 'showAllNonBaseMenuItem',
  139. 'translateVoice',
  140. 'startRecord',
  141. 'stopRecord',
  142. 'onRecordEnd',
  143. 'playVoice',
  144. 'pauseVoice',
  145. 'stopVoice',
  146. 'uploadVoice',
  147. 'downloadVoice',
  148. 'chooseImage',
  149. 'previewImage',
  150. 'uploadImage',
  151. 'downloadImage',
  152. 'getNetworkType',
  153. 'openLocation',
  154. 'getLocation',
  155. 'hideOptionMenu',
  156. 'showOptionMenu',
  157. 'closeWindow',
  158. 'scanQRCode',
  159. 'chooseWXPay',
  160. 'openProductSpecificView',
  161. 'addCard',
  162. 'chooseCard',
  163. 'openCard'
  164. ]
  165. });
  166. </script>
  167. <scriptsrc="http://demo.open.weixin.qq.com/jssdk/js/api-6.1.js?ts=1420774989"></script>
  168. </html>
 

Javascript代码

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

via cnblogs.com

 

分享到：
| javascript oop编程 — 实现继承的三种形 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    Thinkphp3.2对接微信JSAPI支付的微信支付SDK和DEMO

    在IT行业中，微信支付是一种广泛使用的在线支付方式，尤其在移动支付领域占据着重要的地位。本文将详细解析如何使用Thinkphp3.2框架对接微信JSAPI支付，以及对应的微信支付SDK和DEMO。 首先，微信JSAPI（JavaScript...

    仿微信支付页面html

    在涉及真实交易时，应使用微信官方提供的SDK和接口，遵循微信支付的开发规范。这涉及到后端服务器的集成，涉及到API调用、签名验证、支付结果通知等一系列复杂的流程。因此，如果你打算开发实际的在线支付功能，必须...

    asp版的微信JSSDK

    在本场景中，我们讨论的是ASP实现的微信JavaScript SDK（JSSDK）。微信JSSDK是微信为开发者提供的一套JavaScript接口库，允许开发者在网页中调用微信的功能，如分享、扫一扫、支付等，增强用户体验。 微信JSSDK的...

    微信小程序项目源码云开发cloudtest.zip

    这个"cloudtest"项目很可能是用来演示如何在小程序中集成并使用云开发功能的实例，开发者可以通过解压文件，查看源代码，学习如何设置云环境，配置云函数，以及在小程序中调用云服务，从而提升自己的小程序开发技能...

    php微信分享带图标demo.zip

    "Html微信"标签则暗示了项目可能涉及到HTML页面与微信SDK的结合，即在HTML页面中嵌入微信分享的JavaScript代码，实现前端的分享功能。 【压缩包内容】"php微信分享带图标demo"很可能包含以下几个部分： 1. PHP文件...

    仿移动微信聊天APP页面(演示图+代码亲测).zip

    该压缩包文件“仿移动微信聊天APP页面(演示图+代码亲测).zip”是一个针对移动设备的微信聊天应用界面的模拟实现。这个项目旨在帮助开发者理解和构建类似微信的即时通讯（IM）应用的用户界面。它包含了演示图和可运行...

    node-wechat-jsapi:微信JS SDK服务器端Node.js实现

    #微信JS SDK服务器端Node.js实现 微信官方只给出了JSSDK中的签名算法，这里将算法打包成也相应的API，并使用一个简单的网页演示了基本的实现。 ##配置 使用之前，需要先将config.js文件中的appId和secret替换为你的...

    WeChatSdkJsDemo:演示微信SDK-JS的使用

    WeChatSdkJsDemo演示微信SDK-JS的使用。

    微信小程序demo：SDK.CN.zip

    在“描述”中提到的“微信小程序demo”，是指一个演示性的小程序项目，通常包括了基本的页面结构、样式设计、数据绑定、事件处理以及API调用等核心功能，是初学者入门的绝佳实践案例。通过这个demo，开发者可以直观...

    2022-php-服务商支付demo-jsapi-微信支付

    7. **demo样例**：项目中的demo文件夹可能包含了示例代码，这些代码演示了如何使用PHP和JSAPI进行实际的支付操作，比如生成预支付订单、调用微信支付SDK、处理支付回调等。开发者可以通过分析和运行这些示例来学习...

    Android-一个微信android工具

    微信JSSDK提供了许多JavaScript层面的功能，如地理位置获取、微信扫一扫、微信摇一摇等。工具包会演示如何在网页或Webview中接入并使用这些功能。 7. **调试与日志**： 为了方便开发者调试，工具包可能包含了日志...

    微信js-sdk地理位置接口用法示例

    示例代码演示了如何通过wx.getLocation接口获取到位置信息，并在回调函数中使用这些信息。比如，可以将获取到的经度和纬度显示在页面上，或者用这些数据执行其他操作。 另一个接口是wx.openLocation，它用于在微信...

    手机浏览器调用微信H5支付源码

    - `paydemo.html`：这是一个支付演示页面，通常包含调用微信H5支付接口的JavaScript代码。在这个页面中，用户点击支付按钮后，会触发支付流程，与后台服务器交互，获取预支付交易信息，并启动微信支付的H5页面。 -...

    微信余额修改.rar

    在IT行业中，微信支付是一种广泛使用的在线支付方式，它提供了便捷的移动支付体验。这个名为“微信余额修改.rar”的压缩包文件显然包含了与微信支付页面相关的HTML和CSS代码，允许开发者或设计师模仿微信支付的界面...

    佳博蓝牙打印机开发资料包含android,ios微信小程序示例demo

    1. Android SDK或示例代码，演示如何初始化蓝牙，搜索设备，连接打印机，以及发送打印指令。 2. iOS SDK或Swift/Objective-C示例项目，展示了如何使用CoreBluetooth框架与打印机进行通信。 3. 微信小程序的API使用...

    微信支付 app demo

    - 在前端（如JavaScript）和后端（如PHP、Node.js）代码中调用微信支付SDK，发起支付请求。 - 处理微信支付返回的结果，如支付成功、失败或取消的回调。 5. **关键API**：在微信支付中，主要涉及以下API： - `...

    基于Java实现的 微信支付 依赖库.zip

    - **示例代码**：演示如何使用SDK发起支付请求、处理支付回调等。 - **文档**：详细解释了如何配置和使用这个Java库。 - **证书文件**：可能包含商户证书，用于与微信服务器安全通信。 - **依赖库**：可能包含必要的...

    基于微信平台的警务活动管理系统小程序 （源码 + 演示视频）

    1. 微信小程序开发：微信小程序是一种轻量级的应用开发平台，开发者可以利用微信提供的SDK和开发工具，编写基于JavaScript、WXML（微信标记语言）和WXSS（微信样式语言）的代码，构建出能在微信内运行的应用。...

    党员之家服务系统小程序（微信小程序完整前后端代码）.zip

    总之，这个项目为党员提供了一个集学习、交流、管理于一体的在线平台，覆盖了微信小程序的前后端开发，涉及到的技术包括SpringBoot、微信小程序、数据库管理、前端开发等，是学习和实践Web开发特别是微信小程序开发...

    微信支付Demo

    6. **JSAPI支付**：如果Demo中包含JSAPI支付的示例，那么开发者可以了解到如何在网页端调用微信支付的JavaScript接口，通过调用微信SDK，用户可以在浏览器内完成支付。 7. **订单查询与退款接口**：对于交易状态的...

Magicbox
Global site tag (gtag.js) - Google Analytics