小封鸭

JavaScript常用API-更新中

2026-10-18T07:13:35.000Z

记录一些JavaScript中经常用到的一些API，方便后续可以快速查看，如字符串、数组的方法，对象的遍历，还有后续ES6的常用API

字符串方法#

方法	功能
`charAt()`	得到指定位置的字符
`substring()`	提取子串，从a开始到b
`substr()`	提取子串，从a开始，长度为b
`slice()`	提取子串，从a开始到b结束（不包括b处）
`toUpperCase()`	将字符串转换为大写
`toLowerCase()`	将字符串转换为小写
`indexOf()`	检索字符串，返回指定内容首次出现的位置

charAt()方法

charAt()方法可以得到指定位置的字符

1
'我喜欢JS，我也喜欢HTML'.charAt(0) // '我'
2
'我喜欢JS，我也喜欢HTML'.charAt(11) // 'T'
3
'我喜欢JS，我也喜欢HTML'.charAt(74) // ''

substring()、substr()和slice()

substring(a, b) 方法得到从a开始到b结束（不包括b处）的子串

1
'我喜欢JS，我也喜欢HTML'.substring(3, 5) // 'JS'
2
'我喜欢JS，我也喜欢HTML'.substring(10, 14) // 'HTML'

substring(a) 方法如果省略第二个参数，返回的子串会一直到字符串的结尾
```
1
'我喜欢JS，我也喜欢HTML'.substring(6) // '我也喜欢HTML'
```
substring(a, b) 中，a可以大于b，数字顺序将自动调整为小数在前
```
1
'我喜欢JS，我也喜欢HTML'.substring(5, 3) // 'JS'
```
substr (a, b)中，将得到从a开始的长度为b的子串
```
1
'我喜欢JS，我也喜欢HTML'.substr(3, 2) // 'JS'
```

substr(a, b)中，b可以省略，表示到字符串结尾

1
'我喜欢JS，我也喜欢HTML'.substr(3) // 'JS，我也喜欢HTML

substr (a, b)中，a可以是负数，表示倒数位置

1
'我喜欢JS，我也喜欢HTML'.substr(-4, 2) // HT'

slice(a, b)方法得到从a开始到b结束（不包括b处）的子串
```
1
'我喜欢JS，我也喜欢HTML'.slice(3, 5) // 'JS'
```

slice(a, b)的参数a可以是负数

1
'我喜欢JS，我也喜欢HTML'.slice(-4, -1) // 'HTM'

slice(a, b)中，参数a必须小于参数b

1
'我喜欢JS，我也喜欢HTML'.slice(5, 2) // ''

对比总结

substring(a, b)和slice(a, b)功能基本一致，都是得到从a开始到b 结束（不包括b）的子串，区别：

① substring()可以自动交换两个参数位置，而slice()不行；

②slice()的参数a可以是负数，而substring()不行。
substr(a, b)中参数b是子串长度，而不是位置编号

toUpperCase()和toLowerCase()

toUpperCase() 转为大写

toLowerCase() 转为小写

1
'i love you'.toUpperCase(); // 'I LOVE YOU'
2
'IMOOC'.toLowerCase(); // 'imooc'

indexOf()

indexOf()方法返回某个指定的字符串值在字符串中首次出现的位置

如果要检索的字符串值没有出现，则该返回 -1

1
'abcdeb'.indexOf('b') // 1
2
'abcdeb'.indexOf('de') // 3
3
'abcdeb'.indexOf('m') // -1

数组的常用方法#

数组提供大量内置方法，主要包括添加、删除、查找、遍历、排序和转换。这里只列举一些常用的，在ES6语法中会再增加一些（slice、splice、split这三个英文非常像，初学很可能弄混，这三个是完全不一样功能的，split是字符串的方法，数组可以通过join转字符串，字符串可以使用split转为数组）

添加与删除：这5个是最基础的，splice是功能最多的，push和pop是开发中最常用的

方法	作用	是否修改原数组
`push()`	末尾添加元素	是
`pop()`	删除末尾元素	是
`unshift()`	开头添加元素	是
`shift()`	删除开头元素	是
`splice()`	添加、删除或替换指定位置元素	是

push()方法：（末尾追加）

push()方法用来在数组末尾推入新项，参数就是要推入的项
如果要推入多项，可以用逗号隔开

调用push()方法后，数组会立即改变，不需要赋值

1
var arr = [1, 2, 3];
2

3
arr.push(4);
4
console.log(arr); // [1, 2, 3, 4]
5

6
arr.push(5, 6);
7
console.log(arr); // [1, 2, 3, 4, 5, 6]

pop()方法：（删除末尾）

与push()相反，pop()方法用来删除数组中的最后一项

pop()方法不仅会删除数组末项，而且会返回被删除的项

1
var arr = [1, 2, 3, 4];
2

3
var item = arr.pop();
4

5
console.log(arr);  // [1, 2, 3]
6
console.log(item);  // 4

unshift()方法：（头部插入）

unshift()方法用来在数组头尾插入新项，参数就是要插入的项
如果要插入多项，可以用逗号隔开

调用unshift()方法后，数组会立即改变，不需要赋值

1
var arr = [2, 3, 4];
2

3
arr.unshift(1);
4
console.log(arr); // [1, 2, 3, 4]
5

6
arr.unshift(-1, 0);
7
console.log(arr); // [-1, 0, 1, 2, 3, 4]

shift()方法：（删除头部）

