文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

微信小程序自定义组件(超详细)

2023-09-09 09:20

关注

💌写在开头:
哈喽呀,亲爱的宝子们。
今天要介绍的是关于小程序自定义组件的相关内容。
主要分以下几个部分:组件的创建,组件的结构,组件的引用,组件样式,组件的生命周期等。

文章目录

1.1 如何创建自定义组件

(1)在项目根目录中,鼠标右键创建 components 文件夹
(2)右击components文件夹,创建item文件夹
(3)右击item文件夹,点击新建Component,输入item
(3)回车,自动生成四个小程序文件js json wxml wxss

在这里插入图片描述

注意:这里和vue有点类似,但是需要特别注意是新建Components,而不是新建page。为了保证目录结构的清晰,建议把不同的组件,放在components目录下不同文件夹中,例如我上图的三个自定义组件item ,cell.nav

1.2 自定义组件的使用(局部引入)

在页面xxx.json UsingComponent中注册,是以键值对的形式,前面的键就是我们创建的组件标签名,后面是url路径
在这里插入图片描述
在页面wxml中使用组件
在这里插入图片描述

1.3 自定义组件的引用方式

组件的引用方式分为两种:局部引用与全局引用
(1)局部引用:组件只能在当前被引用的页面内使用,即在页面的.json配置文件中引用组件;如上图所示。在页面的.json配置文件中引入组件,在页面的.wxml文件中使用组件。
(2)全局引用:组件可以在每个小程序页面中使用,即在app.json全局配置文件中引用的组件

1.4 自定义组件的样式(样式的隔离)

  1. 样式的隔离styleIsolation
    (1)当值为isolated,则为开启样式隔离
    (2)若为apply-shared,父影响子,即页面的样式可以影响到组件,但是组件不能影响组件外的样式。
    (3)若为shared父子影响,为双向影响。
    在这里插入图片描述
  2. 外部类externalClasses:[“cell-class”],
<view class="cell cell-class">我是cell组件</view>页面中<cell cell-class="mycell"></cell><cell></cell>.mycell{  line-height: 120rpx !important;  color:#F70;}

1.5自定义组件的插槽

  1. 默认插槽
    父组件 插槽内容
    子组件
  2. 命名多插槽
    父组件 🚒 🥗
    子组件 options:{ multipleSlots:true}
    在这里插入图片描述

1.6 自定义组件的生命周期

(1)组件的生命周期lifetimescreated创建此时还不能调用 setDataattached挂载detached 卸载(2)页面的生命周期 pageLifetimesshow显示hide后台运行resize尺寸变化

1.7如何写自定义导航栏

 (1)wx.getMenuButtonBoundingClientRect()胶囊的边界  (2) wx.getSystemInfoSync();系统信息(状态栏的高度)(3)配置自定义状态栏

在这里插入图片描述

  1. 在页面json中写入"navigationStyle": "custom"
{  "usingComponents": {    "nav":"/components/nav/nav"  },  "navigationStyle": "custom"}
  1. 在组件的js里面设置即可

在这里插入图片描述

来源地址:https://blog.csdn.net/m0_55734030/article/details/127892242

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-移动开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