自学微信小程序第二天-优快云博客

本文链接：https://blog.youkuaiyun.com/learning_tom/article/details/149468408

微信小程序核心知识点

一、WXML 模版语法

WXML（WeiXin Markup Language）是小程序的页面结构语言，用于描述页面的结构，结合数据绑定、条件渲染等能力，实现页面的动态展示。

1. 数据绑定

通过双大括号 `{{ }}` 将数据从页面的 .js 文件（Page 实例的 data 对象）渲染到 WXML 中，支持内容绑定、属性绑定和简单运算。

内容绑定：直接在标签内容中使用 `{{ 数据名 }}`，如 `{{ message }}`，当 data 中的 message 变化时，视图会自动更新。

属性绑定：在标签属性中使用，需用双引号包裹，如 ""。

运算支持：可在 `{{ }}` 中进行简单的算术运算、逻辑判断、字符串拼接等，如 `{{ 1 + 2 }}`、`{{ isShow ? '显示' : '隐藏' }}`。

2. 条件渲染

根据条件决定是否渲染某个元素，主要通过 `wx:if`、`wx:elif`、`wx:else` 和 `hidden` 实现。

wx:if 系列：`满足条件`，可配合 `wx:elif` 和 `wx:else` 实现多条件判断，如：

<view wx:if="{{ score > 90 }}">优秀</view>
<view wx:elif="{{ score > 60 }}">及格</view>
<view wx:else>不及格</view>

hidden：``，通过样式控制元素显示（`display: none`），与 wx:if 的区别在于：wx:if 是动态创建/移除元素，适合条件不常变化的场景；hidden 是样式切换，适合频繁切换的场景。

3. 列表渲染

通过 `wx:for` 循环渲染列表数据，需配合 `wx:key` 提高性能。

基本用法：`{{ index }}: {{ item }}`，其中 `item` 是当前项，`index` 是索引（默认名称，可自定义）。

自定义名称：通过 `wx:for-item` 和 `wx:for-index` 自定义当前项和索引的名称，如 `{{ i }}: {{ goods.name }}`。

wx:key 的作用：用于标识列表项的唯一性，避免列表更新时出现复用错误，建议使用数据中唯一的字段（如 id），若没有可暂用 `index`（不推荐频繁更新的列表）。

4. 模板（Template）

用于抽取重复的页面结构，实现复用，通过 `template` 标签定义，`import` 或 `include` 引用。

定义模板：在 .wxml 中用 `` 包裹结构，如：

<template name="userInfo">
  <view>{{ name }}</view>
  <view>{{ age }}</view>
</template>

使用模板：通过 `is` 属性指定模板名，`data` 传递数据，如 ``（`...` 是对象展开运算符）。

导入方式：`import`：只能导入目标文件中的模板，如 ``。

`include`：将目标文件中除 template 和 wxs 外的整个代码块复制过来，如 ``。

5. 事件绑定

用于响应用户交互（如点击、输入等），通过 `bind:事件名` 或 `catch:事件名` 绑定，事件处理函数定义在页面的 .js 文件中。

常用事件：`tap`（点击）、`input`（输入）、`change`（值改变）、`longpress`（长按）等。

基本用法：`点击`，在 .js 中定义 `handleTap(e) { ... }`，`e` 是事件对象，包含事件类型、目标元素、数据集等信息。

事件对象属性：`e.target`（触发事件的源头元素）、`e.currentTarget`（绑定事件的元素）、`e.detail`（额外信息，如输入框的 value）、`e.mark`（通过 `mark:` 标记的自定义数据）。

bind 与 catch 的区别：`bind` 不会阻止事件冒泡，`catch` 会阻止事件冒泡。

传递参数：通过 `data-*` 自定义属性传递，在事件处理函数中通过 `e.currentTarget.dataset` 获取，如 `点击`，函数中 `e.currentTarget.dataset.id` 可获取 123。

6. 表单控件绑定

通过 `wx:model` 实现表单控件与数据的双向绑定（类似 Vue 的 v-model）。

输入框：``，输入时 `data` 中的 username 会自动更新。

复选框：``，选中状态同步到 isAgree（布尔值）。

