目录
CSS 部分
样式穿透
css 样式穿透 ::v-deep .className { }
::v-deep .u-tabbar__content {
background-color: #fff!important;
}最高优先级
让 CSS 样式中某个属性的优先级最高可使用 !important 关键字对该属性值进行修饰。如：
#app {
background-color: skyblue!important;
}文本限行、两端对其
CSS 文本内容只显示一行或只显示两行超出部分显示省略号效果的样式设置：
/* 一行 */
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
word-break: break-all;
/* 两行 */
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;CSS 文本两端对齐：
width: 4em;
display: inline-block;
text-align: justify;
text-align-last: justify;注：如果是类似标题要两端对齐(标题后还有个 : 冒号 的情况)，可以把 冒号 放在装 标题 的标签后面，比如：
<view class="title">联系电话</view>:首行缩进、删除线
CSS 首行缩进 2字符：
text-indent: 2em;CSS 给文本添加删除线效果的样式：
text-decoration: line-through;文本溢出可滚动
CSS 让一个容器(比如：<view></view>)内部文本内容超出横向可滑动但不显示滚动条：
.box {
display: inline-block;
width: 290rpx; // 固定容器的宽度
white-space: nowrap; // 文本不换行
overflow-x: scroll; // 横向可滚动
&::-webkit-scrollbar { // 隐藏滚动条但滚动的功能不会被影响
display: none;
}
}背景图
CSS 设置背景图片且居中显示示例：
.page {
align-items: center;
background: url(./imgs/01.jpg);
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
display: grid;
height: 100vh;
overflow: hidden;
place-items: center;
}渐变：边框、背景、文字
CSS 边框颜色渐变色效果：
width: 595rpx;
height: 280rpx;
border-radius: 17rpx;
border: 5rpx solid transparent;
background-clip: padding-box, border-box;
background-origin: padding-box, border-box;
background-image: linear-gradient(to right, #fff, #fff), linear-gradient(to right, #8798FC, #FB6298);CSS 背景颜色渐变色代码：
background: linear-gradient(180deg, #00EAD1, #00C9B1);CSS 实现文字渐变效果核心代码：
background: linear-gradient(0deg, #FFFE8F 38.96484375%, #FFFFFF 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;demo-背景持续渐变动效：
注：180deg 表示线性渐变方向为从上到下，详情请参考： 菜鸟教程 css3 渐变
CSS 背景持续渐变效果：（以给body添加背景色为例）
body {
padding: 0;
margin: 0;
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
/* 背景渐变色 */
background: linear-gradient(125deg, #2c3e50, #27ae60,#2980b9,#e74c3c,#8e44ad);
/* 指定背景图像大小 */
background-size: 500%;
/* 执行动画：动画名 时长 线性 无限播放 */
animation: bgAnimate 15s linear infinite;
}
/* 定义动画 */
@keyframes bgAnimate {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}禁用原生input、button边框
CSS 禁用原生 input 元素和 button 元素获得焦点时自带的边框样式：
input:focus {
outline: none;
}
button:focus {
outline: none;
}input光标色
CSS 修改 input 输入框的光标颜色：
caret-color: red;透明度
CSS 设置元素透明度：
1.opacity 属性设置背景透明度 value :指定不透明度，从0.0(完全透明)到1.0(完全不透明)；
2.background-color 的 rgba() 方式，rgba() 的第4位数值也是指定背景的透明度，从0.0(完全透明)到1.0(完全不透明)。
opacity: 0.5;
background-color: rgba(0, 0, 0, 0.5);demo-loading动效：
CSS 实现加载中的 loading 效果：给一个盒子（比如 div 或者 view class="loading-4" 即可）
.loading-4 {
margin: 0 auto;
width: 120rpx;
height: 20rpx;
-webkit-mask: linear-gradient(90deg, #000 70%, #0000 0) 0/20%;
background: linear-gradient(#fd8654 0 0) 0/0% no-repeat #ddd;
animation: p4 2s infinite steps(6);
}
@keyframes p4 {
100% {
background-size: 120%;
}
}loading效果：
更多纯 CSS 实现 loading 效果的方法：10个纯css实现的loading效果
demo-纯 CSS 实现爱心效果：
:root {
--bg: #f00;
}
.love {
width: 100px;
height: 100px;
background-color: var(--bg);
border-radius: 10% 10% 10% 20%;
position: relative;
box-shadow: 10px 10px 15px rgb(72, 71, 71);
transform: rotate(-45deg);
}
.love::after,
.love::before {
content: ' ';
display: block;
width: 100%;
height: 100%;
border-radius: 50%;
background-color: var(--bg);
transform: rotate(-45deg);
position: absolute;
top: -50%;
}
.love::after {
right: -50%;
top: 0;
}CSS 伪类选择器
scss 中 nth-child() 选择器的使用示例：假如要选择指定位置的 .view-box 这个类名的元素，那么就在 .view-box 的内部 使用 &:nth-child(n) 来指定(n从1开始)，可以直接使用数字指定到该位置的同类名的元素。
如果要选择第一个此类名的元素还可以使用 :first-child
如果要选择最后一个此类名的元素可以直接使用 :last-child
.view-box {
width: 80rpx;
height: 80rpx;
&:first-child {
background-color: blue;
}
&:nth-child(7n+0) { /* 这样写表示选择所有 7 的倍数的元素 */
background-color: red;
}
&:last-child {
background-color: green;
}
}还可以使用 :not() 函数来排除某一些不需要内部样式的元素
/* 表示除了第一个 其他的都添加 margin-top 的样式 */
:not(:first-child) {
margin-top: 20px;
}鼠标样式
CSS 控制鼠标样式（小手、箭头、十字、移动...）
cursor: auto; // 标准光标
cursor: default; // 标准箭头
cursor: pointer; // 手型光标
cursor: crosshair; // 十字标
cursor: wait; // 等待光标
cursor: text; // I文本光标
cursor: vertical-text;// _文本水平光标
cursor: move; // 可移动光标(看着和三角方向光标一样)
cursor: no-drop; // 不可移动光标(看着和禁止光标一样)
cursor: not-allowed; // 无效光标/禁止光标
cursor: help; // 帮助光标
cursor: all-scroll; // 三角方向光标(看着和可移动光标一直)HTML + CSS 特效
HTML + CSS + a 标签的锚点链接实现平滑的滚动条过渡效果 ：
// 核心代码：
// 样式-CSS style
.box {
/* ... */
/* 这个属性配置HTML的A标签锚点链接可以实现平滑的scroll滚动效果 */
scroll-behavior: smooth;
}
// 结构-HTML
<div>
<div id="a1">a1的位置</div>
<a href="#a1">去a1</a>
</div>注：滚动条平滑滚动通过 javaScript 也可以实现，示例代码：
<script>
// 给图片导航按钮添加点击事件
// 仅获取按钮的父盒子就行了，点按钮通过冒泡可以获取 .btn 的事件
const btns = document.querySelector('.btns')
const btnsClick = e => {
// 通过 e.target.innerText 可以获取到是点击了哪个按钮
console.log(e.target.innerText);
// 再获取到对应的图片（div）元素
const img = document.querySelector(`.img${e.target.innerText}`)
// 通过 scrollIntoView + behavior: 'smooth' 实现滚动条动画式滚动
img.scrollIntoView({
behavior: 'smooth'
})
}
btns.addEventListener('click', btnsClick)
</script>滚动条样式
CSS 设置滚动条样式，示例代码：
.list {
width: 100%;
height: 34vh;
overflow-x: hidden;
overflow-y: auto;
// 滚动条平滑过度
scroll-behavior: smooth;
/* 整个滚动条 */
&::-webkit-scrollbar {
/* 对应纵向滚动条的宽度 */
width: 6px;
/* 对应横向滚动条的宽度 */
height: 16px;
}
/* 滚动条上的滚动滑块 */
&::-webkit-scrollbar-thumb {
background-color: rgba(73,177,245, 0.5);
border-radius: 3px;
}
/* 滚动条轨道 */
&::-webkit-scrollbar-track {
background-color: rgba(219,239,253, 0.3);
border-radius: 3px;
}
}demo-HTML + CSS 实现全屏滚动贴合效果：(类似滚动一下切一张图片的效果）
<!-- 核心 HTML 代码 -->
<div class="box">
<div class="img1" id="img1" style="--img: url(./static/images/01.jpg);"></div>
<div class="img2" id="img2" style="--img: url(./static/images/02.jpg);"></div>
<div class="img3" id="img3" style="--img: url(./static/images/03.jpg);"></div>
</div><style>
/* 核心 CSS 代码如下： */
body {
padding: 0;
margin: 0;
overflow: hidden;
}
.box {
width: 100vw;
height: 100vh;
overflow-x: hidden;
overflow-y: scroll;
/* 设置滚动条贴合的方式：沿 Y 轴滚动，mandatory 表示强制滚动 */
scroll-snap-type: y mandatory;
}
.box>div {
width: 100%;
height: 100vh;
/* 设置下一页的内容会滚动贴合到顶部 */
scroll-snap-align: start;
/* 设置背景图片 */
align-items: center;
/* 通过 var() 函数调用自定义属性获取每个 div 的背景图片 */
background: var(--img);
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
display: grid;
height: 100vh;
overflow: hidden;
place-items: center;
}
</style>CSS 三角形
- 等边三角形
.box {
/* 高宽一定要为 0 */
width: 0;
height: 0;
/* 行高和字体设置为0是为了兼容浏览器的 */
line-height: 0;
font-size: 0;
/* 先让盒子的四条边都为透明色，然后再给定其中一条边一个颜色即可 */
border: 50px solid transparent;
border-left-color: red; /* 顶点 朝右 的三角形 */
border-top-color: blue; /* 顶点 朝下 的三角形 */
border-bottom-color: yellow; /* 顶点 朝上 的三角形 */
border-right-color: tomato; /* 顶点 朝左 的三角形 */
}效果图：等边三角形：
直角三角形：
- 直角三角形（原理就是相邻的两个等边三角形拼起来其实就是一个直角三角形了）
.box {
/* 高宽一定要为 0 */
width: 0px;
height: 0px;
/* 行高和字体设置为0是为了兼容浏览器的 */
line-height: 0;
font-size: 0;
/* 先让盒子的四条边都为透明色，然后再给定其中一条边一个颜色即可 */
border: 50px solid transparent;
border-left-color: red; /* 顶点 朝右 的三角形 */
/* 把顶点朝右和朝上的两个拼一起给一样的颜色即可 */
border-bottom-color: red; /* 顶点 朝上 的三角形 */
}JS 部分
浏览器窗口size、监听变化
获取当前浏览器的视口区域大小：（这个区域指的是当前窗口的可视区域）
// 获取宽度，两个方式获取到的都是一样的
document.documentElement.clientWidth
window.innerWidth
// 获取高度，两个方式获取到的都是一样的
document.documentElement.clientHeight
window.innerHeight
// 补充：
// resize 事件可监听当前页面可视窗口的变化
window.addEventListener('resize', (e) => {
console.log('窗口变化了',e);
})双击-全屏/退出全屏
监听页面的双击事件并实现页面某个元素的全屏显示和退出全屏显示效果：
// 监听双击事件实现渲染区域的全屏显示和退出全屏显示效果
window.addEventListener('dblclick', () => {
// document.fullscreenElement 用于读取文档中正处于全屏显示的元素
const isFull = document.fullscreenElement
if(!isFull) { // 没有全屏的元素再设置渲染区域（也就是canvas）元素全屏
render.domElement.requestFullscreen() // 为页面元素设置全屏显示效果
} else { // 有全屏的元素了就退出全屏效果
document.exitFullscreen()
}
})
// dblclick 事件为双击事件
// document.fullscreenElement 可读取当前文档中处于全屏的元素，没有则返回 null
// 元素.requestFullscreen() 可设置元素为全屏显示效果
// document.exitFullscreen() 可将当前文档中处于全屏显示的元素退出全屏效果
随机ID
随机生成一个可以当做 id 的不会重复的值的方法：
// 每次随机生成一个可以当做id的不会重复的值：a4168e6598df6
getId() {
return Math.random().toString(16).slice(2);
}时间处理-Date() 对象
获取当前时间的时间戳：
方法1：
console.log(new Date().getTime()) // 1654483591656方法2：
console.log(Date.parse(new Date())) // 1654483694000注：以上方法得到的时间戳都是13位的（即：单位 毫秒），如果要得到单位为 秒 的时间戳，将结果 / 1000 即可。
JavaScript toLocaleString() 方法：可根据本地时间把 Date 对象转换为字符串，并返回结果。如：
let time = new Date()
console.log(time.toLocaleString())
// 2022/4/6 下午4:30:39注：此方法得到的 Date 转换为字符串默认为 12 小时制，可以用以下形式得到 24 小时制的。
console.log(new Date().toLocaleString('chinese',{hour12:false}))
// 2022/4/6 16:30:39??与||
? 可选链操作符以及 ?? 与 || 的区别
？是可选链操作符，常用于访问引用类型具有不确定性的内部数据时，比如要访问一个对象中的数组，不确定数组一定有数据就可以使用 ? 取读取它的 length 属性，如果对象没有这个属性也仅会返回 undefined 而不会报错，这样可以有效规避“undefuned上没有 length 属性”的报错！
let data = {name: 'zs'}
console.log(data.list.length) // 代码会报错！！！！
let data = {name: 'zs'}
console.log(data.list?.length) // 返回 undefined 而不会报错?? 和 || 运算符都可以用于设置“默认值”的情况，但二者具有些微差别：
?? 运算符仅有在左侧数据为 undefined 或 null 时才会取右侧的值，所以左侧数据为 0 / false 时不会取右侧数据，仍旧取左侧的 0 / false
let a = null
console.log(a ?? '空') // 空
let a = undefined
console.log(a ?? '空') // 空
let a = 0
console.log(a ?? '空') // 0
let a = false
console.log(a ?? '空') // false|| 运算符是只要左侧数据不为真就会取右侧的数据，所以左侧数据为 0 / false 时也会取右侧数据
let a = 0
console.log(false || '空') // 空
let a = false
console.log(false || '空') // 空
let a = null
console.log(false || '空') // 空
let a = undefined
console.log(false || '空') // 空正则校验手机号
封装正则校验手机号是否符合规范的方法：
// 如果传入的 手机号 符合定义好的正则 则此方法返回 true 否则 返回 false
isPhone(phone) {
// 校验手机号的正则
let reg = /^1[3|4|5|7|8|9][0-9]{9}$/;
if(reg.test(phone)) {
return true
}
return false
}关于更多JS正则校验参考博客。（包含：姓名、手机号、座机号、邮箱、身份证、QQ号、邮编）
随机数-Math.random()
JS 随机生成一个指定数字范围内的整数：
Math.random()*(max-min+1)+min,10) 用于生成一个指定范围的随机整数(min <= 整数 <= max)
Math.random() * 10 // 生成的数为 [0, 10)-包含前不包含后
Math.random() * 100 // 生成的数为 [0, 99]
// 向上取整
Math.ceil(Math.random() * 100)
// 向下取整
Math.floor(Math.random() * 100)
// 使用 toFixed() 方法指定小数点位数
( Math.random() * 100 ).toFixed(1) // 结果保留一位小数向上取整：Math.ceil()
向下取整：Math.floor()
也可以使用 .toFixed() 方法指定具体的小数点位数
案例：随机生成一个 CSS 颜色值：
const getRandomColor = () => {
// 随机生成颜色值
// 1：使用 hsla() 函数随机生成一个 0~360 的值作为色相值
// const H = Math.floor(Math.random() * 360);
// return `hsla(${H}, 100%, 50%, 1)`
// 2：使用 rgb() 的方式，随机生成 0~256 的 RGB 三个值
// （当然如果有需要还可以使用 rgba() 随机生成0~1的透明度）
const R = Math.floor(Math.random() * 256);
const G = Math.floor(Math.random() * 256);
const B = Math.floor(Math.random() * 256);
return `rgb(${R}, ${G}, ${B})`
}
getRandomColor()eval() 函数
JS中的 eval() 函数：可以对给定的字符串表达式执行运算，并返回结果。如：
s = eval("50+20-30*40/20"); // 结果为 10ES6-数组去重
ES6 推荐使用的数组去重方法：Array.from() + new Set()
代码示例：
let arr = [1, 2, 3, 3, 1, 2, 4, 3, 4]
arr = Array.from(new Set(arr))
console.log(arr) // [1, 2, 3, 4]判断对象属性是否存在
可以使用 Object.getOwnPropertyDescriptor(obj, key) 来判断某个对象是否具有某个属性，示例：
let obj = {a: 1}
let key = 'a'
if(!Object.getOwnPropertyDescriptor(obj, key)) {
console.log("对象中没有这个属性", key);
} else {
console.log('对象中有这个属性', key)
}
key = 'b'
if(!Object.getOwnPropertyDescriptor(obj, key)) {
console.log("对象中没有这个属性", key);
} else {
console.log('对象中有这个属性', key)
}
// 打印：
// 对象中有这个属性 a
// 对象中没有这个属性 b注：事实上对象原型链上的 hasOwnProperty 方法也可以判断对象中是否存在某个属性（当然也有其他方式方法），但部分语法检查插件会提示“Do not access Object.prototype method 'hasOwnProperty' from target object.” 大概意思是不要从这个对象上去访问他的原型链方法，而使用示例代码中的方式就不会有提示。所以更推荐使用 Object.getOwnPropertyDescriptor 这个方法判断对象属性。
JS 常用方法总览
数组
- join()：用指定的分隔符将数组每一项拼接为字符串（经常和字符串方法 split 相互转换）
- push()：向数组的末尾添加新元素
- pop()：删除数组的最后一项
- unshift()：向数组首位添加新元素
- shift()：删除数组的第一项
- slice()：按照条件查找出其中的部分元素
- splice()：对数组进行增删改
- filter()：过滤数组，返回满足条件的项组成的新数组（不会改变原数组）
- concat()：用于连接两个或多个数组
- indexOf()：检测当前值在数组中第一次出现的位置索引
- lastIndexOf()：检测当前值在数组中最后一次出现的位置索引
- every()：判断数组中每一项都是否满足条件，最终返回一个布尔值，判断过程中遇到不满足条件的项就会返回 false 并中断校验，不会再判断后续的项。（类似于在for循环中使用了break），不会改变原数组。
- some()：判断数组中是否存在满足条件的项
- includes()：判断一个数组是否包含一个指定的值
- sort()：对数组的元素进行排序
- reverse()：对数组进行倒序
- forEach()：es5及以下循环遍历数组每一项（没有返回值）
- map()：es6循环遍历数组每一项（有返回值）
- find()：返回匹配的项
- findIndex()：返回匹配位置的索引
- reduce()：从数组的第一项开始遍历到最后一项，返回一个最终的值
- reduceRight()：从数组的最后一项开始遍历到第一项，返回一个最终的值
- toLocaleString()、toString()：将数组转换为字符串
- entries()、keys()、values()：遍历数组
对象/字符串
- charAt()：返回指定位置的字符，仅接收一个参数，传入多个后续无效
- charCodeAt()：返回在指定位置的字符的 Unicode 编码
- concat()：连接字符串
- indexOf()：检索字符串，返回该字符在指定字符串中的下标，没有找到返回 -1
- match()：在字符串内检索指定的字符串或按照 一个/多个 正则表达式进行匹配，返回匹配到的值而不是值的下标，没有匹配到结果则返回 null
- replace()：替换字符串中指定的值，接收两个参数，参数1为要替换的值，参数2为替换后的值
- search()：检索字符串中与指定字符串匹配的子串，返回第一个字符所在下标
- slice()：提取字符串片段，并返回被提取的部分但原字符串不变，接收两个参数，参数1为开始提取的下标且包含此下标，参数2为提取结束的下标但不包含此下标
- split()：将字符串以指定字符分割成数组，返回一个数组，原字符串不变（经常和数组方法 join 相互转换）
- toLocaleLowerCase()：把字符串全转换为小写，返回转换后的字符串，原字符串不变
- toLocaleUpperCase()：把字符串全转换为大写，返回转换后的字符串，原字符串不变
- toLowerCase()：把字符串全转换为小写，返回转换后的字符串，原字符串不变
- toUpperCase()：把字符串全转换为大写，返回转换后的字符串，原字符串不变
- substr(start , length)：从 start 开始截取字符串(包含start所在位置)，截取到 length 的长度为止。截取区间内的空格不占位置。（截取指定长度的字符串）
- subString(start, end)：从 start 开始截取字符串(包含start所在位置)到 end 结束(不包含end)，截取区间内的空格也占位置
部分方法使用示例
将字符串以某个字符分隔成一个数组使用 split() 方法。如：
arr = str.split(','); // 将 str 以 , 分隔成一个新的数组赋值到 arr 中将数组以某个字符拼接为一个字符串使用 join() 方法。如：
str = arr.join(' '); // 将 arr 数组各项间以空格为间隔拼接成一个字符串，赋值给 str 字符串的替换方法，将指定字符串中某个或某些字符指定替换为新的字符的方法：replace()。如:
const str = 'abcd'
const newStr = str.replace('d', 'D')
console.log(newStr) // abcD
注：replace() 方法接收两个参数，参数1为要替换的字符（可以是正则表达式）；参数2为替换后的字符，该方法返回一个替换后的新字符串。如下案例：将手机号中间四位以*号替换：
// 定义将用户手机号中间四位使用 * 号代替的过滤器
setPhone(number) {
let reg = /^(\d{3})\d{4}(\d{4})$/;
return number.replace(reg, '$1****$2')
}示例：使用 replace() 替换字符串中的某一些标点符号
let text = 'number。 one,and number tuo? number？ three.'
text = text.replace(/\.|\。|\？|\,|\?/g, ' ') // 将逗号、句号、问号等特殊标点符号替换为空格
console.log(text) // number one and number tuo number three 字符串处理demo：把姓名除了姓其他全替换为 * 号：
setName(name) {
return name.substr(0,1)+new Array(name.length).join('*')
}substring() 方法用于提取字符串中介于两个指定下标之间的字符。返回被截取范围内的字符串。
比如：去掉字符串最后一位字符：
str = str.substring(0, str.length - 1)JS 从数组嵌套对象数据结构中查找指定项所在下标：findIndex() 方法。如：
// 拿到 list 数组中 id 为 1 的项的索引
let index = this.list.findIndex(item => item.id === 1)
// 然后使用 this.list[index] 可以拿到该项
判断数组中是否存在某个数可以使用 indexOf 方法。如：
arr.indexOf(find,start);find:要找的内容,必须;
start:查找开始下标,可选;
返回:查找数据所在的下标,如果没找到,返回-1
判断指定数组中是否已经存在某项的第二个方法：find()。如
const findResult = arr.find(x => x === 'zs')注：find() 方法返回数组中符合测试函数条件的第一个元素。否则返回 undefined ，所以可以根据该方法的返回值判断该数组中是否已经存在某个数。
findIndex((item, index) => { })方法：查找数组中第一个符合要求的元素的索引，在回调箭头函数中书写查找的要求即可，返回的是查找到的元素在数组中的索引号，如果最终没有查找到符合要求的元素则返回 undefined
数组实例的 includes()
includes(value)方法：验证数组中是否包含value这个值，返回布尔值，与字符串的includes方法类似。ES2016 引入了该方法。
数组实例的 filter()
filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
注意： filter() 不会对空数组进行检测。
注意： filter() 不会改变原始数组。
使用 filter() 结合 includes() 方法可以实现数组去重。示例如下：
var arr = [1, 2, 4, 5, 3, 5, 3, 2, 4, 1]
var arr2 = []
arr.filter(item => {
if(!arr2.includes(item)) {
arr2.push(item)
}
})
console.log(arr2); // (5) [1, 2, 4, 5, 3]从数组中移除某一项或多项使用 splice() 方法。如：
arr.splice(i, 1); // 表示从 arr 中从第 i 项开始删除，共删除 1 项注意：splice() 方法向/从数组添加/删除项目，并返回删除的项目。
splice() 方法会改变原始数组。
进阶用法：使用 arr.splice(arr.length, 0, '添加项'); 的方式可以实现向 arr 中新增一个“添加项”的效果。示例如下：
const arr= [0, 1, 2, 3];
arr.splice(arr.length, 0, "ok"); // 0,1,2,3,ok
根据索引查找字符串指定位置的值的方法：charAt(i)。如：
'abcd'.charAt(2) // c注：使用该方法的返回值是该字符串中对应索引位置的值
从一个数组中筛选出某一部分数据组成 一个新数组的方法：filter()。如：
var arr=[13, 4, 6, 7, 35, 48]
var evenNumArr = arr.filter( item => {
return item % 2 === 0
})
console.log(evenNumArr) // (3) [4, 6, 48] filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
注意： filter() 不会对空数组进行检测。
注意： filter() 不会改变原始数组。
字符串调用 toUpperCase() 可以将英文全转为大写，调用 toLowerCase() 可以将英文全转为小写。示例如下：
str.toUpperCase() // 转大写
str.toLowerCase() // 转小写其他JS相关
trim()
去除一个字符串两端的空格的方法：trim()。如：
str = str.trim(); // 将 str 中两端的空格去除，重新赋值给它向服务器发起 get 请求时，如果需要携带参数则参数存放到 params 对象中。如果是携带在 URL中的参数可以直接在模板字符串中使用 ${} 拼接。
从数组中以某个条件去查找某个值，返回符合该条件的第一个数组项的索引值的方法：findIndex() 。如：
const i = arr.findIndex((item) => { item.name === 'zs' })注：如果没有符合条件的元素返回 -1
使用 Element-UI 插件中的 Form 表单组件时验证表单数据的方法：this.$refs.对应表单的ref.validate()。示例代码如下：
// editFormRef 是该表单的 ref 属性值
this.$refs.editFormRef.validate((valid) => {})
// valid 为 true 则表单数据均合法使用 Element-UI 插件中的 Form 表单组件时清空表单数据的方法：this.$refs.对应表单的ref.resetFields()。示例代码如下：
// editFormRef 是该表单 ref 属性的值
this.$refs.editFormRef.resetFields()元素时间对象：event
如果一个事件可以得到它的元素事件对象 event ，则通过 event.target 可以获取到当前触发事件的元素对象。通过 event.target.parentNode 可以得到触发事件的元素的父元素节点。示例如下：
// 通过事件委托给每个 a 链接注册点击事件
ul.onclick = function(e) {
// e.target 匹配到当前被点击的对象即 a 链接
// 通过 e.target.parentNode 匹配到被点击的 li
ul.removeChild(e.target.parentNode) // removeChild() 用于删除该节点
}补充：元素.children 可以用于得到一个该元素所有一级子元素组成的数组
创建元素：createElement() 方法通过指定名称创建一个元素
添加元素-末尾：appendChild() 方法可向节点的子节点列表的末尾添加新的子节点。参数即要添加的节点对象。
添加元素-开头：insertBefore() 方法可在已有的子节点前插入一个新的子节点。该方法有两个参数，参数1：要添加的节点对象；参数2：要添加的位置之前是哪个节点。示例如下：将 li 添加到 ul 列表中索引为 0 的位置即添加后成为最开头的元素。
ul.insertBefore(li, ul.children[0]);删除元素：removeChild() 方法可从子节点列表中删除某个节点。参数即要删除的节点对象。如删除成功，此方法可返回被删除的节点，如失败则返回 NULL 。
防止冒泡和捕获
w3c 的方法是 e.stopPropagation() ，IE11以下则是使用 e.cancelBubble = true
// 按钮的点击事件处理函数
btn.onclick = function (e) {
// 阻止按钮的点击事件冒泡到包裹层触发包裹层的点击事件
e.stopPropagation()
this.className += ' active'
}阻止事件元素的默认行为
w3c 的方法是 e.preventDefault() ，IE则是使用 e.returnValue = false;
const a = document.querySelector('a')
a.onclick = function(e) {
// e.cancelable 为 true 则该元素具有默认行为，值为 false 则没有默认行为
console.log(e.cancelable); // true
// e.preventDefault() 阻止元素的默认行为，用于 a 标签后就阻止了 a 标签的默认跳转行为
e.preventDefault()
}注：当 e.cancelable 为 false 时，表示没有默认行为，这时调用 preventDefault 也是不会起作用的。
fetch网络请求
使用浏览器自带的 fetch 方法发送网络请求示例：
getData = async (keyword) => {
// fetch发送网络请求的最优写法：
try {
const response = await fetch('/api1/search/users1?q=' + keyword)
const data = await response.json()
console.log('请求返回的数据', data)
} catch (error) {
console.log('请求出错', error)
}
}Vue 相关
Vue 搭建的项目因空格、分号等问题报错处理
Vue 搭建的新项目建议先在 .eslintrc.js 文件中的 rules 对象中添加以下代码用于防止项目在运行阶段因为，项目中有多余的分号、函数括号前没有加空格等问题报错。
"space-before-function-paren": 0,
"omitLastInOneLineBlock": 0,
"semi": 0,新建的 Vue 项目常常会因为格式化代码文件时跟 eslint 的要求不符而报错，所以我们新建的项目建议在项目根目录中创建.prettierrc文件进行如下配置：
{
"semi": false,// 格式化时不加分号
"singleQuote": true,// 用单引号替换双引号
"trailingComma":none,// 自动去掉对象后面添加的逗号
"printWidth": 200// 每行最多200个字符换行
}
注意：在声明空对象时，应该给该对象的值为 { } 一个空的大括号而不是 null ，因为在调用该空对象的属性时，空对象的属性值只是为 undefined 而不会报错，但是如果声明时空对象的值为 null 则调用空对象的任何属性都会报错。代码示例：
var obj = {}
console.log(obj.name) // undefined
// 如果空对象的值为 null 时：
var obj = null
console.log(obj.name) // 会报错！！！
在文件目录下通过终端命令快速新建多个文件夹的命令：mkdir 文件名1 文件名2 文件名3 ...（回车）。如下示例代码：
mkdir 文件名1 文件名2 文件名3在文件目录下通过终端命令快速创建多个文件的命令：touch 文件1.js 文件2.js 文件3.js ...（回车），注：每个文件必须有后缀名，可以是不同类型的文件，各项间以空格间隔。如下示例代码：
touch 1.txt 2.html 3.css 4.js 5.vue注：以上两个终端命令都需要先在创建文件的目录下按住 Shift + 鼠标右键 选择“Git Bash Here”打开终端输入执行。
uniApp 部分
plus.device.getVolume(); //当前音量plus.device.setVolume(1);//设置音量
plus.device.setWakelock(Boolean); //设置应用是否保持唤醒（屏幕常亮）状态
plus.device.setWakelock(true); // 设置应用保持唤醒（屏幕常亮）状态
plus.device.vibrate(milliseconds); //milliseconds: ( Number ) 必选 设备振动持续的时间void
plus.navigator.closeSplashscreen(); //关闭软件启动页
更多API：https://www.html5plus.org/doc/zh_cn/device.html
文本长按自由复制
text 长按选择复制以及设置内容到剪贴板
uniapp 中为 text 标签添加上 user-select 属性 可以实现文本可长按选择复制。
监听长按事件设置内容
uniapp 实现对某一段内容的长按复制到剪贴板。使用 @longpress 对元素进行长按事件的监听，再调用 uni.setClipboardData() 方法将想要复制的内容设置到剪贴板即可。 示例如下：
<view>订单编号</view><view @longpress="orderNumberLongTap">{{orderNumber}}</view>事件处理：
// 订单编号的长按事件——长按复制到粘贴板
orderNumberLongTap() {
let _this = this
uni.setClipboardData({
data: _this.orderNumber, // 设置订单编号到剪贴板
showToast: false,
success: function () {
_this.$u.toast('订单编号已复制')
}
});
},页面上拉刷新、下拉加载功能
uniapp 中开启下拉刷新事件，和监听上拉触底事件
首先要在 pages.json 文件中配置对应页面的 style 属性 "enablePullDownRefresh": true
"style": {
// 推荐在页面的style属性中设置此字段，这样是仅在当前页面开启下拉功能
"enablePullDownRefresh": true
}然后再该页面中监听生命周期函数 onPullDownRefresh 下拉刷新事件 和 onReachBottom 上拉触底事件即可：
// 监听页面的下拉刷新事件
onPullDownRefresh() {
console.log('触发了下拉刷新事件');
// 注意：建议在处理完下拉刷新逻辑后手动关闭下拉刷新动画，避免部分机型不自动关闭动画的问题
setTimeout(() => {
uni.stopPullDownRefresh(); //停止下拉刷新动画
}, 1000)
},
// 监听上拉触底事件
onReachBottom() {
console.log('触发了上拉触底事件');
}注：在监听下拉刷新事件时，记得要手动调用 uni.stopPullDownRefresh() 方法 手动停止下拉刷新的动画(让窗口回弹);
在监听页面的上拉刷新事件时，可以在该页面的 style 属性中设置距离底部多少距离事触发此事件，通过 onReachBottomDistance 字段设置距离(默认 50 px)
"onReachBottomDistance": 50 // 上拉触底的单位，单位为pxgetCurrentPages() 获取当前页面栈
getCurrentPages() 函数用于获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。如下示例：通过页面栈获取当前页面并调用页面的生命周期函数从而实现刷新页面的效果：
// 获取当前页面栈的实例
// 获取当前页面栈。数组中第一个元素为首页，最后一个元素为当前页面
const pages = getCurrentPages()
// 拿到当前页面的实例
const page = pages.pop()
// console.log(page);
// 手动执行 onLoad 生命周期函数
page.onLoad()
// console.log('刷新了页面');另外，获取到当前页面栈后可通过当前页面栈获取当前所在页面再调用指定页面的生命周期函数、获取当前页面栈重新执行 onLoad() 完成页面刷新效果：（常见场景：用户授权登录后手动刷新页面）
// 获取当前页面栈的实例
// 获取当前页面栈。数组中第一个元素为首页，最后一个元素为当前页面
const pages = getCurrentPages()
// 拿到当前页面的实例
const page = pages.pop()
// console.log(page);
// 手动执行 onLoad 生命周期函数
page.onLoad()
// console.log('刷新了页面');关闭页面被索引提示
uniapp 小程序端运行时提示 某某页面将被索引 问题，关闭此提示的方法：
项目根目录 -> unpackage -> dist -> dev -> mp-weixin -> project.config.json 在 "setting": {} 字段中添加 "checkSiteMap": false 属性。示例如下：
"setting": {
// 原先有的代码不变
"checkSiteMap": false
},去掉页面顶部标题栏
uniapp 去掉页面顶部的标题区域：实例如下：
"path": "pages/views/sell-car",
"style": {
"navigationStyle": "custom", // 去掉标题栏
}支付宝小程序写法：
"path": "pages/index/index",
"style": {
"transparentTitle": "always",
"titlePenetrate": "YES",
"navigationStyle": "default",
// 另外此属性可 开启/禁止 支付宝小程序的下拉与上拉效果（这个不是下拉刷新、上拉加载那个属性哦）
"allowsBounceVertical": "NO" // 禁止弹性下拉与上拉
},
扩展 - 支付宝小程序禁止屏幕向下拉拽效果
"path": "pages/index/index",
"style": {
// 此属性可 开启/关闭 支付宝小程序的 向下拉拽 效果（这个不是下拉刷新、上拉加载那个设置哦！）
"allowsBounceVertical": "NO" // 禁止页面弹性下拉
},
注：这样设置可能只在 android 平台生效，因为 ios 平台本身自带屏幕的跨边界滑动效果。解决方案：将页面进行 fixed 定位，示例如下：
.page {
// 这里将页面进行固定定位主要是为了解决ios平台页面上下滑动效果无法禁止的问题
width: 750rpx;
min-height: 100vh;
position: fixed;
top: 0;
left: 0;
}scroll-view组件使用示例
scroll-view 下拉刷新、上拉触底、横向滚动、其他
1.scroll-view 的纵向用法：
scroll-view 中的下拉刷新和上拉触底事件的监听和处理。上下滚动示例如下：
<scroll-view
scroll-y="true"
class="container-box"
:refresher-enabled="true"
:refresher-triggered="isRefresh"
@refresherrefresh="refresherStart"
@scrolltolower="scrollToLower"
>
<!-- 中间内容区域 -->
</scroll-view>scroll-y="true" // 开启了竖向可滚动
class="container-box" // 在此一定要设定具体的高度
:refresher-enabled="true" // 开启下拉刷新功能
:refresher-triggered="isRefresh" // 控制下拉刷新状态是否显示
@refresherrefresh="refresherStart" // 监听下拉刷新被触发的事件
@scrolltolower="scrollToLower" // 监听上拉触底事件(默认距离底部 50px )
事件监听的大致处理如下：
// scroll-view 的下拉刷新
async refresherStart() {
this.isRefresh = true // 下拉刷新被触发的状态
this.sortData.page = 1 // 重置 页码
this.userDataList = [] // 清空页面已有数据
await this.getData() // 重新获取最新的数据列表
this.isRefresh = false // 关闭下拉刷新状态
this.$u.toast('页面已刷新') // 提示操作结果
},
// scroll-view 滚动条触底事件(获取下一页的数据)
scrollToLower() {
this.sortData.page += 1;
this.getData();
}2.scroll-view 的横向用法：
使用 scroll-view 进行页面内容横向可滚动的布局。示例如下：
<scroll-view scroll-x="true" class="scroll-row">
<view class="scroll-item"></view>
</scroll-view>和 scroll-view 的纵向使用不同的是，横向使用尤其需要注意的地方是对 scroll-view 和其内部所包含的 元素的 CSS 样式定义，其中，scroll-view 的样式中必须要包含的一个属性是 white-space: nowrap; （使其内部元素不换行）,scroll-view 的内部子元素（这里指亲儿子元素、孙子层元素不算）的样式必须要包含的一个属性是 display: inline-block; （使元素具有行元素和块元素的特性）。示例如下：
.scroll-row {
width: 100%;
height: 256rpx;
background-color: #ffffff;
overflow: hidden;
white-space: nowrap; // 滚动必须加的属性
.scroll-item {
width: 188rpx;
height: 100%;
display: inline-block; // 内部子元素必须要的属性
}
}注：若需要不显示滚动条给 scroll-view 标签添加 :show-scrollbar="false" :enhanced="true" 的属性即可。
补充：使用 scroll-view 搭建类似聊天窗口类型页面，需要动态置底滚动条时的方法：
<scroll-view scroll-y="true" class="scroll-style" :scroll-top="scrollTop" :scroll-with-animation="true">
<view id="message-scroll">
<chatting-item :message="message" v-for="(message, i) in messageList" :key="i"></chatting-item>
</view>
</scroll-view>注：主要是要用一个 id 为 message-scroll 的大盒子将所有“消息内容”包裹起来。
JS 封装的滚动条置底方法如下：
// 将滚动条置底
scrollTOBottom() {
const query = uni.createSelectorQuery().in(this);
let nodesRef = query.select('#message-scroll');
nodesRef
.boundingClientRect(res => {
this.$nextTick(() => {
//进入页面滚动到底部
this.scrollTop = res.height;
});
})
.exec();
}注：方法中选择页面元素时填写的 id 号就是上面用来包裹所有“消息内容”的那个大盒子的 id 。
其他知识
VS Code
常用插件
注：标红的插件是强烈推荐安装的！
- Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code
将 VS Code 中文化的中文语言包扩展（简体）
- Auto Close Tag
自动添加 HTML/XML关闭标记，与 Visual Studio IDE 或 Sublime Text 相同
- Auto Rename Tag
自动重命名成对的 HTML/XML 标记
- Code Spell Checker
源代码拼写检查器
- CodeGeeX: AI Code AutoComplete, Chat, Auto Comment
人工智能时代的编码神器：CodeGeeX 是一款基于人工智能的编码助手，可以在当前行或后续行中建议代码。
- CSS Navigation
允许从 HTML 到 CSS/Sass/Less 进行定义；为类&id名称提供了完成符号和工作空间符号。
- ESLint
将 ESLint JavaScript 集成到VS代码中。（不习惯 ESLint 的语法检查规则的可禁用）
- indent-rainbow
使缩进更易于阅读
- Path Intellisense
自动完成文件名的 Visual Studio 代码插件
- Prettier - Code formatter
使用更漂亮的代码格式化程序
- snippets
GoBystrok创建的ReactJS片段。
- Vetur
VS代码的Vue工具（更适合 Vue2 的宝宝体质，编辑 Vue3 项目时可禁用）
- Vue - Official
Vue的语言支持（更适合 Vue3 的宝宝体质，编辑 Vue2 项目时可禁用）
- vue-helper
vue增强，扩展元素UI，VUX，IVIEW
- Rainbow Brackets 2
匹配括号的颜色不同。
- Live Server
启动具有静态和动态页面实时重新加载功能的本地开发服务器
贴一下截图示例防止宝子们装错：
常用快捷键
Alt + Z：切换自动换行效果
Ctrl + G：快速跳转到某行（需输入行号）
Ctrl + B：切换侧边栏的打开和关闭状态
Ctrl + `：切换终端界面的打开和关闭状态
Shift + Alt + F：格式化代码
Ctrl + F2：选中所有匹配项（适合批量修改某个字符或变量名、函数名等情况）
Ctrl + L：选中当前行
Alt + Shift + 鼠标左键上下拖动：将光标向上或向下延长，可以覆盖多行实现同时编辑多行的效果
Alt + Shift + ↑ / ↓：可快速将光标当前所在行或当前选中项向上/向下复制一次（按一下复制一次）
生成微信小程序页面链接
生成微信小程序任意页面的链接（此链接可用于生成二维码、微信扫码即可跳转到小程序对应页面），这里仅记录实现步骤的博客链接，已经亲测有效：微信小程序页面生成链接
生成的链接可在草料二维码生成器中生成为二维码，但是如果链接需要拼接动态参数则可能需要先动态拼接上参数后再自行使用插件或其他方式去生成二维码
内容持续更新、优化中...
3491
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