与unshift()相反，shift()方法用来删除数组中下标为0 的项

shift()方法不仅会删除数组末项，而且会返回被删除的项

1
var arr = [10, 20, 30];
2

3
var item = arr.shift();
4

5
console.log(arr); // [20, 30]
6
console.log(item); // 10

splice()方法

splice()方法第一个参数是从哪个下标开始，第二个参数是删除多少个项

1
arr.splice(起始下标, 删除个数)

1
var arr = ['A','B','C','D','E','F','G'];
2
arr.splice(3,2,'X','Y','Z');
3
console.log(arr);
4
// 下标3开始，连续替换2项；这种说法错误的
5
// 准确是：下标3开始，连续删除2项，然后插入新元素
6
// [ 'A', 'B', 'C', 'X', 'Y', 'Z','F', 'G']

splice()方法可以用于在指定位置插入新项（第二个参数设置0，就没有删除项）

1
arr.splice(起始下标, 0, 新元素)

1
var arr = [1, 2, 5, 6];
2
arr.splice(2, 0, 3, 4);
3
console.log(arr); // [1, 2, 3, 4, 5, 6]

splice()方法可以用于删除指定项；result返回被删除的项

1
arr.splice(起始下标, 删除个数)

1
var arr = [10, 20, 30, 40];
2
var result = arr.splice(1, 1);
3
console.log(arr);    // [10, 30, 40]
4
console.log(result); // [20]

splice()方法会以数组形式返回被删除的项

查找与判断：

方法	作用	返回值
`indexOf()`	查找元素首次出现的位置	下标或 -1
`lastIndexOf()`	查找元素最后出现的位置	下标或 -1
`includes()`	判断是否包含元素	布尔值
`find()`	查找第一个符合条件的元素	元素或 undefined
`findIndex()`	查找第一个符合条件的元素下标	下标或 -1
`some()`	是否至少一个元素符合条件	布尔值
`every()`	是否所有元素符合条件	布尔值

indexOf()方法的功能是搜索数组中的元素，并返回它所在的位置，如果元素不存在，则返回-1

1
var arr = ['A', 'B', 'C', 'D'];
2

3
console.log(arr.indexOf('B')); // 1
4
console.log(arr.indexOf('Z')); // -1

includes()方法的功能是判断一个数组是否包含一个指定的值，返回布尔值

1
var arr = ['A', 'B', 'C'];
2
console.log(arr.includes('B')); // true
3
console.log(arr.includes('Z')); // false

截取、合并与转换

方法	作用	是否修改原数组
`slice()`	截取数组片段	否
`concat()`	合并数组	否
`join()`	将数组连接成字符串	否
`reverse()`	反转数组	是
`sort()`	对数组排序	是
`flat()`	展平嵌套数组	否

slice()方法：slice()方法用于得到子数组，slice(a, b)截取的子数组从下标为a的项开始，到下标为 b（但不包括下标为b的项）结束

标准写法

1
var arr = ['A','B','C','D','E','F'];
2

3
var result = arr.slice(1, 4);
4

5
console.log(result); // ['B','C','D'] 从下标 1 开始；（B）到下标 4 结束（不包含4）所以是：B、C、D
6
console.log(arr);    // ['A','B','C','D','E','F']

slice()如果不提供第二个参数，则表示从指定项开始，提取所有后续所有项作为子数组

1
var arr = ['A','B','C','D','E','F'];
2

3
var result = arr.slice(2);
4

5
console.log(result); // ['C','D','E','F']

slice(a, b)方法不会更改原有数组，返回的是截取的数组

1
var arr = [1, 2, 3, 4];
2

3
var result = arr.slice(1, 3);
4

5
console.log(result); // [2, 3]
6
console.log(arr);    // [1, 2, 3, 4]  ✔ 原数组不变

slice()方法的参数允许为负数，表示数组的倒数第几项

1
var arr = ['A','B','C','D','E','F'];
2

3
var result = arr.slice(-3);
4

5
console.log(result); // ['D','E','F']

concat()方法

concat()方法可以合并连结多个数组

concat()方法不会改变原数组

1
var arr1 = [1, 2, 3, 4];
2
var arr2 = [5, 6, 7, 8];
3
var arr3 = [9, 10, 11];
4
var arr = arr1.concat(arr2 , arr3);
5
console.log(arr);
6
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]

join()方法

数组的join()方法可以使数组转为字符串；字符串的split() 方法可以使字符串转为数组。
join()的参数表示以什么字符作为连接符，如果留空则默认以逗号分隔，如同调用toString()方法
```
1
var arr = ['A', 'B', 'C'];
2

3
var str = arr.join('-');
4

5
console.log(str); // "A-B-C"
```

split()的参数表示以什么字符拆分字符串，一般不能留空

1
var str = "A-B-C";
2
var arr = str.split('-');
3
console.log(arr); // ["A", "B", "C"]

reverse()方法

reverse()方法用来将一个数组中的全部项顺序置反

1
var arr = ["A","B","C","D"];
2
arr.reverse();
3
console.log(arr); // ["D","C","B","A"]

Vue.js初识

2026-10-25T07:58:27.000Z

sass基础语法

2026-10-25T06:57:41.000Z

Sass 是一种 CSS 预处理器，在 CSS 基础上提供了变量、嵌套、模块化、Mixin（混入）、运算和条件判断等功能，能够提高 CSS 的开发效率与可维护性。Sass 代码需要经过编译，最终转换为浏览器能够识别的普通 CSS。

