yichael
/
yichael_gamecenter


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142
							<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, viewport-fit=cover">
  <title>vConsole/Demo1</title>
  <link href="./lib/weui.min.css" rel="stylesheet"/>
  <link href="./lib/demo.css" rel="stylesheet"/>

  <script src="./lib/zepto.min.js"></script>
  <script src="./lib/zepto.touch.min.js"></script>

  <!-- 引入vConsole的JS库 -->
  <script src="../dist/vconsole.min.js"></script>

</head>
<body ontouchstart>
  <div class="page">
    <h1 class="page_title">Demo 1</h1>
    <div class="weui_text_area">
      <p class="weui_msg_desc">点击下面的按钮，即可打印 log。<br/>点击右下角按钮，即可查看 log。</p>
    </div>
    <a href="javascript:;" class="weui_btn weui_btn_primary js_btn_log" data-type="log">普通日志(log)</a>
    <a href="javascript:;" class="weui_btn weui_btn_primary js_btn_log" data-type="info">信息日志(info)</a>
    <a href="javascript:;" class="weui_btn weui_btn_primary js_btn_log" data-type="debug">调试日志(debug)</a>
    <a href="javascript:;" class="weui_btn weui_btn_primary js_btn_log" data-type="warn">警告日志(warn)</a>
    <a href="javascript:;" class="weui_btn weui_btn_primary js_btn_log" data-type="error">报错日志(error)</a>

    <a href="javascript:;" class="weui_btn weui_btn_default js_btn_log_obj">打印Object</a>
    <a href="javascript:;" class="weui_btn weui_btn_default js_btn_trigger_error">触发JS Error</a>
    <a href="javascript:;" class="weui_btn weui_btn_default js_btn_log_sys">打印到系统面板</a>
    <a href="javascript:;" class="weui_btn weui_btn_default js_btn_ajax_get">发起AJAX(GET)</a>
    <a href="javascript:;" class="weui_btn weui_btn_default js_btn_ajax_post">发起AJAX(POST)</a>

    <a href="javascript:;" class="weui_btn weui_btn_default js_btn_clear">清除日志</a>
    <a href="javascript:;" class="weui_btn weui_btn_warn js_btn_hideswitch">隐藏按钮</a>
    <a href="javascript:;" class="weui_btn weui_btn_warn js_btn_destroy">销毁vConsole</a>
  </div>
  <div class="weui_toptips weui_notice" id="js_tips">已打印log</div>
</body>

<script>
// 初始化vConsole
window.vConsole = new window.VConsole({
  defaultPlugins: ['system', 'network', 'element', 'storage'], // 可以在此设定要默认加载的面板
  maxLogNumber: 1000,
  // disableLogScrolling: true,
  onReady: function() {
    console.log('vConsole is ready.');
  },
  onClearLog: function() {
    console.log('on clearLog');
  }
});

console.info('欢迎使用 vConsole。vConsole 是一个由微信公众平台前端团队研发的 Web 前端开发者面板，可用于展示 console 日志，方便开发、调试。');

$('.js_btn_log').on('tap', function(e) {
  var type = $(this).data('type');
  console[type](type); // 例如，console.log(type)
  showTips();
});
$('.js_btn_log_obj').on('tap', function(e) {
  var obj = {
    'foo': 'bar',
    'obj': {'bool': true},
    'arr': [9, 8, 7],
    'tips': 'JS对象可以折叠展示'
  };
  console.log(obj);
  showTips();
});
$('.js_btn_trigger_error').on('tap', function(e) {
  showTips();
  var err = undefined;
  err.a = 1;
});
$('.js_btn_log_sys').on('tap', function(e) {
  // 输出到系统面板
  console.log('[system]', '当前时间戳:', (+new Date()));
  showTips();
});
$('.js_btn_ajax_get').on('tap', function(e) {
  // 发起一个AJAX
  $.get('ajax.php',  { id: Math.random(), action: 'Get' }, function(resp) {
    console.log(resp);
  });
  showTips();
});
$('.js_btn_ajax_post').on('tap', function(e) {
  // 发起一个AJAX
  $.post('ajax.php',  { id: Math.random(), action: 'Post' }, function(resp) {
    console.log(resp);
  });
  showTips();
});
$('.js_btn_clear').on('tap', function(e) {
  console.clear();
});
$('.js_btn_hideswitch').on('tap', function(e) {
  var that = this;
  if ($(this).hasClass('weui_btn_disabled')) {
    return false;
  }
  $(this).addClass('weui_btn_disabled');
  window.vConsole.hideSwitch();
  var count = 6;
  var cb = function() {
    count--;
    if (count == 0) {
      window.vConsole.showSwitch();
      $(that).removeClass('weui_btn_disabled');
      $(that).html('隐藏按钮');
      clearInterval(timer);
      return;
    }
    $(that).html('隐藏按钮(' + count + ')');
  }
  cb();
  var timer = setInterval(cb, 1000);
});
$('.js_btn_destroy').on('tap', function(e) {
  if ($(this).hasClass('weui_btn_disabled')) {
    return false;
  }
  $('.weui_btn').addClass('weui_btn_disabled');
  window.vConsole.destroy();
  $(this).html('刷新页面以重载vConsole');
});

// 用于页面内展示顶部tips
var tipsTimer;
function showTips() {
  tipsTimer && clearTimeout(tipsTimer);
  $('#js_tips').show();
  tipsTimer = setTimeout(function() {
    $('#js_tips').hide();
  }, 1500);
}

</script>
</html>