微信小程序中 “页面” 和 “非页面” 的区别，并用表格进行对比。
核心概念：
- 页面 (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 代码或逻辑，例如：
- 网络请求封装
- 数据模型定义
- 工具函数封装
- 自定义组件的实现
- 没有界面： 非页面不会直接展示用户界面，而是作为辅助模块被页面或其他组件使用。
- 模块化： 非页面可以帮助您模块化代码，提高代码的可复用性和可维护性。
- 封装通用逻辑： 非页面通常用于封装一些通用的 JavaScript 代码或逻辑，例如：
总结：
- 页面是用户界面的组成部分， 它包含了结构、样式和逻辑，并可以直接展示给用户。
- 非页面是用于封装代码逻辑的模块， 它们不会直接展示用户界面，而是辅助页面完成功能。
理解页面和非页面的区别，对于开发出结构清晰、易于维护的微信小程序至关重要。