Sass 环境搭建#

Sass 与 SCSS 的区别#

Sass 提供两种语法格式：推荐使用 SCSS，因为它与普通 CSS 的语法基本一致。

对比	SCSS	Sass
文件后缀	`.scss`	`.sass`
大括号 `{}`	需要	不需要
分号 `;`	需要	不需要
CSS 语法兼容性	兼容 CSS	使用缩进语法
推荐程度	推荐	较少使用

安装 Sass#

首先需要安装 Node.js，然后通过 npm 安装 Sass。

1
npm install -d sass

编译 SCSS 文件#

创建两个文件：

1
project/
2
├── index.html
3
├── style.scss
4
└── style.css

编写 style.scss：

1
$primary-color: #409eff;
2

3
.box {
4
  width: 200px;
5
  height: 200px;
6
  background-color: $primary-color;
7
}

执行编译：

1
npx sass style.scss style.css

生成的 style.css：

1
.box {
2
  width: 200px;
3
  height: 200px;
4
  background-color: #409eff;
5
}

在 HTML 中引入：

1
<link rel="stylesheet" href="./style.css" />

浏览器只能直接使用编译后的 CSS。

自动监听文件变化#

1
npx sass --watch style.scss:style.css

修改 SCSS 文件后，Sass 会自动重新编译 CSS。

如果需要监听整个目录：

1
npx sass --watch scss:css

将 scss 目录中的样式编译到 css 目录。

基本语法#

注释#

1
// 单行注释，不会输出到 CSS
2

3
/* 多行注释，通常会输出到非压缩 CSS */

基本嵌套#

普通 CSS：

1
.nav {
2
  background: #333;
3
}
4
.nav a {
5
  color: white;
6
}
7
.nav a:hover {
8
  color: red;
9
}

SCSS：

1
.nav {
2
  background: #333;
3
  a {
4
    color: white;
5
    &:hover {
6
      color: red;
7
    }
8
  }
9
}

其中 & 表示当前嵌套规则的父选择器。

父选择器 `&`#

1
.button {
2
  color: #333;
3

4
  &:hover {
5
    color: red;
6
  }
7

8
  &.active {
9
    color: blue;
10
  }
11

12
  &--primary {
13
    background: #409eff;
14
  }
15

16
  .icon {
17
    width: 20px;
18
  }
19
}

展开收起

编译后的选择器：

SCSS	CSS
`&:hover`	`.button:hover`
`&.active`	`.button.active`
`&--primary`	`.button--primary`
`.icon`	`.button .icon`

属性嵌套#

SCSS 还支持对具有相同前缀的 CSS 属性进行嵌套。实际开发中，普通属性写法通常更直观，按需使用即可。

1
.box {
2
  font: {
3
    size: 16px;
4
    weight: bold;
5
    family: Arial;
6
  }
7

8
  margin: {
9
    top: 10px;
10
    bottom: 20px;
11
  }
12
}

编译后：

1
.box {
2
  font-size: 16px;
3
  font-weight: bold;
4
  font-family: Arial;
5
  margin-top: 10px;
6
  margin-bottom: 20px;
7
}

变量入门#

定义与使用变量#

Sass 使用 $ 定义变量。

1
$primary-color: #409eff;
2
$font-size: 16px;
3
$border-radius: 8px;
4

5
.button {
6
  background: $primary-color;
7
  font-size: $font-size;
8
  border-radius: $border-radius;
9
}

编译后：

1
.button {
2
  background: #409eff;
3
  font-size: 16px;
4
  border-radius: 8px;
5
}

变量适合统一管理项目中的颜色、字体大小、间距和圆角等属性。

变量作用域#

局部变量通常只在当前作用域内有效。

1
$color: red; // 全局变量
2
.box {
3
  $color: blue; // 局部变量
4

5
  color: $color;
6
}
7
.title {
8
  color: $color;
9
}

编译后：

1
.box {
2
  color: blue;
3
}
4
.title {
5
  color: red;
6
}

变量运算#

1
$width: 200px;
2
$gap: 20px;
3

4
.box {
5
  width: $width + $gap;
6
  padding: $gap * 2;
7
  margin: $gap - 5px;
8
}

编译后：

1
.box {
2
  width: 220px;
3
  padding: 40px;
4
  margin: 15px;
5
}

Sass 变量与 CSS 变量#

对比	Sass 变量	CSS 变量
声明	`$color: red;`	`--color: red;`
使用	`$color`	`var(--color)`
生效阶段	编译时	浏览器运行时
JS 动态修改	不支持直接修改	支持
主要用途	样式复用、编译配置	动态主题、实时样式变化

嵌套，代码拆分及引入#

当项目样式较多时，可以将 SCSS 拆分为多个文件，按照功能管理。

文件拆分#

1
project/
2
├── index.html
3
├── scss/
4
│   ├── _variables.scss
5
│   ├── _mixins.scss
6
│   ├── _reset.scss
7
│   ├── _index.scss
8
│   └── main.scss
9
└── css/
10
    └── main.css

以 _ 开头的 SCSS 文件称为 Partial（局部文件），一般作为模块供其他文件加载，不单独编译成 CSS。

@use 加载模块#

1
_variables.scss
2
$primary-color: #409eff;
3
$font-size: 16px;
4
main.scss
5
@use "variables";
6

