当前位置：首页 > article >正文

微信小程序中 “页面” 和 “非页面” 的区别

article 2025/1/7 10:22:58

微信小程序中 “页面” 和 “非页面” 的区别，并用表格进行对比。

核心概念：

页面 (Page)： 页面是微信小程序中用户可以直接交互的视图层，也是小程序的基本组成部分。每个页面都有自己的 WXML 结构、WXSS 样式和 JavaScript 逻辑。
非页面 (Non-Page)： 非页面泛指小程序中不直接构成用户界面的其他类型的文件，它们通常用于封装公共逻辑、数据模型、网络请求等。

页面 (Page) 与非页面 (Non-Page) 的区别：

特性	页面 (Page)	非页面 (Non-Page)
主要作用	构成用户界面的基本单元，是用户可以直接看到的交互界面。	用于封装公共逻辑、数据模型、网络请求等，不直接展示用户界面。
文件类型	主要包括： `.wxml` (页面结构), `.wxss` (页面样式), `.js` (页面逻辑), `json` (页面配置)	通常是 `.js` 文件，但也可能包括 `.json` 配置文件，但不能直接配置样式。
目录结构	通常放置在 `pages` 目录下的子目录中，每个页面都有自己的目录，包含 WXML、WXSS、JS 和 JSON 文件。	可以放置在 `utils`、`api`、`components` 等目录中，用于组织代码逻辑。
生命周期	有自己的完整生命周期，例如 `onLoad`、`onShow`、`onReady`、`onHide`、`onUnload` 等，用于管理页面状态。	没有页面生命周期，其内部的函数或逻辑会在其他地方被调用。
数据绑定	可以使用微信小程序的数据绑定语法 (`{{ ... }}`)，将数据渲染到 WXML 页面结构中，并实现动态更新。	不直接参与页面渲染，而是通过 JavaScript 代码或其他组件间接影响页面显示。
事件处理	可以定义事件处理函数，响应用户的交互行为，例如点击、滑动、输入等。	通常不直接处理用户的交互事件，而是提供一些功能函数或逻辑，供页面或其他组件调用。
组件	可以使用小程序组件，构建更复杂的界面元素。	通常不会直接使用小程序组件，而是用于封装一些基础的服务方法或者逻辑。
路由跳转	可以使用 `wx.navigateTo`、`wx.redirectTo`、`wx.switchTab` 等 API 进行页面跳转。	不直接参与页面路由跳转，而是供其他页面调用。
`wx.getApp()`	可以使用 `wx.getApp()` 和 `getApp()` 函数获取到小程序的实例对象，并可以使用 `this` 直接访问组件的数据或者函数。	如果在 Page 或者 Component 中，可以使用 `this` 访问 Page 或者 Component 的数据和方法。在非页面文件中使用 `wx.getApp()` 会因为上下文的问题，导致获取不到小程序实例。
作用域	拥有自己的独立作用域，可以使用 `this` 关键字访问当前页面的数据和方法，可以访问 Page 的生命周期函数。	作用域取决于定义的位置，不能使用 `this` 访问页面和组件的数据或者方法。

详细解释:

页面 (Page)：
- 用户直接交互： 页面是用户直接看到的，并且可以在其上进行操作的界面。例如，首页、列表页、详情页、设置页等都是页面。
- 页面结构： 使用 .wxml 文件描述页面的结构。
- 页面样式： 使用 .wxss 文件描述页面的样式。
- 页面逻辑： 使用 .js 文件编写页面的逻辑，例如处理用户的交互行为、发送网络请求、更新页面数据等。
- 页面配置： 使用 .json 文件描述页面的配置信息，例如导航栏样式、页面背景色等。
非页面 (Non-Page)：
- 封装通用逻辑： 非页面通常用于封装一些通用的 JavaScript 代码或逻辑，例如：
  - 网络请求封装
  - 数据模型定义
  - 工具函数封装
  - 自定义组件的实现
- 没有界面： 非页面不会直接展示用户界面，而是作为辅助模块被页面或其他组件使用。
- 模块化： 非页面可以帮助您模块化代码，提高代码的可复用性和可维护性。