单选框：需配合 ``，内部 `男`，选中后 gender 为对应 value。

二、WXSS 模版样式

WXSS（WeiXin Style Sheet）是小程序的样式语言，基于 CSS 扩展，增加了自适应尺寸单位、样式导入等特性。

1. 与 CSS 的关系

WXSS 支持大部分 CSS 语法（如选择器、属性、值），但有部分限制（如不支持 `*` 通配符选择器），同时扩展了 `rpx` 单位和 `@import` 语法。

2. 尺寸单位 rpx

rpx（responsive pixel）是自适应屏幕的单位，解决不同设备屏幕尺寸适配问题。

原理：规定屏幕宽度为 750rpx，即无论设备实际宽度如何，750rpx 恒等于屏幕宽度。例如，在 375px 宽的手机上，1rpx = 0.5px；在 750px 宽的设备上，1rpx = 1px。

使用场景：布局时优先使用 rpx，确保在不同设备上显示比例一致，如 `` 在任何设备上宽度都是屏幕的一半。

3. 样式导入

通过 `@import` 导入外部 WXSS 文件，路径需为相对路径。

示例：在 page.wxss 中导入 common.wxss：`@import "../../common/common.wxss";`，导入后可使用 common.wxss 中定义的样式。

4. 选择器

支持的选择器包括：

类选择器（.class）：最常用，如 `.container { ... }`。

id 选择器（#id）：`#title { ... }`，但建议优先使用类选择器。

元素选择器（标签名）：如 `view { ... }`、`button { ... }`。

后代选择器（.parent .child）：选择父元素下的子元素。

伪类选择器：如 `:active`（点击状态）、`:focus`（聚焦状态）。

不支持的选择器：通配符（*）、属性选择器（[attr]）等。

5. 全局样式与局部样式

全局样式：在 app.wxss 中定义，作用于所有页面。

局部样式：在页面的 .wxss 文件中定义，仅作用于当前页面，若与全局样式同名，局部样式会覆盖全局样式（遵循 CSS 优先级规则）。

三、全局配置（app.json）

app.json 是小程序的全局配置文件，用于配置页面路径、窗口表现、tabBar 等，格式为 JSON 对象，不能有注释。

1. 核心配置项

pages：数组类型，配置小程序的所有页面路径，第一个元素为首页路径。

示例：`"pages": ["pages/index/index", "pages/logs/logs"]`，小程序会根据路径自动创建对应的页面文件。

window：配置小程序的窗口表现（如导航栏、背景等），子配置项包括：`navigationBarTitleText`：导航栏标题文字。

`navigationBarBackgroundColor`：导航栏背景色（十六进制颜色，如 "#ffffff"）。`navigationBarTextStyle`：导航栏标题颜色，仅支持 "black" 或 "white"。`backgroundColor`：窗口背景色（下拉刷新时显示的背景）。

`backgroundTextStyle`：下拉 loading 的样式，支持 "dark" 或 "light"。`enablePullDownRefresh`：是否开启全局下拉刷新（默认 false）。`onReachBottomDistance`：页面上拉触底时的距离（默认 50px）。

tabBar：配置底部或顶部的 tab 导航（当页面需要 tab 切换时使用），子配置项包括：`list`：数组，每个元素配置一个 tab，包含 `pagePath`（页面路径）、`text`（文字）、`iconPath`（未选中图标路径）、`selectedIconPath`（选中图标路径）。`position`：tabBar 位置，可选 "bottom"（默认）或 "top"（顶部时不会显示图标）。`color`：未选中文字颜色。`selectedColor`：选中文字颜色。`backgroundColor`：tabBar 背景色。`borderStyle`：tabBar 上边框颜色，可选 "black" 或 "white"。

networkTimeout：配置各类网络请求的超时时间（单位 ms），如：

"networkTimeout": {
  "request": 60000,  // wx.request 超时时间
  "connectSocket": 60000,  // WebSocket 连接超时时间
  "uploadFile": 60000,  // 文件上传超时时间
  "downloadFile": 60000  // 文件下载超时时间
}

