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

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

核心概念:

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

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

特性 页面 (Page) 非页面 (Non-Page)
主要作用 构成用户界面的基本单元,是用户可以直接看到的交互界面。 用于封装公共逻辑、数据模型、网络请求等,不直接展示用户界面。
文件类型 主要包括: .wxml (页面结构), .wxss (页面样式), .js (页面逻辑), json (页面配置) 通常是 .js 文件,但也可能包括 .json 配置文件,但不能直接配置样式。
目录结构 通常放置在 pages 目录下的子目录中,每个页面都有自己的目录,包含 WXML、WXSS、JS 和 JSON 文件。 可以放置在 utilsapicomponents 等目录中,用于组织代码逻辑。
生命周期 有自己的完整生命周期,例如 onLoadonShowonReadyonHideonUnload 等,用于管理页面状态。 没有页面生命周期,其内部的函数或逻辑会在其他地方被调用。
数据绑定 可以使用微信小程序的数据绑定语法 ({``{ ... }}),将数据渲染到 WXML 页面结构中,并实现动态更新。 不直接参与页面渲染,而是通过 JavaScript 代码或其他组件间接影响页面显示。
事件处理 可以定义事件处理函数,响应用户的交互行为,例如点击、滑动、输入等。 通常不直接处理用户的交互事件,而是提供一些功能函数或逻辑,供页面或其他组件调用。
组件 可以使用小程序组件,构建更复杂的界面元素。 通常不会直接使用小程序组件,而是用于封装一些基础的服务方法或者逻辑。
路由跳转 可以使用 wx.navigateTowx.redirectTowx.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 代码或逻辑,例如:
      • 网络请求封装
      • 数据模型定义
      • 工具函数封装
      • 自定义组件的实现
    • 没有界面: 非页面不会直接展示用户界面,而是作为辅助模块被页面或其他组件使用。
    • 模块化: 非页面可以帮助您模块化代码,提高代码的可复用性和可维护性。

总结:

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

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

相关推荐
丁总学Java6 小时前
在微信小程序或前端开发中,picker 和 select 都是用户交互中用于选择的组件,但它们在功能、设计和使用场景上有一定的区别
微信小程序·小程序
天草二十六_简村人12 小时前
kong搭建一套微信小程序的公司研发环境
java·后端·微信小程序·小程序·kong
没有天赋的搬砖者12 小时前
微信小程序实现根据不同的用户角色显示不同的tabbar并且可以完整的切换tabbar
微信小程序·小程序
低代码布道师14 小时前
智慧加油站小程序数据库设计文档
数据库·小程序
爱分享的淘金达人14 小时前
25年教师资格认定材料及认定详细流程‼
java·python·考研·小程序·tomcat
特严赤傲15 小时前
微信小程序获取用户地址
微信小程序
知码者16 小时前
虚拟健身教练小程序:AI动作识别与个性化训练计划生成
人工智能·微信小程序·小程序·小程序开发
un_fired17 小时前
智能语音对话小程序功能优化day2-语音输入
小程序
大叔_爱编程19 小时前
wx131基于ssm+vue+uniapp的智能停车场管理系统小程序
vue.js·小程序·uni-app·毕业设计·ssm·源码·课程设计
低代码布道师19 小时前
智慧加油站小程序API设计文档
小程序