7
.box {
8
  color: variables.$primary-color;
9
  font-size: variables.$font-size;
10
}

可以使用 as 定义别名：

1
@use "variables" as v;
2

3
.box {
4
  color: v.$primary-color;
5
}

也可以使用 as *，省略命名空间：

1
@use "variables" as *;
2

3
.box {
4
  color: $primary-color;
5
}

实际开发中推荐保留命名空间，避免不同模块之间出现命名冲突。

@forward 转发模块#

假设存在两个模块：

1
_variables.scss
2
$primary-color: #409eff;
3
_mixins.scss
4
@mixin flex-center {
5
  display: flex;
6
  justify-content: center;
7
  align-items: center;
8
}

可以通过 _index.scss 统一转发：

1
@forward "variables";
2
@forward "mixins";

然后在 main.scss 中使用：

1
@use "index" as s;
2

3
.box {
4
  color: s.$primary-color;
5
  @include s.flex-center;
6
}

@use、@forward 和 @import 的区别#

指令	功能	推荐情况
`@use`	加载模块并使用其成员	推荐
`@forward`	转发模块的公共成员	推荐
`@import`	旧式模块导入方式	已废弃

新项目应当使用 @use 和 @forward 管理 SCSS 模块。

Mixin混入的使用#

Mixin 用于定义可以重复使用的样式代码块，类似于函数，可以传递参数。

定义和调用 Mixin#

使用 @mixin 定义，使用 @include 调用。

1
@mixin flex-center {
2
  display: flex;
3
  justify-content: center;
4
  align-items: center;
5
}
6

7
.box {
8
  @include flex-center;
9
}
10

11
.container {
12
  @include flex-center;
13
}

编译后：

1
.box {
2
  display: flex;
3
  justify-content: center;
4
  align-items: center;
5
}
6

7
.container {
8
  display: flex;
9
  justify-content: center;
10
  align-items: center;
11
}

带参数的 Mixin#

1
@mixin flex-center($gap) {
2
  display: flex;
3
  justify-content: center;
4
  align-items: center;
5
  gap: $gap;
6
}
7

8
.box {
9
  @include flex-center(10px);
10
}
11

12
.container {
13
  @include flex-center(20px);
14
}

默认参数#

1
@mixin box-style(
2
  $color: #409eff,
3
  $radius: 8px
4
) {
5
  background: $color;
6
  border-radius: $radius;
7
}
8

9
.box1 {
10
  @include box-style;
11
}
12

13
.box2 {
14
  @include box-style(red, 12px);
15
}

展开收起

也可以通过参数名指定传参：

1
.box3 {
2
  @include box-style($radius: 20px);
3
}

@content 插入样式代码块#

@content 是 Mixin 中的重要语法，表示接收并插入调用时传入的样式代码块。

1
@mixin hover {
2
  &:hover {
3
    @content;
4
  }
5
}
6

7
.button {
8
  color: #333;
9
  @include hover {
10
    color: red;
11
    background: #eee;
12
  }
13
}

编译后：

1
.button {
2
  color: #333;
3
}
4

5
.button:hover {
6
  color: red;
7
  background: #eee;
8
}

@content 常用于封装媒体查询、伪类等需要传入不同样式的场景。

媒体查询与Mixin 的配合使用#

使用 Mixin 可以将媒体查询中的断点统一封装，避免在多个地方重复编写断点。

普通媒体查询#

1
.container {
2
  width: 100%;
3
  padding: 10px;
4

5
  @media (min-width: 768px) {
6
    padding: 20px;
7
  }
8

9
  @media (min-width: 1200px) {
10
    padding: 30px;
11
  }
12
}

这种写法可以直接使用，但当项目中的媒体查询较多时，可以使用 Mixin 统一管理。

封装媒体查询 Mixin#

_mixins.scss

1
@mixin respond($device) {
2
  @if $device == tablet {
3
    @media (min-width: 768px) {
4
      @content;
5
    }
6
  } @else if $device == desktop {
7
    @media (min-width: 1200px) {
8
      @content;
9
    }
10
  }
11
}

核心语法：

语法	功能
`@mixin`	定义混入
`@include`	调用混入
`@if`	条件判断
`@else if`	多条件判断
`@content`	插入调用时传入的样式

使用媒体查询 Mixin#

main.scss

1
@use "mixins" as m;
2

3
.container {
4
  width: 100%;
5
  padding: 10px;
6

7
  @include m.respond(tablet) {
8
    padding: 20px;
9
  }
10

11
  @include m.respond(desktop) {
12
    padding: 30px;
13
  }
14
}

编译后：

1
.container {
2
  width: 100%;
3
  padding: 10px;
4
}
5

6
@media (min-width: 768px) {
7
  .container {
8
    padding: 20px;
9
  }
10
}
11

12
@media (min-width: 1200px) {
13
  .container {
14
    padding: 30px;
15
  }
16
}

展开收起

实际案例：响应式网格布局#

HTML：

1
<div class="card-list">
2
  <div class="card">卡片1div>
3
  <div class="card">卡片2div>
4
  <div class="card">卡片3div>
5
  <div class="card">卡片4div>
6
div>

SCSS：

1
@use "mixins" as m;
2

3
.card-list {
4
  display: grid;
5
  grid-template-columns: 1fr;
6
  gap: 16px;
7

8
  // 平板：两列
9
  @include m.respond(tablet) {
10
    grid-template-columns: repeat(2, 1fr);
11
  }
12

13
  // 桌面：四列
14
  @include m.respond(desktop) {
15
    grid-template-columns: repeat(4, 1fr);
16
  }
17
}
18

