> For the complete documentation index, see [llms.txt](https://dizzzzy.gitbook.io/notebook/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://dizzzzy.gitbook.io/notebook/vulnerability-detection/wechat-mini-program.md).

# Wechat Mini Program

微信小程序开发

## 前端

 小程序开发工具：微信开发者工具

### **项目目录**

* 项目主配置文件
  * app.js：小程序入库口文件，小程序启动时会执行此js，必须有
  * app.json：小程序全局配置，必须有
  * app.wxss：小程序全局样式，所有样式全局生效
* 页面文件
  * pages文件夹下有page（如index，login，register）的子文件夹，每个文件夹下有4个文件
    * xx.js：页面逻辑，js代码，必须有
    * xx.wxml：页面结构布局（类似html但标签不同），必须有
    * xx.json：页面配置
    * xx.wxss：当前页面的样式，全局页面样式也有以当前xx.wxss样式为准

### **Webview和skyline渲染**

```json
{
  // 设置为 webview 或 skyline
  "renderer": "skyline"
}

{
  // 页面路径列表（第一个页面为启动页）
  "pages": ["pages/index/index"],

  // 窗口表现配置
  "window": {
    // 导航栏标题文字颜色：black / white
    "navigationBarTextStyle": "black",
    // 导航栏样式：default（默认）或 custom（自定义）
    "navigationStyle": "custom"
  },

  // 启用新版全局样式系统
  "style": "v2",

  // 设置当前使用的渲染器类型：webview 或 skyline
  "renderer": "skyline",

  // Skyline 渲染器的可选配置项
  "rendererOptions": {
    "skyline": {
      // 是否将 inline 元素默认显示为 block
      "defaultDisplayBlock": true,

      // 是否启用 content-box 盒模型
      "defaultContentBox": true,

      // 标签名与样式隔离模式：legacy（兼容）或 strict（严格）
      "tagNameStyleIsolation": "legacy",

      // 是否禁用 AB 测试（建议上线时开启）
      "disableABTest": true,

      // Skyline SDK 生效起始版本号
      "sdkVersionBegin": "3.0.0",

      // Skyline SDK 生效结束版本号
      "sdkVersionEnd": "15.255.255"
    }
  },

  // 组件框架类型：glass-easel 表示新版组件系统
  "componentFramework": "glass-easel",

  // sitemap 配置文件路径（用于 SEO 收录）
  "sitemapLocation": "sitemap.json",

  // 按需加载策略：requiredComponents 表示只加载必要组件
  "lazyCodeLoading": "requiredComponents"
}

```

1. webview 模式（旧版） 
   * 使用 WebView 内核进行页面渲染。
   *  基于 HTML/CSS/JS 的传统 Web 技术栈。
   *  兼容性好，适合已有 H5 项目迁移。
   *  性能相对较低，交互体验一般。
2. skyline 模式（新版） 
   * 微信自研高性能渲染引擎。
   * 最低基础库版本建议不低于 `3.0.0`
   *  支持现代 Web 标准（如 Flex 布局、CSS Grid 等）。
   *  更好的首屏加载速度和交互流畅度。
   *  支持更丰富的样式和布局能力

### Flex布局

{% embed url="<https://blog.csdn.net/qq_57404736/article/details/127142642>" %}

#### 1. Flex 布局简介

* **Flex（Flexible Box 弹性布局）** 是一种一维布局方式，常用于横向或纵向的元素排列。
* 在小程序中，只要在样式里设置 `display: flex` 就能启用。

***

#### 2. 基本属性

容器属性（父元素）

1. **display**

   ```css
   .container {
     display: flex; /* 开启弹性布局 */
   }
   ```
2. **flex-direction（主轴方向）**

   * `row`（默认）: 水平从左到右
   * `row-reverse`: 水平从右到左
   * `column`: 垂直从上到下
   * `column-reverse`: 垂直从下到上

   ```css
   .container {
     flex-direction: row;
   }
   ```
3. **justify-content（主轴对齐方式）**

   * `flex-start`（默认）: 靠主轴起点
   * `flex-end`: 靠主轴终点
   * `center`: 居中
   * `space-between`: 两端对齐，项目间距相等
   * `space-around`: 每个项目左右间隔相等
   * `space-evenly`: 所有间隔平均分布

   ```css
   .container {
     justify-content: space-between;
   }
   ```
4. **align-items（交叉轴对齐方式）**

   * `stretch`（默认）: 拉伸填满容器
   * `flex-start`: 靠交叉轴起点
   * `flex-end`: 靠交叉轴终点
   * `center`: 居中
   * `baseline`: 文字基线对齐

   ```css
   .container {
     align-items: center;
   }
   ```
5. **flex-wrap（换行方式）**

   * `nowrap`（默认）: 不换行
   * `wrap`: 超出换行
   * `wrap-reverse`: 反向换行

   ```css
   .container {
     flex-wrap: wrap;
   }
   ```
6. **align-content（多行内容对齐）**
   * 只在多行时生效
   * 值：`flex-start`、`flex-end`、`center`、`space-between`、`space-around`、`stretch`

项目属性（子元素）

1. **flex-grow（放大比例）**

   * 默认 `0`
   * 数值越大，占用剩余空间越多

   ```css
   .item {
     flex-grow: 1;
   }
   ```
2. **flex-shrink（缩小比例）**

   * 默认 `1`
   * 数值越大，空间不足时收缩得更多

   ```css
   .item {
     flex-shrink: 0; /* 不缩小 */
   }
   ```
3. **flex-basis（基础大小）**
   * 默认 `auto`
   * 类似于设置 `width/height`，在分配空间前的初始尺寸
4. **flex（简写）**
   * 语法：`flex: grow shrink basis;`
   * 常见写法：
     * `flex: 1;` 等价于 `flex: 1 1 0%`
     * `flex: auto;` 等价于 `flex: 1 1 auto`
5. **align-self（单独对齐方式）**
   * 可覆盖父容器的 `align-items` 设置
   * 值：`auto`（默认）、`flex-start`、`flex-end`、`center`、`baseline`、`stretch`

### 事件绑定

#### 1. 基本概念

* 在小程序中，事件是 **用户与界面交互的响应机制**，例如点击、输入、提交等。
* 使用 `bind` 或 `catch` 前缀绑定事件到 **组件**，由 **Page 的 JS 方法** 处理。

#### 2. 事件绑定方式

#### 2.1 bind 与 catch 区别

* `bind`: 事件会冒泡（向父节点传递）
* `catch`: 阻止冒泡（事件不会向父节点传递）

例如：

```xml
<!-- WXML -->
<view bindtap="handleTap">点我</view>
<view catchtap="handleCatchTap">点我(阻止冒泡)</view>
```

```js
// JS
Page({
  handleTap(e) {
    console.log("普通点击事件", e);
  },
  handleCatchTap(e) {
    console.log("阻止冒泡点击事件", e);
  }
})
```

#### 3. 常见事件类型

1. **点击事件**

   * `bindtap`：点击
   * `bindlongpress`：长按

   ```xml
   <button bindtap="onClick">按钮</button>
   ```
2. **输入事件**

   * `bindinput`：实时输入
   * `bindblur`：失去焦点
   * `bindconfirm`：键盘确认（回车）

   ```xml
   <input bindinput="onInput" placeholder="请输入..." />
   ```
3. **表单事件**
   * `bindsubmit`：提交表单
   * `bindreset`：重置表单
4. **滚动事件**
   * `bindscroll`：监听滚动（`scroll-view` 可用）

#### 事件对象 `event`

每个事件都会传递一个 **事件对象**，常用属性有：

* `event.type`：事件类型（如 `tap`、`input`）
* `event.currentTarget`：触发事件的组件（绑定事件的那个元素）
* `event.target`：真正触发事件的子元素（可能和 `currentTarget` 不同）
* `event.detail`：事件额外数据（如输入框的值）
* `event.currentTarget.dataset`：获取自定义 `data-*` 数据

#### 传递自定义参数

可以通过 `data-` 属性在 WXML 中定义参数，JS 里获取：

```xml
<view bindtap="onTap" data-id="123" data-name="Tom">点我</view>
```

```js
Page({
  onTap(e) {
    console.log(e.currentTarget.dataset.id);   // 123
    console.log(e.currentTarget.dataset.name); // Tom
  }
})
```

#### JS 方法中的 `this`

* 在小程序里，Page 定义的方法默认绑定在 `this` 上。
* 如果需要修改页面数据，要使用 `this.setData()`。

```js
Page({
  data: {
    count: 0
  },
  addCount() {
    this.setData({
      count: this.data.count + 1
    })
  }
})
<button bindtap="addCount">+1</button>
<text>{{count}}</text>
```

## 后端

### Node.js（Express框架）

* 作为 REST API 服务，接收小程序的请求。
* 典型分层结构：
  * **Routes (路由)**：负责定义接口地址（如 `/auth/login`, `/checkin/submit`）。
  * **Controllers (控制器)**：处理业务逻辑（比如验证打卡位置、时间）。
  * **Models (数据层/数据库交互)**：与 MySQL 数据库通信。

#### Routes示例