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

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

核心概念：

• 页面 (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 代码或逻辑，例如：
    • 网络请求封装
    • 数据模型定义
    • 工具函数封装
    • 自定义组件的实现
  • 没有界面： 非页面不会直接展示用户界面，而是作为辅助模块被页面或其他组件使用。
  • 模块化： 非页面可以帮助您模块化代码，提高代码的可复用性和可维护性。

总结：

• 页面是用户界面的组成部分， 它包含了结构、样式和逻辑，并可以直接展示给用户。
• 非页面是用于封装代码逻辑的模块， 它们不会直接展示用户界面，而是辅助页面完成功能。

理解页面和非页面的区别，对于开发出结构清晰、易于维护的微信小程序至关重要。