19
.card {
20
  padding: 20px;
21
  color: white;
22
  background: #409eff;
23
  border-radius: 8px;
24
  text-align: center;
25
}

展开收起

微信小程序常用Api

2026-10-23T13:12:56.000Z

本文学习微信小程序的常用API，内容整体分为配置、逻辑、样式、结构4个部分，也可以分为全局和页面级别

目录结构#

小程序项目可以分为两个级别：全局和页面级别，全局可以配置小程序整体信息，页面级别主要由配置、逻辑、样式、结构4个部分组成，详细：官方文档

全局配置文件#

使用全局配置制作菜单栏

app.json

1
  "tabBar": {
2
    "list": [{
3
      "pagePath": "pages/index/index",
4
      "text": "首页"
5
    }, {
6
      "pagePath": "pages/logs/logs",
7
      "text": "日志"
8
    }]
9
  },

详细的全局配置文件：官方文档，总体的配置也很简单，文档可以这样看，配置项就是整体可以配置的内容，可以配置什么功能，常用的有entryPagePath、pages、window、tabBar和networkTimeout，下面的就是对配置项的详细描述

页面级别配置文件#

每一个小程序页面也可以使用同名 .json 文件来对本页面的窗口表现进行配置，页面中配置项会覆盖 app.json 的 window 中相同的配置项。

1
{
2
  "navigationBarBackgroundColor": "#ffffff",
3
  "navigationBarTextStyle": "black",
4
  "navigationBarTitleText": "微信接口功能演示",
5
  "backgroundColor": "#eeeeee",
6
  "backgroundTextStyle": "light"
7
}

完整配置项说明请参考小程序页面配置。

全局逻辑中的生命周期函数#

关于全局逻辑中的生命周期函数可以参考文档，除了生命周期函数的说明外，文档也列举了一些推荐和不推荐写法，如现在并不推荐使用 App() 中的参数，而是使用对应的 wx 调用来代替。文档地址

onLaunch：小程序启动的时候自动执行，带一个参数；小程序初始化完成时触发，全局只触发一次。这里需要注意，如果短时间内多次打开是执行一次，如果长时间再打开，这时候onLaunch就会重新执行一次

app.js

1
App({
2
  onLaunch(options){
3
    console.log('onLaunch',options);
4
  }
5
})

参数值可以参考：官方文档，也可以使用 wx.getLaunchOptionsSync 获取

onShow：小程序启动，或从后台进入前台显示时触发。一样也会带一个参数，onShow只要是退出重新进入小程序都会执行的一个函数，无论时间间隔的长短，这是与onLaunch区别，注意：onShow是onLaunch后的一个函数，也就是onLaunch是先执行，后才执行onShow

1
 onShow(options){
2
    console.log('onShow',options);
3
  },

参数值可以参考：官方文档，也可以使用 wx.onAppShow 获取

onHide：小程序从前台进入后台时触发。一样也有一个参数，这个参数可以了解用户退出后的去向，可以和onShow配对理解。一个显示一个退出

1
 onHide(options){
2
  console.log('onHide',options);
3
 }

onError：小程序发生脚本错误或 API 调用报错时触发。

1
// 不推荐的写法
2
App({
3
  onLaunch(options) {
4
    // 在启动时执行
5
  },
6
  onError(msg) {
7
    // 发生脚本错误时执行
8
    console.log(msg)
9
  },
10
})
11
// 推荐的写法
12
App()
13

14
wx.onError(function () {
15
  // 发生脚本错误时执行
16
  console.log(msg)
17
})
18

19
// 在启动时执行
20
var options = wx.getLaunchOptionsSync()

展开收起

推荐写法中，原来放在 onLaunch() 里的初始化代码，可以直接放在 app.js 顶层执行，也可以封装成初始化函数后主动调用。

app.js展开收起

1
App();
2

3
// 监听全局错误
4
wx.onError((msg) => {
5
  console.log('全局错误：', msg);
6
});
7
// 获取启动参数
8
const options = wx.getLaunchOptionsSync();
9
// 初始化用户信息
10
function initUser() {
11
  console.log('初始化用户信息');
12
}
13
// 封装启动逻辑
14
function initApp() {
15
  console.log('小程序启动了');
16
  const token = wx.getStorageSync('token');
17
  initUser();
18
  console.log('启动参数', options);
19
}
20

21
// 主动执行初始化
22
initApp();

展开收起

全局方法及数据的定义及调用方式#

全局的方法，怎么在页面级别的js中调用呢，小程序提供了一个getApp的接口，需要注意的是，这里的sayHello需要写在App内，也就是不能用推荐写法，当然现在这种写法也不推荐了，可以通过模块化来实现同样功能，文档地址

app.js

1
App({
2
   sayHello(){
3
    console.log('hello word');
4
  }
5
});

pages\index\index.js

1
const app = getApp()
2
Page({
3
onLoad(){
4
  app.sayHello()
5
}
6
})

页面级别的生命周期函数#

在页面运行的某个时刻执行的函数，其实页面级别的生命周期函数和全局的差不多，只不过语义上有差别，页面级别有6个生命周期函数，具体可以参考文档：官方文档

onLoad：页面加载时触发。一个页面只会调用一次，可以在 onLoad 的参数中获取打开当前页面路径中的参数。

