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

news/2024/7/10 1:59:47 标签: javascript, vue

1. 安装及使用腾讯 alloylever

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

2. 遇到的问题

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

3. 解决办法

javascript">// 修改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)
      }
    })
  }
}

http://www.niftyadmin.cn/n/1483378.html

相关文章

响应式开发一招致胜

qq转载于:https://www.cnblogs.com/cuishien/p/10413628.html

ios使用html5切图需要注意的事项

2019独角兽企业重金招聘Python工程师标准>>> 由于公司最近要求开发一个项目是与html5交互的,android端的十分容易,直接将html5等多个包放进去,编写代码即可运行,但是ios的却不行,有一个地方特别需要注意,我就是吃了这个亏,后来查阅了很多资料,最终发现了问题所在: …

vue项目代码优化, 首屏, 白屏, 加载时间等

1. vue项目白屏, 首屏加载内容优化 常用的vue项目首屏内容优化: 路由按需加载, 组件按需加载, 添加loading, 骨架屏等 但是一般没有特殊需求都是只使用按需加载即可2. 遇到的问题 1. 按需加载是好的, 但是如果拆分太细, 会造成js , css文件太多,影响页面资源加载, 和页面的性…

C++数据结构——杨辉三角

杨辉三角 杨辉,字谦光,汉族,钱塘(今浙江省杭州)人,南宋杰出的数学家。 他曾担任过南宋地方行政官员,为政清廉,足迹遍及苏杭一带。他在总结民间乘除捷算法、“垛积术”、纵横图&#…

1.4 GPU分析

shader 加宏 编译说明glsl转载于:https://www.cnblogs.com/GISCesium/p/10420498.html

【转】将 75000 行原生 iOS 应用程序移植到 Flutter 后,结果太惊讶!

很少有文章,介绍如何将大型应用,移植到Flutter。而本文的作者——一位来自澳洲的Native iOS & Flutter的开发者,尝试这样做了,结果让他十分惊讶。到底是什么情况?一起来看文章吧! 澳大利亚有一个名为Ea…

手写call,apply,bind

1. call Function.prototype.myCall function (context) {// context 接收第一个参数 如果没有默认用windowcontext context || window// 给context.fn 或其他属性赋值为函数, 即myCall的调用者改变函数的this 指向contextcontext.fn this// 获取传入的参数const args [..…

C++数据结构——排队等候

习题3-10 排队等候 某社会福利机构组织一项活动&#xff0c;参加的对象分为两类&#xff0c;一类是老年人&#xff08;年龄≥60岁&#xff09;&#xff0c;另一类是年轻人&#xff08;年龄<60岁&#xff09;。但参加该项活动要排队等候&#xff0c;为了照顾老年人&#xff0…