demo2.php 1.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455
  1. <?php
  2. // 这个demo示例如何通过PHP动态加载vConsole
  3. // (1)访问 demo2.php 时(一般情况),不加载vConsole
  4. // (2)访问 demo2.php?dev_mode=1 时(调试模式),加载vConsole
  5. $dev_mode = isset($_GET['dev_mode']) ? $_GET['dev_mode'] : '0';
  6. ?><!DOCTYPE html>
  7. <html>
  8. <head>
  9. <meta charset="utf-8">
  10. <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, viewport-fit=cover">
  11. <title>vConsole/Demo2</title>
  12. <link href="./lib/weui.min.css" rel="stylesheet"/>
  13. <link href="./lib/demo.css" rel="stylesheet"/>
  14. <script src="./lib/zepto.min.js"></script>
  15. <script src="./lib/zepto.touch.min.js"></script>
  16. <?php if ($dev_mode == '1') { ?>
  17. <!-- 引入vConsole的JS库 -->
  18. <script src="../dist/vconsole.min.js"></script>
  19. <script>
  20. // 初始化vConsole
  21. window.vConsole = new window.VConsole();
  22. </script>
  23. <?php } ?>
  24. </head>
  25. <body ontouchstart>
  26. <div class="page">
  27. <h1 class="page_title">Demo 2</h1>
  28. <a href="javascript:;" class="weui_btn weui_btn_primary js_btn_log">Hello World</a>
  29. </div>
  30. <div class="weui_toptips weui_notice" id="js_tips">已打印log</div>
  31. </body>
  32. <script>
  33. $('.js_btn_log').on('tap', function(e) {
  34. // 打印log时无须判断是否为dev_mode,
  35. // 未加载vConsole时,console.log()不会显示到前台
  36. console.log('Hello World');
  37. showTips();
  38. });
  39. // 用于页面内展示顶部tips
  40. var tipsTimer;
  41. function showTips() {
  42. tipsTimer && clearTimeout(tipsTimer);
  43. $('#js_tips').show();
  44. tipsTimer = setTimeout(function() {
  45. $('#js_tips').hide();
  46. }, 1500);
  47. }
  48. </script>
  49. </html>