onShow：页面显示/切入前台时触发。

onReady：页面初次渲染完成时触发。一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互

onHide：页面隐藏/切入后台时触发。如 wx.navigateTo 或底部 tab 切换到其他页面，小程序切入后台等。

onUnload：页面卸载时触发。如wx.redirectTo或wx.navigateBack到其他页面时

onRouteDone：路由动画完成时触发。如 wx.navigateTo 页面完全推入后或 wx.navigateBack 页面完全恢复时。

除了上面6个外，还有很多其他在特定操作下自动触发的函数，如下拉刷新、用户点击右上角转发，用户点击右上角转发到朋友圈等等

页面逻辑层数据的定义及与页面的串联#

事件的文档：官方文档

数据绑定：

1
Page({
2
  data:{
3
    num:'1'
4
  },
5
})

1
<view>{{num}}view>

点击事件：

1
changename(){
2
    console.log('changename');
3
  }

1
<view class="container" bind:tap="changename">{{num}}view>

点击改变数据

1
Page({
2
  data:{
3
    num:'1'
4
  },
5
  changename(){
6
    console.log('changename');
7
   this.setData({
8
    num:'2'
9
   })
10
  }
11
})

1
<view class="container" bind:tap="changename">{{num}}view>

逻辑层中的 API#

官方API文档：文档 api调用一般都是通过wx.调用的

1
wx.showModal({
2
    title: '提示',
3
    content: '这是一个模态弹窗',
4
})
5
wx.request({
6
    url:'https://www.fastmock.site/mock/fdf9557ad5613aec6428d08d90f25b45/weixin/api/getDate',
7
    success(res){
8
        console.log(res);
9
    }
10
})

视图层的数据绑定#

视图层包括WXML和WXSS，可以理解为HTML5和CSS3，只不过一些属性可能不支持；

在小程序没有DOM的概念，有组件的概念，view是最小的组件，可以理解为div

实现判断，点击显示隐藏功能：

1
<view class="flex">
2
 <button  bind:tap="changename">{{msg}}button>
3
  <view wx:if="{{!show}}">helloview>
4
  <view hidden="{{show}}">hiddenview>
5
  <checkbox checked="{{true}}">选择框checkbox>
6
view>

1
Page({
2
  data:{
3
    msg:'点击显示',
4
    show:true
5
  },
6
  changename(){
7
    if(!this.data.show){
8
      this.setData({
9
        msg:'点击显示',
10
        show:true
11
         })
12
         return
13
    }
14
 this.setData({
15
  msg:'点击隐藏',
16
  show:false
17
   })
18
  }
19
})

展开收起

1
.flex{
2
  display: flex;
3
  flex-direction: column;
4
  justify-content: center;
5
  align-items: center;
6
}

wx，但是hidden是隐藏的意思，true就是隐藏，这个和vue的逻辑是相反的

视图层循环展示内容#

循环语句

1
<view class="flex">
2
 <view wx:for="{{list}}">
3
 {{item.title}}
4
 {{item.dec}}
5
 view>
6

7
view>

1
Page({
2
  data:{
3

4
    list:[
5
      {
6
        title:'我是标题1',
7
        dec:'描述1'
8
      },
9
      {
10
        title:'我是标题2',
11
        dec:'描述2'
12
      }, {
13
        title:'我是标题3',
14
        dec:'描述3'
15
      }
16
    ]
17
  },
18
})

展开收起

视图层代码的拆分#

这里是页面嵌入：include 不推荐

1
<view class="flex">
2
 <view>headerview>
3
<include src="./content.wxml" />
4
<view>footerview>
5
view>

1
<view>content1view>
2
<view>{{content}}view>

include其实就把页面嵌入到另外页面中，这里{{content}}也是可以正常使用index.js定义的数据的

引入其他文件中的子模板：

格式	特点	适用场景
JPEG / JPG	有损压缩，兼容性好	照片、复杂图片
PNG	支持透明，无损压缩	需要无损质量的图片
WebP	支持有损、无损压缩及透明	网页图片，推荐
AVIF	通常具有较高压缩效率	对体积要求较高的图片
SVG	矢量图，放大不失真	图标、Logo、简单图形

属性	可能触发的渲染工作	推荐程度
width、height	布局、绘制、合成	尽量避免频繁动画
top、left	布局、绘制、合成	尽量避免频繁动画
background-color	绘制、合成	可以使用
transform	通常只需合成	推荐
opacity	通常只需合成	推荐

对比	防抖	节流
核心思想	停止触发后再执行	按固定时间间隔限制执行
连续触发	不断重新计时	期间仍可定期执行
适用场景	搜索输入	滚动监听

属性值	作用
`eager`	立即加载，默认值
`lazy`	延迟加载，接近可视区域时加载

对比	图片懒加载	图片预加载
核心思想	延迟加载	提前加载
主要目的	减少初始请求	减少展示等待
适用场景	非首屏图片	关键图片、即将使用的图片
常用技术	`loading="lazy"`	`rel="preload"`、`Image`
注意事项	首屏关键图片不宜懒加载	避免预加载大量非关键图片

优化方向	核心优化技术
图片优化	压缩、WebP / AVIF、响应式图片、CDN
动画优化	transform、opacity、requestAnimationFrame
CSS 优化	压缩、按需加载、减少不必要的布局计算
DOM 优化	减少节点、批量操作、虚拟列表
事件代理	事件冒泡、父元素统一监听
事件稀释	防抖、节流
图片懒加载	loading=“lazy”、IntersectionObserver
图片预加载	preload、fetchpriority、Image

