指尖跳动，代码改变生活

仔细审查一便当前图标的样式，发现没有自己写的CSS样式导致图标变形，最后检查发现元素有个一个 font-style 为 italic的样式，才恍然大悟，这是斜体的样式，vant 插入图标使用的是标签 i，i 默认样式就是斜体，直接覆盖默认样式即可。

比如我们常见的时间格式时分秒 00:00:00，如果用12小时制表示通常是 12:06:01，如果不补零看起来就比较难看，不规整。那用 Js 怎么处理，很多人常用的方法就是判断是否小于10，如果小于就补0，大于等于就不补。var hours = 8;var minutes = 10;var time;time = hours < 10 ? '0' + hours : hours;time += ':';time += minutes < 10 ? '0' + minutes

在项目引用了 Vant UI 的 Popover组件，该组件规定弹出菜单的名称为 text，但我在后台得到的数据是 name，如果是一次性的话可以在获取数据后直接赋值，但是后期需要根据输入框的变化动态调整 Popover 组件菜单项的名字，所以才想到去绑定对象的属性值，一开始想到的是如何去监听 watch，其实计算属性完全可以实现。<van-form @submit="onSubmit"> <van-field v-model="menuName"

至于原因，就是谷歌以及基于 Chromium 开发的浏览器自身限制，出发点是影响用户体验，想想也是，万一，一不小心点开哪个网页，突然播放一些乱七八糟的声音，而且特别大声，估计谁也受不了。考虑到目前地球上绝大多数浏览器都是基于开源的Chromium 开发，而且浏览器厂商也统一静止了自动播放，我们就不得不想办法着手解决这个问题。先看看大厂们是怎么解决的，比如优酷、B站是可以自动播放视频的，那它们是怎么做的？研究了一下，它们是以静音的方式开启自动播放，然后提示用户手动打开音量。<vid.

有时候数字很长，为了美化显示效果，通常会将数字转换成多少k多少w显示，就像现在喜欢说你工作多少k。function formatNumber(num) { return num > 1e3 ? (num / 1e3).toFixed(1) + 'k' : num > 1e4 ? (num / 1e4).toFixed(1) + 'w' : num}...

第一种：原型链上挂载import Vue from 'vue';import Moment from 'moment'; // 引入, NPM使用 npm install moment --save 安装Vue.prototype.$moment = Moment; // 挂载new Vue({ ... ...})脚本中使用 this.$momentexport default { data: function() { return

Array.pop()该方法会返回数组的最后一个元素，但同时也会从数组中删除该元素，所以使用需谨慎。解决办法，拷贝数组再进行操作，代码如下var arr = [1, 2]var el = arr.pop()console.log(el)console.log(arr)// el 结果 2// arr 结果 [1]// 替换方法[...arr].pop()Array.length通过获取数组的长度再减去一就可以得到数组最后一个元素的下标，这个方法比较常用。

最近一个小问题困扰我，就是在小程序中请求某个 API 会低概率出现 502 的现象，但重新访问又可以。由于请求是异步的，所以封装成了 Promise 方便调用，在此基础上想实现 502 重连，就是访问出错重新连接。function request(url) { return new Promise((resolve, reject) => { wx.request({ url, success: res => {

网上有很多类似的封装模块，大部分都很拖沓的，自己也尝试写了一个支持进度显示。封装好的代码，代码量很少但调用很方便，有完整的事件监听，将它保存为 saveFileUtil.jsfunction downloadFile(url, listener) { listener.onStart && listener.onStart() const task = wx.downloadFile({ url, success: res => { ..

假设将一个数组的首尾互换一下，利用数组的 splice 替换元素方法很轻松就办到。var arr = [ { id: 0, name: 'Rose' }, { id: 1, name: 'Robin' }, { id: 2, name: 'Tom' }]var sourceIndex = 0var targetIndex = arr.length - 1ar..

! 运算符都用过，取反的意思，比如在做逻辑判断的时候，它作用就是转换数据为布尔值然后取反。var today = new Date().getDay()if (!today) { console.log('礼拜天')}而 !! 则是双重取反，负负得正嘛，可以得到该数据的布尔类型，相当于简变了布尔值的转换，经常用于强转布尔值的简写。var a = "hello"var b = 2020var c = nullconsole.log(Boolean(a), ...

先看例子prompt("请输入联系方式", "手机/邮箱/QQ");prompt 接受两个参数，一个是显示的提示文本，还有一个输入框的默认值。但有的时候我们的参数是一个数组形式，为了简便高效，通常会用apply 方法巧妙的给函数传递数组参数。var content = "请输入联系方式,手机/QQ/邮箱";prompt.apply(this, content.s...

ES6中引入一种新的模板语法，使用 `` 包裹的字符可以直接输出，然后使用 ${} 去处理表达式。let title = 'ES6模板语法';let template = ` <span class="media-title">${title}</span>`;console.log(template);// 结果<span class=...

&&、|| 是逻辑运算符，一般用作条件判断，但很多情况还可以用在赋值运算，使用起来很方便。举个例子var a = a || {};var b = 0 || 2;// 结果// a => {}// b => 2再看个例子var a = 0 && 1;var b = 1 && 2 && 3...

创建 Socket 连接很简单，一行代码即可。let ws = new WebSocket('wss://example.com/');如果服务器采用 SSL，只需要将 ws:// 替换成 wss://let ws = new WebSocket('wss://echo.websocket.org/');然后是通过回调函数获取服务器消息以及对连接状态进行捕捉。// 成...