小程序中页面和组件的区别

页面包含组件,组件依赖页面存在

1.生命周期对比

== 页面(Page):小程序的独立路由单元,是用户可直接访问的完整页面(如登录页、首页),对应一个 pages/ 目录下的页面配置 ==

== 组件(Component):可复用的 UI / 逻辑单元,嵌入在页面或其他组件中,不能独立访问(如弹窗、选择器、列表项),对应 components/ 目录。==

2.目录对比
3.页面中使用组件时【运行加载过程】
  • 生命周期执行顺序:

页面 onLoad → 页面 onShow → 组件 created → 组件 attached → 页面 onReady → 组件 ready。

  • 数据通信:

页面 → 组件:通过 properties 传值(如 title="{{cardTitle}}");

组件 → 页面:通过 triggerEvent 触发自定义事件(如 bind:cardClick)。

  • 方法定义:

页面方法直接写在 Page({}) 中;

组件方法必须放在 methods: {} 内。

  • 路由与访问

页面:可通过 wx.navigateTo、wx.switchTab 等 API 跳转,有独立 URL。

组件:无路由概念,只能通过 标签嵌入到页面或其他组件中。

最后:代码层面回顾


相关推荐
小马_xiaoen1 小时前
常规优化已用尽?小程序体积深层次优化实战!!!
前端·小程序·uniapp
2501_915918411 小时前
iOS App HTTPS 抓包工具,代理抓包和数据线直连 iPhone 抓包的流程
android·ios·小程序·https·uni-app·iphone·webview
TE-茶叶蛋2 小时前
从零实现H5 表格协同编辑:Yjs + WebSocket 实战
websocket·小程序·excel
吴声子夜歌2 小时前
小程序——跳转API
服务器·前端·小程序
qq_12498707532 小时前
基于springboot的个性化服装搭配推荐小程序(源码+论文+部署+安装)
spring boot·后端·spring·微信小程序·小程序·毕业设计·毕业设计源码
吴声子夜歌2 小时前
小程序——转发API
java·前端·小程序
CHU7290352 小时前
宠物寄养小程序前端设计:以用户为中心,构建温暖贴心的服务生态
小程序·宠物
万岳科技程序员小金2 小时前
同城外卖系统源码开发:外卖APP与小程序平台搭建方案详解
大数据·小程序·软件开发·同城外卖系统源码·外卖app开发·外卖小程序开发·外卖软件开发
CHU7290352 小时前
就医陪诊预约小程序:贴心陪伴,让就医之路更顺畅的功能设计
小程序