优化方式	说明
Gzip / Brotli 压缩	压缩 HTML、CSS、JS 等文本资源
代码压缩	删除注释、空格等不必要内容
Tree Shaking	移除未使用的代码
图片压缩	减少图片文件大小
图片格式优化	优先考虑 WebP、AVIF 等现代格式
字体优化	使用 WOFF2、字体子集化等方式
按需打包	避免将所有依赖打包进首页

缓存类型	说明
强缓存	资源未过期时，直接使用本地缓存，不需要请求服务器确认
协商缓存	向服务器验证资源是否发生变化，未变化时返回 304
应用层缓存	使用内存、Cache API 等保存和复用数据

对比	普通脚本	async	defer
并行下载	❌	✅	✅
执行时可能阻塞 HTML 解析	✅	✅	❌
保证多个脚本按文档顺序执行	✅	❌	✅
适用场景	必须立即执行	独立脚本	有依赖关系的脚本

优化方式	适用场景
防抖（debounce）	搜索框输入、窗口大小变化后的计算
节流（throttle）	滚动监听、连续拖拽计算
requestAnimationFrame	跟随浏览器刷新节奏更新动画
passive 事件监听	不需要阻止默认滚动行为的触摸、滚轮监听

常见问题	原因	推荐解决方案
1px 边框偏粗	DPR 导致物理像素厚度不同	普通边框用 `1px`，极细线用伪元素缩放
click 300ms 延迟	历史上的双击缩放判断	viewport、`touch-action: manipulation`
Touch 点击穿透	触摸后产生兼容性 click 事件	普通交互统一使用 `click`
图片超出屏幕	图片宽度大于容器	`max-width: 100%`
图片拉伸变形	容器与图片比例不同	`object-fit`
高清图片模糊	图片资源分辨率不足	`srcset`
图片加载缓慢	图片体积大、加载过多	合理尺寸、现代格式、懒加载
图片底部空白	行内元素基线对齐	`display: block`

事件	触发时机
`touchstart`	手指接触屏幕
`touchmove`	手指在屏幕上移动
`touchend`	手指离开屏幕
`touchcancel`	触摸操作被浏览器或系统中断

属性 / 方法	作用
`event.touches`	当前仍接触屏幕的所有触摸点
`event.targetTouches`	当前仍接触屏幕，且最初在事件目标元素上开始触摸的触摸点
`event.changedTouches`	本次事件中发生变化的触摸点
`event.target`	最初触发事件的元素
`event.currentTarget`	当前绑定事件处理程序的元素
`event.type`	事件类型，如 `touchstart`
`event.cancelable`	当前事件是否可以取消默认行为
`event.preventDefault()`	阻止浏览器的默认行为

属性	作用
`identifier`	触摸点的唯一标识，用于区分不同触摸点
`target`	该触摸点最初开始触摸的元素
`clientX` / `clientY`	触摸点相对于浏览器视口的坐标
`pageX` / `pageY`	触摸点相对于整个文档的坐标
`screenX` / `screenY`	触摸点相对于屏幕的坐标
`radiusX` / `radiusY`	触摸接触区域的椭圆半径
`rotationAngle`	触摸接触区域的旋转角度
`force`	触摸压力值，通常在 0 到 1 之间

变量	计算方式
水平移动距离	`moveX = 当前手指X - 初始手指X`
垂直移动距离	`moveY = 当前手指Y - 初始手指Y`
元素新位置	`初始位置 + 移动距离`

DPR	理想图片资源宽度
1	200px
2	400px
3	600px

`pointerdown`	指针按下时	开始拖拽、按压
`pointermove`	指针移动时	拖拽、绘图
`pointerup`	指针释放时	结束拖拽
`pointercancel`	指针操作被浏览器取消时	清理拖拽状态
`pointerover`	指针进入元素区域	悬停效果
`pointerout`	指针离开元素区域	取消悬停
`pointerenter`	指针进入元素或其子元素区域	鼠标进入
`pointerleave`	指针离开元素及其子元素区域	鼠标离开
`gotpointercapture`	元素获得指针捕获时	监听捕获状态
`lostpointercapture`	元素失去指针捕获时	监听捕获释放
`pointerrawupdate`	指针状态发生变化时，提供更直接的更新	高精度绘图等

属性值	作用
`auto`	浏览器默认处理触摸操作
`none`	禁止浏览器处理该区域的触摸平移和缩放手势
`pan-x`	允许浏览器处理水平滚动
`pan-y`	允许浏览器处理垂直滚动
`manipulation`	允许滚动和双指缩放等操作，不允许双击缩放

API	作用
`setPointerCapture()`	捕获指定指针
`releasePointerCapture()`	释放指定指针
`hasPointerCapture()`	判断是否捕获指定指针

注意事项	推荐做法
浏览器默认触摸行为干扰	使用 `touch-action`
指针未按下也能触发移动事件	判断拖拽状态
指针离开元素导致事件丢失	使用 `setPointerCapture()`
指针操作可能被取消	同时处理 `pointercancel`
多指触摸相互干扰	使用 `pointerId` 区分
Pointer 与 Mouse 事件可能重复	避免重复绑定相同业务逻辑
`pointerenter/leave` 不冒泡	事件委托使用 `pointerover/out`