permission：配置小程序需要的权限，如获取位置信息：

"permission": {
  "scope.userLocation": {
    "desc": "用于获取您的位置信息"  // 权限申请时的提示语
  }
}

四、页面配置（页面.json）

每个页面的文件夹下可创建 .json 文件（如 pages/index/index.json），用于配置当前页面的窗口表现，会覆盖 app.json 中 window 的同名配置，仅能配置 window 相关项。

1. 常用配置项

`navigationBarTitleText`：当前页面导航栏标题文字，如 `"navigationBarTitleText": "首页"`。

`navigationBarBackgroundColor`：当前页面导航栏背景色，覆盖全局配置。

`navigationBarTextStyle`：当前页面导航栏标题颜色（"black" 或 "white"）。

`enablePullDownRefresh`：当前页面是否开启下拉刷新，默认 false。

`onReachBottomDistance`：当前页面上拉触底距离，默认 50px。

`backgroundColorTop`：顶部窗口背景色（仅 iOS 支持）。

示例：index.json 配置：

{
  "navigationBarTitleText": "我的页面",
  "enablePullDownRefresh": true,
  "backgroundTextStyle": "dark"
}

五、网络数据请求

小程序通过微信提供的 API 发起网络请求，主要用于与后端服务器交互，核心 API 为 `wx.request`，此外还有文件上传（`wx.uploadFile`）、文件下载（`wx.downloadFile`）等。

1. 基本用法（wx.request）

发起 HTTP/HTTPS 请求，语法：

wx.request({
  url: 'https://api.example.com/data',  // 请求地址（必须为 HTTPS）
  method: 'GET',  // 请求方法，默认 GET，支持 POST、PUT、DELETE 等
  data: {  // 请求参数（GET 会拼接在 URL 后，POST 放在请求体）
    id: 123
  },
  header: {  // 请求头，默认 Content-Type: application/json
    'Content-Type': 'application/x-www-form-urlencoded'  // 若后端需要表单格式
  },
  success: (res) => {  // 请求成功回调
    console.log('请求成功', res.data);  // res.data 为后端返回的数据
  },
  fail: (err) => {  // 请求失败回调（如网络错误、超时）
    console.error('请求失败', err);
  },
  complete: () => {  // 无论成功失败都会执行
    console.log('请求完成');
  }
});

2. 注意事项

域名配置：小程序要求请求的域名必须是 HTTPS 协议，且需在微信公众平台（小程序管理后台）的「开发 - 开发设置 - 服务器域名」中配置合法域名，未配置的域名无法请求（本地调试时可在「详情 - 本地设置」中勾选「不校验合法域名、web-view（业务域名）、TLS 版本以及 HTTPS 证书」绕过限制）。

超时时间：默认由全局配置的 networkTimeout 控制，也可在单个请求中通过 `timeout` 参数单独设置（单位 ms）。

异步处理：`wx.request` 是异步 API，可通过 Promise 封装简化代码，如：

function request(options) {
  return new Promise((resolve, reject) => {
    wx.request({
      ...options,
      success: (res) => resolve(res.data),
      fail: (err) => reject(err)
    });
  });
}
// 使用
request({ url: 'https://api.example.com/data' })
  .then(data => console.log(data))
  .catch(err => console.error(err));

3. 文件上传与下载

文件上传（wx.uploadFile）：用于上传本地文件到服务器，需指定 `url`、`filePath`（本地文件路径）、`name`（服务器接收文件的字段名），如：

wx.uploadFile({
  url: 'https://api.example.com/upload',
  filePath: tempFilePath,  // 临时文件路径（可通过 wx.chooseImage 获取）
  name: 'file',
  formData: {  // 额外的表单数据
    'user': 'test'
  },
  success: (res) => {
    const data = JSON.parse(res.data);  // 后端返回的结果
  }
});

文件下载（wx.downloadFile）：用于从服务器下载文件到本地，返回临时文件路径，如：

wx.downloadFile({
  url: 'https://example.com/file.pdf',
  success: (res) => {
    if (res.statusCode === 200) {
      const tempFilePath = res.tempFilePath;  // 临时文件路径
    }
  }
});