腾讯alloylever使用问题总结, vconsole 生产环境条件展示

1. 安装及使用腾讯 alloylever

  安装: npm install alloylever -S
  引入: import Alloylever from 'alloylever'
  配置: Alloylever.config({
			cdn: '', // vconsole 网络地址
			entry: '', // 触发显示vconsole 事件绑定元素 可通过Alloylever.entry 函数设置多个元素触发
			... // 等
		})

2. 遇到的问题

1. 默认点击6次就会显示, 而且次数累计,生产环境用户容易误触
2. 绑定元素必须默认直接显示, 此问题只在移动端真实环境出现 chrome 模拟器正常没问题

3. 解决办法

// 修改config 方法 解决真机在 load 事件监听中获取不到绑定元素的问题
Alloylever.config = function(config){
  ...
  if(config.entry){
    window.addEventListener('load', function() {
      setTimeout(() => { // 延时去获取元素
        Alloylever.entry(config.entry)
      }, 2000)
      // Alloylever.entry(config.entry)
    })
  }
  ...
}
// 修改entry 方法只有在3s 内连续点击超过 settings 设置次数才会显示
Alloylever.entry = function(selector) {
  var count = 0,
    entry = document.querySelector(selector),
    clickTime = new Date().getTime()
  if(entry) {
    entry.addEventListener('click', function () { 
      if ((clickTime + 3000 > new Date().getTime()) && count !== -10000) {
        count++
      } else if (count !== -10000) {
        clickTime = new Date().getTime()
        count = 0
      }
      // 只有在3s 内连续点击超过 settings 设置次数才会显示
      console.log(count, Alloylever.settings.clickTimes);
      if (count > Alloylever.settings.clickTimes) {
        count = -10000
        Alloylever.vConsole(true)
      }
    })
  }
}