属性	说明
`pointerId`	当前指针的唯一标识，用于区分多个活动指针
`pointerType`	指针设备类型：`mouse`、`touch`、`pen`
`isPrimary`	是否为当前指针类型的主指针
`clientX` / `clientY`	指针相对于浏览器视口的坐标
`pageX` / `pageY`	指针相对于文档的坐标
`screenX` / `screenY`	指针相对于屏幕的坐标
`offsetX` / `offsetY`	指针相对于事件目标元素内边距边缘的坐标
`button`	本次事件中发生状态变化的按键
`buttons`	当前按下的按键组合
`pressure`	指针压力，范围为 `0～1`
`width` / `height`	指针接触区域的宽度和高度
`target`	事件的目标元素
`currentTarget`	当前正在执行事件监听器的元素
`type`	当前事件名称，如 `pointerdown`
`preventDefault()`	阻止可取消事件的默认行为

属性	常见取值	说明
`button`	`0`	主按键（通常是鼠标左键）
`button`	`1`	鼠标中键
`button`	`2`	次按键（通常是鼠标右键）
`button`	`-1`	本次事件没有按键状态变化
`buttons`	`0`	没有按键按下
`buttons`	`1`	主按键处于按下状态
`buttons`	`2`	次按键处于按下状态
`buttons`	`4`	中键处于按下状态

属性	说明
`tiltX`	触控笔 X 方向倾斜角度
`tiltY`	触控笔 Y 方向倾斜角度
`twist`	触控笔的旋转角度
`tangentialPressure`	触控笔的切向压力
`altitudeAngle`	触控笔相对于屏幕平面的角度
`azimuthAngle`	触控笔在屏幕平面上的方向角度

使用场景	重点属性
判断鼠标、触摸屏、触控笔	`pointerType`
单指拖拽、多点触控	`pointerId`、`isPrimary`
获取指针位置、计算拖拽距离	`clientX`、`clientY`
判断鼠标按键	`button`、`buttons`
判断事件目标	`target`、`currentTarget`
绘图、手写板	`pressure`、`tiltX`、`tiltY`

`await` 后面的值	`await` 表达式的结果
`Promise.resolve(100)`	`100`
`Promise.reject('失败')`	抛出 `'失败'`
`100`	`100`
`'hello'`	`'hello'`
`{ age: 18 }`	`{ age: 18 }`
`fetch('/api/data')`	请求成功后得到 `Response` 对象

注意事项	核心要点
使用位置	`async` 函数中，或 ES 模块顶层
执行机制	暂停当前异步函数的后续执行，不阻塞主线程
等待对象	可以是 Promise，也可以是普通值
错误处理	Promise 被拒绝时，`await` 会抛出错误
多个任务	有依赖就顺序等待，互相独立可考虑 `Promise.all()`
循环处理	`forEach()` 不会等待异步回调完成

	encodeURIComponent	URLSearchParams
类型	函数	类
作用	编码一个字符串	管理整个查询参数
自动拼 `key=value`	❌	✅
自动拼 `&`	❌	✅
自动编码	✅	✅
获取参数	❌	✅
删除参数	❌	✅
修改参数	❌	✅

小封鸭

JavaScript常用API-更新中

字符串方法#

数组的常用方法#

Vue.js初识

sass基础语法

Sass 环境搭建#

Sass 与 SCSS 的区别#

安装 Sass#

编译 SCSS 文件#

自动监听文件变化#

基本语法#

注释#

基本嵌套#

父选择器 &#

属性嵌套#

变量入门#

定义与使用变量#

变量作用域#

变量运算#

Sass 变量与 CSS 变量#

嵌套，代码拆分及引入#

文件拆分#

@use 加载模块#

@forward 转发模块#

@use、@forward 和 @import 的区别#

Mixin混入的使用#

定义和调用 Mixin#

带参数的 Mixin#

默认参数#

@content 插入样式代码块#

媒体查询与Mixin 的配合使用#

普通媒体查询#

封装媒体查询 Mixin#

使用媒体查询 Mixin#

实际案例：响应式网格布局#

微信小程序常用Api

目录结构#

全局配置文件#

页面级别配置文件#

全局逻辑中的生命周期函数#

全局方法及数据的定义及调用方式#

页面级别的生命周期函数#

页面逻辑层数据的定义及与页面的串联#

逻辑层中的 API#

视图层的数据绑定#

视图层循环展示内容#

视图层代码的拆分#

组件&样式#

HTML、CSS和JS中的性能优化

图片优化#

1. 选择合适的图片格式#

2. 压缩图片体积#

3. 其他图片优化手段#

动画优化#

1. 优先使用 transform 和 opacity#

2. 使用 requestAnimationFrame#

3. 其他动画优化#

CSS 优化#

1. 精简 CSS 文件#

2. 合理使用 CSS 选择器#

3. 避免频繁触发布局计算#

4. 其他 CSS 优化#

DOM 优化#

1. 减少 DOM 节点数量#

2. 批量操作 DOM#

3. 减少重复查询 DOM#

4. 其他 DOM 优化#

事件代理#

1. 为什么使用事件代理？#

2. 事件代理的优点#

事件稀释#

1. 防抖 Debounce#

2. 节流 Throttle#

3. 防抖和节流的区别#

图片懒加载#

1. 原生懒加载（推荐）#

2. JavaScript 实现懒加载#

图片预加载#

1. HTML 预加载（推荐用于关键图片）#

父选择器 `&`#