文章详情

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

请输入下面的图形验证码

提交验证

短信预约提醒成功

【微信小程序】自定义组件(一)

2023-09-05 17:26

关注

🎁写在前面:

观众老爷们好呀,这里是前端小刘不怕牛牛频道,小程序系列文章又更新了呀。

今天牛牛带来的是微信小程序的自定义组件入门知识,赶紧拿起小本本做笔记呀!

文章目录

一,创建和引用


1.1 介绍

自定义组件,就是开发者将页面的某个功能模块抽象化并提取出来的代码块,支持复用,减少一定的代码量。

有了自定义组件,我们就可以将页面复杂的模块分解成几个低耦合的模块。低耦合就是说模块间的关联程度低,避免了过度依赖,利于代码维护等等。当多个页面需要一样的功能模块时,我们还可以封装一个自定义组件,只需要在各页面使用该组件即可。这样代码量是不是一下子减少好多,相当的nice。

1.2 创建自定义组件

自定义组件的创建,类似于页面的创建,也是由jsonwxmlwxssjs四个类型的文件组成

创建有以下两个步骤:

  1. 在项目的根目录下,创建一个components文件夹,用来存放我们的自定义组件代码
    伙伴们是不是觉得跟Vue的组件定义有点像,不过注意的是,vue定义组件只需要vue一个文件即可,而小程序的自定义组件一般来说可不止。
  2. components文件夹下创建一个自定义组件名字的空文件夹,鼠标移至新文件夹上方并右键,再次输入名字,按下回车,开发者工具就会帮你自动生成需要的四个类型的文件
    在这里插入图片描述

一个最简单的自定义组件我们就创建完成啦。

注意:

自定义组件文件夹下需要在json文件中将component设置为true,完成自定义组件声明才可使用。

{"component" : true}

当然,在上面使用的快捷创建自定义组件中,开发者工具已经默认帮你把这一段写好了。

1.3 自定义组件引用

我们先来讲讲它的引用,自定义组件的引用也分为全局引用和局部引用,区别和用法如下。

如何选择:

当一个组件在需要在多个页面中使用,我们建议使用全局引用,而对于不常用的组件,只在特定页面使用,我们就用局部引用。

1.4 组件结构

我们来简单了解一下各文件的作用

二,自定义组件模板和样式


2.1 组件模板

组件模板中可以提供一个节点,作为插入标识位置,这时候当我们的页面引用组件的时候,可以提供一个子节点,插入到中,示例如下:

2.2 组件样式

注意:

组件样式特性:

修改组件样式隔离选项:

今天的小程序文章到这里就结束啦,如果觉得对您有帮助的话,可以关注牛牛接下来的文章

感谢您的支持,您的支持是我们创作的最大动力!!!
最后祝小伙伴们中秋节快乐呀!!!

债见~~

来源地址:https://blog.csdn.net/weixin_62542181/article/details/126689124

阅读原文内容投诉

免责声明:

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

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

软考中级精品资料免费领

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

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

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

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

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

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

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