微信小程序开发入门与实战(组件的使用)
2023-09-11 14:19:57 时间
@作者 : SYFStrive
@博客首页 : HomePage
📜: 微信小程序
📌:个人社区(欢迎大佬们加入) 👉:社区链接🔗
📌:觉得文章不错可以点点关注 👉:专栏连接🔗
💃:感谢支持,学累了可以先看小段由小胖给大家带来的街舞😀
👉 微信小程序(🔥)
目录
组件的创建与引用
1、 创建组件
创建步骤:
1、在项目的根目录中,鼠标右键,创建 components 👉 test 文件夹
2、在新建的 components 👉 test 文件夹上,鼠标右键,点击“新建 Component”
3、键入组件的名称之后回车,会自动生成组件对应的 4 个文件,后缀名分别为 .js,.json, .wxml 和 .wxss
🐖注意:为了保证目录结构的清晰,可以把不同的组件,存放到单独目录中
如 👇
2、 组件
组件的引用类型:局部引用”和“全局引用
- 局部引用:组件只能在当前被引用的页面内使用
- 全局引用:组件可以在每个小程序页面中使用
3、局部引用组件
在页面的.json引用的叫局部配置
使用如 👇
4、全局引用组件
在全局配置的 app.json 引用的叫全局配置
使用如 👇
5、全局引用 VS 局部引用
根据组件的使用频率和范围选择引用方式:
- 如果某组件在多个页面中经常被用到,建议进行“全局引用”
- 如果某组件只在特定的页面中被用到,建议进行“局部引用”
6、组件和页面的区别
从表面来看,组件和页面都是由 .js、.json、.wxml 和 .wxss 这四个文件组成的。但是,组件和页面的 .js 与.json 文件有明显的不同如 👇:
- 组件的 .json 文件中需要声明 “component”: true 属性
- 组件的 .js 文件中调用的是 Component() 函数
- 组件的事件处理函数需要定义到 methods 节点中(vue类似)
自定义组件 - 样式
1、组件样式隔离
自定义组件的样式只对当前组件生效,不会影响到组件之外的UI 结构
如 👇
- 组件 A 的样式不会影响组件 C 的样式
- 组件 A 的样式不会影响小程序页面的样式
- 小程序页面的样式不会影响组件 A 和 C 的样式
好处如 👇:
- 防止外界的样式影响组件内部的样式
- 防止组件的样式破坏外界的样式
2、组件样式隔离的注意点
- app.wxss 中的全局样式对组件无效
- 只有 class 选择器会有样式隔离效果,id 选择器、属性选择器、标签选择器不受样式隔离的影响
🐖注意:在组件和引用组件的页面中建议使用 class 选择器,不要使用 id、属性、标签选择器!
3、修改组件的样式隔离选项
默认情况下,自定义组件的样式隔离特性能够防止组件内外样式互相干扰的问题。但有时,我们希望在外界能够控制组件内部的样式,此时,可以通过 styleIsolation 修改组件的样式隔离选项
4、styleIsolation 的可选值
可选值 | 默认值 | 描述 |
---|---|---|
isolated | 是 | 表示启用样式隔离,在自定义组件内外,使用 class 指定的样式将不会相互影响 |
apply-shared | 否 | 表示页面 wxss 样式将影响到自定义组件,但自定义组件 wxss 中指定的样式不会影响页面 |
shared | 否 | 表示页面 wxss 样式将影响到自定义组件,自定义组件 wxss 中指定的样式也会影响页面和其他设置了 apply-shared 或 shared 的自定义组件 |
如 👇
Component({
options:{
styleIsolation:'isolateds'
},
})
最后
本文到这里就结束了,大佬们的支持是我持续更新的最大动力,希望这篇文章能帮到大家💪
下篇文章再见ヾ( ̄▽ ̄)ByeBye
相关文章
- 微信小程序 - 上拉加载更多组件
- 微信小程序 - 下拉菜单组件
- C#/ASP.NET定时任务执行管理器组件–FluentScheduler定时器
- 【小程序】微信小程序中安装配置LinUi组件库
- 【微信小程序】-- 常用视图容器类组件介绍 -- view、scroll-view和swiper(六)
- 微信小程序 自定义组件(stepper)
- 微信小程序 自定义组件(modal) 引入组件
- uni-app - 去掉 button 组件自带的边框线
- 微信小程序搜索框代码组件
- 微信小程序地图组件
- Android开发工程师文集-提示框,菜单,数据存储,组件篇
- 微信小程序组件 加减号弹出框
- 微信小程序组件 下拉刷新
- 微信 小程序组件 分页加强版
- 《iOS组件与框架——iOS SDK高级特性剖析》——第6章,第6.1节示例应用简介
- SwiftUI 内功 之 强制VStack进行刷新 制作个日期选择组件(教程含源码)
- SwiftUI LazyVGrid组件如何正确方式给.sheet传递选择内容
- macOS 开源组件之实现两个照片对比(教程含源码)
- macOS SwiftUI 瀑布流组件之仿CollectionView不规则图文混合(教程含源码)
- macOS SwiftUI 封装组件之日期选择器图形日历和钟表模式NSDataPicker (教程含源码)
- createContext 和 useContext 结合使用实现方法共享(React Hook跨组件透传上下文与性能优化)
- 文本长按、按钮、图片组件
- 微信小程序开发入门与实战(插槽及组件页面的生命周期)
- 基于 STM32CubeMX 添加 RT-Thread 操作系统组件(十二)- 软件定时器
- 15. python爬虫——scrapy框架五大核心组件
- Spring Cloud Alibaba 微服务组件 Skywalking 分布式任务链(十一)
- 微信小程序实现自定义组件
- Unity 之 UGUI Toggle组件介绍和简例