微信小程序中 “页面” 和 “非页面” 的区别
微信小程序中 “页面” 和 “非页面” 的区别,并用表格进行对比。
核心概念:
- 页面 (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 代码或逻辑,例如:
总结:
- 页面是用户界面的组成部分, 它包含了结构、样式和逻辑,并可以直接展示给用户。
- 非页面是用于封装代码逻辑的模块, 它们不会直接展示用户界面,而是辅助页面完成功能。
理解页面和非页面的区别,对于开发出结构清晰、易于维护的微信小程序至关重要。

相关文章:
微信小程序中 “页面” 和 “非页面” 的区别
微信小程序中 “页面” 和 “非页面” 的区别,并用表格进行对比。 核心概念: 页面 (Page): 页面是微信小程序中用户可以直接交互的视图层,也是小程序的基本组成部分。每个页面都有自己的 WXML 结构、WXSS 样式和 JavaScript 逻辑…...
【蓝桥杯】43709.机器人繁殖
题目描述 X 星系的机器人可以自动复制自己。它们用 1 年的时间可以复制出 2 个自己,然后就失去复制能力。 每年 X 星系都会选出 1 个新出生的机器人发往太空。也就是说,如果 X 星系原有机器人 5 个,1 年后总数是:5 9 14…...
【机器学习】机器学习的基本分类-自监督学习(Self-supervised Learning)
自监督学习是一种机器学习方法,介于监督学习和无监督学习之间。它通过数据本身生成标签,创建训练任务,从而学习数据的表征,而不需要人工标注的标签。这种方法在减少标注数据依赖、提高模型通用性等方面具有重要意义。 自监督学习的…...
R shiny app | 网页应用 空格分隔的文本文件在线转csv
shiny 能快速把R程序以web app的形式提供出来,方便使用,降低技术使用门槛。 本文提供的示例:把空格分隔的txt文件转为逗号分隔的csv文件。 前置依赖:需要有R环境(v4.2.0),安装shiny包(v1.9.1)。括号内是我使用的版本…...
三天速成微服务
微服务技术栈 总结 微服务技术对比 技术栈 SpringCloud SpringCloud是目前国内使用最广泛的微服务框架。官网地址:https://spring.io/projects/spring-cloud Springboot和SpringCould兼容性 代码目录结构如下 用于远程调用Bean 代码 package cn.itcast.order.config;//import …...
【踩坑记录】uni-app 微信小程序调试不更新问题解决指南
uni-app 微信小程序调试不更新问题解决指南 在使用 uni-app 开发微信小程序时,可能会遇到代码修改后无法更新或者不生效的问题。这种现象常见于调试阶段,通常与缓存、编译或代码错误有关。 本文将详细分析调试过程中常见的“不更新”问题,并…...
【Adobe Acrobat PDF】Acrobat failed to connect to a DDE server.是怎么回事?
【Adobe Acrobat PDF】Acrobat failed to connect to a DDE server.是怎么回事? 【Adobe Acrobat PDF】Acrobat failed to connect to a DDE server.是怎么回事? 文章目录 【Adobe Acrobat PDF】Acrobat failed to connect to a DDE server.是怎么回事&…...
PyTorch 中 coalesce() 函数详解与应用示例
PyTorch 中 coalesce() 函数详解与应用示例 coalesce: 美 [ˌkoʊəˈlɛs] 合并;凝聚;联结,注意发音 引言 在 PyTorch 中,稀疏张量(Sparse Tensor)是一种高效存储和操作稀疏数据的方式。稀疏…...
ubuntu进行C++的调试
方法一:gdb调试 作用: GDB 是 GNU 调试器,用于调试 C/C 程序。它可以在命令行中使用,提供强大的调试功能。 集成: GDB 可以独立于 VSCode 使用,你可以在终端中直接运行 GDB 来调试程序。 使用示例:编译程序时使用 -g 选项以包含调…...
【U8+】用友U8软件中,出入库流水输出excel的时候提示报表输出引擎错误。
【问题现象】 通过天联高级版客户端登录拥有U8后, 将出入库流水输出excel的时候,提示报表输出引擎错误。 进行报表输出时出现错误,错误信息:找不到“fd6eea8b-fb40-4ce4-8ab4-cddbd9462981.htm”。 如果您正试图从最近使用的文件列…...
NoSQL简介
NoSQL 的定义及特点 NoSQL(Not Only SQL)是一种非关系型数据库,设计之初为解决关系型数据库在扩展性、性能和多样化数据处理方面的局限性。NoSQL 支持多种数据模型,包括键值对、文档、列族和图形结构,广泛应用于大规模…...
XIAO Esp32 S3 网络摄像头——3音视频监控
1、介绍 之前分别介绍了音频和视频的接收,本文是整合了前2篇文章,实现了音视频的同时获取。 效果: 用xiao esp35 s3自制一个网络摄像头 2、适用场景广泛 家庭安防 无论是门前监控,还是室内安全,自制摄像头可以让你轻松把握每个角落,实时查看视频流,防止任何潜在风险。…...
题目解析与代码实现:You‘re Given a String
引言 本文将详细解读一道字符串处理题目 “You’re Given a String”,并用 Python 实现该题的解决方案,同时解析其核心算法逻辑。本文适合有一定基础的程序员,希望通过字符串算法提升能力的读者。 1. 题目描述 问题背景 题目给出了一个字符…...
Understanding the Lomb–Scargle Periodogram
本文目的:了解Lomb–Scargle Periodogram的原理 (用来估算不均匀采样数据的周期)参考文献Understanding the Lomb–Scargle Periodogram思路: 连续傅里叶变换 --> 离散傅里叶变换(均匀采样–> Classifical perio…...
解决Linux切换用户后的命令提示符为-bashxx$的问题
1、问题描述 切换用户时,命令提示符为-bashxx$ 比如: [rootlocalhost ~]# su zhouxingchi bash-4.2$ ### 显示看着不正常的命令提示符 2、PS1变量 PS1变量就是我们的命令提示符的内容,当我们登录时会加载该变量,从而显示提…...
AMP 混合精度训练中的动态缩放机制: grad_scaler.py函数解析( torch._amp_update_scale_)
AMP 混合精度训练中的动态缩放机制 在深度学习中,混合精度训练(AMP, Automatic Mixed Precision)是一种常用的技术,它利用半精度浮点(FP16)计算来加速训练,同时使用单精度浮点(FP32…...
Oracle数据库如何找到 Top Hard Parsing SQL 语句?
有一个数据库应用程序存在过多的解析问题,因此需要找到产生大量硬解析的主要语句。 什么是硬解析 Oracle数据库中的硬解析(Hard Parse)是指在执行SQL语句时,数据库需要重新解析该SQL语句,并创建新的执行计划的过程。这…...
Mono里运行C#脚本25—mono_codegen
前面分析怎么样找到主函数Main的入口点功能,也就是说已经找到了这个函数的CIL代码。虽然找到了代码,但是还不能执行它的,因为它是一种虚拟机的代码。也就是说它是假的代码,不是现实世界存在的机器的代码,因此不能直接执行,必须经过后端编译器的再次编译才能真正运行它。下…...
flink cdc oceanbase(binlog模式)
接上文:一文说清flink从编码到部署上线 环境:①操作系统:阿里龙蜥 7.9(平替CentOS7.9);②CPU:x86;③用户:root。 预研初衷:现在很多项目有国产化的要求&#…...
【WPF】 数据绑定机制之INotifyPropertyChanged
INotifyPropertyChanged 是 WPF 中的一个接口,用于实现 数据绑定 中的 属性更改通知。它的主要作用是,当对象的某个属性值发生更改时,通知绑定到该属性的 UI 控件更新其显示内容。 以下是有关 INotifyPropertyChanged 的详细信息和实现方法&…...
浏览器访问 AWS ECS 上部署的 Docker 容器(监听 80 端口)
✅ 一、ECS 服务配置 Dockerfile 确保监听 80 端口 EXPOSE 80 CMD ["nginx", "-g", "daemon off;"]或 EXPOSE 80 CMD ["python3", "-m", "http.server", "80"]任务定义(Task Definition&…...
【根据当天日期输出明天的日期(需对闰年做判定)。】2022-5-15
缘由根据当天日期输出明天的日期(需对闰年做判定)。日期类型结构体如下: struct data{ int year; int month; int day;};-编程语言-CSDN问答 struct mdata{ int year; int month; int day; }mdata; int 天数(int year, int month) {switch (month){case 1: case 3:…...
树莓派超全系列教程文档--(61)树莓派摄像头高级使用方法
树莓派摄像头高级使用方法 配置通过调谐文件来调整相机行为 使用多个摄像头安装 libcam 和 rpicam-apps依赖关系开发包 文章来源: http://raspberry.dns8844.cn/documentation 原文网址 配置 大多数用例自动工作,无需更改相机配置。但是,一…...
多场景 OkHttpClient 管理器 - Android 网络通信解决方案
下面是一个完整的 Android 实现,展示如何创建和管理多个 OkHttpClient 实例,分别用于长连接、普通 HTTP 请求和文件下载场景。 <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas…...
《Playwright:微软的自动化测试工具详解》
Playwright 简介:声明内容来自网络,将内容拼接整理出来的文档 Playwright 是微软开发的自动化测试工具,支持 Chrome、Firefox、Safari 等主流浏览器,提供多语言 API(Python、JavaScript、Java、.NET)。它的特点包括&a…...
Nginx server_name 配置说明
Nginx 是一个高性能的反向代理和负载均衡服务器,其核心配置之一是 server 块中的 server_name 指令。server_name 决定了 Nginx 如何根据客户端请求的 Host 头匹配对应的虚拟主机(Virtual Host)。 1. 简介 Nginx 使用 server_name 指令来确定…...
Rust 异步编程
Rust 异步编程 引言 Rust 是一种系统编程语言,以其高性能、安全性以及零成本抽象而著称。在多核处理器成为主流的今天,异步编程成为了一种提高应用性能、优化资源利用的有效手段。本文将深入探讨 Rust 异步编程的核心概念、常用库以及最佳实践。 异步编程基础 什么是异步…...
EtherNet/IP转DeviceNet协议网关详解
一,设备主要功能 疆鸿智能JH-DVN-EIP本产品是自主研发的一款EtherNet/IP从站功能的通讯网关。该产品主要功能是连接DeviceNet总线和EtherNet/IP网络,本网关连接到EtherNet/IP总线中做为从站使用,连接到DeviceNet总线中做为从站使用。 在自动…...
NXP S32K146 T-Box 携手 SD NAND(贴片式TF卡):驱动汽车智能革新的黄金组合
在汽车智能化的汹涌浪潮中,车辆不再仅仅是传统的交通工具,而是逐步演变为高度智能的移动终端。这一转变的核心支撑,来自于车内关键技术的深度融合与协同创新。车载远程信息处理盒(T-Box)方案:NXP S32K146 与…...
【VLNs篇】07:NavRL—在动态环境中学习安全飞行
项目内容论文标题NavRL: 在动态环境中学习安全飞行 (NavRL: Learning Safe Flight in Dynamic Environments)核心问题解决无人机在包含静态和动态障碍物的复杂环境中进行安全、高效自主导航的挑战,克服传统方法和现有强化学习方法的局限性。核心算法基于近端策略优化…...
