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

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

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。

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

最后:代码层面回顾


相关推荐
克里斯蒂亚诺更新8 小时前
微信小程序调用腾讯地图路线规划-注意点
微信小程序·小程序
土土哥V_araolin10 小时前
一生手护分销模式系统开发概述
大数据·小程序·零售
Можно11 小时前
uni-app 三端上线全流程指南:H5 / 小程序 / App 完整发布手册
小程序·uni-app
土土哥V_araolin11 小时前
2+1链动退休模式系统(升级版)解析
大数据·小程序·零售
2501_9151063212 小时前
Flutter 开发工具有哪些 跨平台项目开发与上架实操指南
android·flutter·ios·小程序·uni-app·iphone·webview
00后程序员张20 小时前
从审核被拒到稳定过审,iOS 上架技术优化
android·ios·小程序·https·uni-app·iphone·webview
土土哥V_araolin1 天前
多语言推三返一商城系统开发指南
小程序·零售
土土哥V_araolin1 天前
一条线公排系统小程序开发
小程序·零售
爬坑的小白1 天前
微信小程序拉起支付
微信小程序·小程序
土土哥V_araolin1 天前
国械甄选新零售系统开发方案
小程序·个人开发·零售