wx is not defined no-undef 报错解决方法

今天用项目里引入了微信的 jssdk,在使用的过程中,一直报 wx is not defined no-undef

后来看了下,是 eslint 的报错,给 eslint 的规则加上全局变量 wx 就可以了

解决方法:在 .eslintrc.js 文件里加入以下内容,就不会报错了

1
2
3
4
5
6
module.exports = {
// 省略其他配置...
globals: {
wx: true
}
}

http-server 的安装和使用

http-server 是什么?有什么用?

http-server 是一个轻量级的 http 服务器,它可以让任意一个目录成为服务器的目录,讲的有点模糊?试想一下这个场景,假设项目开发完了,要打包发布,想看一下打包后的文件有没有问题,是不是得把文件复制到本地服务器上才能看到?这个工具可以让你直接在当前目录开个本地服务[此处应该有掌声]

使用方法

1.安装

全局安装

1
npm install -g http-server

按需安装

使用 npx 可以直接运行,而无需先安装 。不了解 npx 的童鞋可以看看我写的这篇文章:npm 和 npx 的区别

1
npx http-server [path] [options]

2.运行

打开命令行工具,切换到要开服务的目录下,执行

1
http-server

这是运行成功后的输出:

小鑫の随笔

把地址复制到浏览器就能看到服务有没有开启成功了,mama 再也不用担心我不会开启本地服务了~

小鑫の随笔

除了直接启动服务,还可以设置一些参数

  • -p--port 使用的端口(默认为 8080)
  • -a 要使用的地址(默认为 0.0.0.0)

快点耍起来吧~

github:https://github.com/http-party/http-server

JS 在数组指定位置插入元素

最近有个需求:将一个元素插入到现有数组的指定位置

回忆了一下,添加数组元素有这几个方法:unshiftpushsplice

前两个是只能在数组开头/末尾添加,显示是不符合需求的,那么只剩 splice

splice 的定义是:从数组中添加/删除项目,返回被删除的项目,并且会改变原数组。

这不就是我们想要实现的吗

上才艺

1
2
var array = [1, 3, 4];
array.splice(1, 0, 2); // after:[1, 2, 3, 4]

每次都要这样写有点麻烦,来封装一下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/**
* 指定位置插入元素
* @param index 添加元素的位置
* @param items 向数组添加的新项目
*/
Array.prototype.insert = function(index, ...items) {
if (isNaN(index)) {
throw new TypeError('请输入数字');
}
this.splice(index, 0, ...items);
};

var array = [1];
array.insert(1, 2, 3, 4); // after: [1, 2, 3, 4]

今天,你学废了吗~

react 倒计时 hook

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
import { useRef, useState, useEffect } from 'react';

/**
* 解析毫秒为天、时、分、秒
* @param milliseconds 毫秒
*/
const parseMs = (milliseconds: number) => {
return {
days: Math.floor(milliseconds / 86400000),
hours: Math.floor(milliseconds / 3600000) % 24,
minutes: Math.floor(milliseconds / 60000) % 60,
seconds: Math.floor(milliseconds / 1000) % 60,
};
};

/**
* 倒计时
* @param endTimeStamp 结束时间的时间戳
*/
const useCountDown = (endTimeStamp: number) => {
const timer = useRef(0);
const [state, setState] = useState(endTimeStamp);

// 计算时间的差值
const calcTimeDiff = () => {
// 获取当前时间戳
const currentTime = +new Date();
// 计算当前时间和结束时间的差值
const seconds = Math.floor((endTimeStamp || 0) - currentTime);
// 如果是负数 就清空定时器
if (seconds <= 0) {
clearInterval(timer.current);
return setState(0);
}
setState(seconds);
};

useEffect(() => {
calcTimeDiff();
timer.current = setInterval(() => {
calcTimeDiff();
}, 1000);
return () => {
clearInterval(timer.current);
};
}, []);

const { days, hours, minutes, seconds } = parseMs(state);
return { days, hours, minutes, seconds };
};

export default useCountDown;

点击下方链接查看运行效果:

Edit react 倒计时 hook

github:https://github.com/isxiaoxin/front_end_wheel

JS 判断日期是不是今天、昨天、明天

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 判断日期是不是今天、昨天、明天
const isToday = (str) => {
let d = new Date(str).setHours(0, 0, 0, 0);
let today = new Date().setHours(0, 0, 0, 0);

let obj = {
'-86400000': '昨天',
0: '今天',
86400000: '明天',
};

return obj[d - today] || '啥也不是';
};

isToday(new Date()); // 今天