微信小程序 自定义组件并引入

最新推荐文章于 2024-07-06 21:39:22 发布
最新推荐文章于 2024-07-06 21:39:22 发布
阅读量2.6k 收藏 4
点赞数 1
分类专栏： 小程序 文章标签： 微信小程序 前端 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52697994/article/details/125133723
版权
本文介绍了如何在微信小程序中创建、声明和引入自定义组件。通过在项目中设立专门的组件目录，避免了组件重复导致的项目体积增大问题。首先，创建组件目录，然后在页面JSON文件中注册组件，接着在组件的JSON文件中声明其为组件。最后，在目标页面的WXML文件中引入并使用组件。
摘要由CSDN通过智能技术生成

文章目录

前言

项目结构方面可以单独建立一个目录来盛放组件, 我比较倾向于这种结构, 就像这样.
在这里插入图片描述
也可以…嗯…我在github上看过一些项目, 我发现作者们会把那些组件放在页面目录下, 但这样每个用到的页面都要复制一份, 会不会导致项目体量增大?

创建组件

创建好components之后先在里面新建一个文件夹NavBar作为组件目录, 不要直接创建components, 它会把你的组件4个文件直接扔在components目录下…

在这里插入图片描述
然后右键NavBar点击建立components, 这样看起来就会正常一些了…

在这里插入图片描述

这还没完, 因为要边做边看效果, 所以我们先把他随便引入到一个空页面, 就custom吧(随便一个就好)

如果你有接触过Vue的话, 不知道还记不记着Vue引入组件是要先使用componets来注册组件, 是的…小程序也有这一步, 只不过是在页面的json文件完成的, 待会会说到.

声明组件

这样还不够, 还要到组件的JSON, 将该页面声明为组件

最低0.47元/天 解锁文章
白瑕
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信小程序_组件的引入、传值
编程知识分享，主打前端
03-29 3万+
微信小程序_组件传值
小程序通过页面json文件中的usingComponents引入组件的方式实现自定义tabbar，会闪烁，影响小.zip
07-27
自定义tabbar，通过页面json文件中的usingComponents引入组件的方式实现，tab页面第一次加载时会出现闪烁现象，但相对于全局json中设置custom为true方式有所改善。
微信小程序自定义组件初学
weixin_43140251的博客
06-07 373
首先选择的小程序代码中有一个pages页面下json中有usingComponents，然后里面加了一个不在Pages目录下的页面 本着不懂就差的原则，看了小程序官网的解释 component是用于自定义组件的构造器 usingComponent多了一些需要注意的地方。 总之这就是自定义组件的构造方法。 然后在这个自定义的zhuanpan里 查腾讯官方文档里知道这是创建audio的对象，就...
小程序app.json中usingComponents一直报错如何解决
最新发布
克里斯蒂亚诺更新的博客
07-06 157
如何一直报错某一个，就先删除那一个，然后保存。再重新加入那个components即可。
微信小程序自定义组件
cc_xxo的博客
02-16 130
自定义组件 1、在根目录中创建components目录 2、在components目录中声明组件 右击新建component。一个文件夹为一个组件 js文件 Component({ options: { styleIsolation: 'apply-shared',//控制组件样式隔离 isolated apply-shared shared pureDataPattern: /^_/ //指定data中那些数据是纯数据字段 可用正则表达式 },
【微信小程序】基础篇 -- 自定义组件 -- 创建与引用 &样式（三十二）
JMFive的博客
03-10 5188
大家好，又见面了，我是夜阑的狗🐶，本文是专栏【微信小程序开发教程】专栏的第32篇文章;今天开始学习微信小程序的第17天💖💖💖，开启新的征程，记录最美好的时刻🎉，每天进步一点点。 此专栏是我是夜阑的狗微信小程序开发过程的总结，希望能够加深自己的印象，以及帮助到其他的小伙伴😉😉。如果文章有什么需要改进的地方还请大佬不吝赐教👏👏。🌹 🌹 🌹也欢迎你，关注我。👍 👍 👍！！💕 💕 💕 最后，本文仍有许多不足之处，欢迎各位认真读完文章的小伙伴们随时私信交流、批评指正！下期再见。
自定义组件-组件的创建与引用
m0_67198021的博客
06-09 545
为了保证目录结构的清晰，建议把不同的组件，存放到单独目录中。组件引用方式分为“局部引用”和“全局引用”，顾名思义：在页面的.json配置文件中引用组件的方式，叫做“局部引用”。实例代码如下： 4.全局引用组件 在app.json全局配置文件中引用组件的方式，叫做“全局引用”。示例代码如下： 5.全局引用VS局部引用 根据组件的使用频率和范围，来选择合适的引用方式：从表面来看，组件和页面都是由.js、.json、.wxml和.wxss这个四个文件组成。但是组件和页面的.js与.json文件有明显...
小程序聊天会话组件
weixin_34220179的博客
08-06 480
效果图场景用于在线客服的聊天对话等一、布局圈点1、三角箭头绘制一个26rpx*26rpx矩形，使它旋转45度，然后隐去对半，形成气泡上的直角三角形。<!-- 画三角箭头 --> <view class="triangle" style="{{item.myself == 1 ? 'right: 140rpx; background: #7ECB4B' : 'left: 140r...
微信小程序-微信小程序自定义组件（修正）
02-26
在微信小程序的开发过程中，自定义组件是提高代码复用性和灵活性的重要手段，它允许开发者根据自己的需求设计并封装功能模块，形成独立的组件，然后在不同的页面或场景中重复使用。 自定义组件的创建步骤如下： 1....
微信小程序自定义组件components(代码详解)
10-16
主要介绍了微信小程序自定义组件components知识，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
微信小程序自定义组件开发.zip
01-11
通过以上知识，开发者可以深入理解并熟练掌握微信小程序自定义组件的开发，从而打造更加高效、灵活且富有创新性的小程序应用。在实际开发过程中，不断实践和优化，才能更好地满足用户需求，提升小程序的品质和竞争力...
微信小程序自定义组件-打卡日历组件
09-09
微信小程序自定义组件是开发微信小程序时非常关键的一部分，它允许开发者封装可复用的代码模块，提升开发效率和代码质量。在这个特定的案例中，我们关注的是一个名为"打卡日历组件"（rwjCalendar）的自定义组件。这...
微信小程序自定义组件实现环形进度条
10-16
微信小程序自定义组件的实现涉及到了小程序开发中的组件化思想，这对于构建可复用、模块化的应用至关重要。环形进度条是一种常见的UI元素，用于展示任务或进程的完成状态。下面我们将详细讲解如何在微信小程序中实现...
如何在微信小程序引入第三方组件
小行星住户的博客
03-04 9793
如何在微信小程序引入第三方组件库前言一、新建一个项目二、引入组件库（一）执行nmp init命令创建package.json文件（二）引入组件库三、构建npm四、使用组件（一）在.json文件引入组件（二）修改wxml文件 前言 微信小程序的开发过程越来越简便，上手十分快，如果是学过vue的同学做起来就更觉得十分亲切了。微信小程序更多是引入第三方组件库进行开发，顾名思义就是借用别人的模板进行创作，那么这里给大家完整介绍如何把第三方组件库引入到项目中。 提示：以下是本篇文章正文内容，下面案例可供参考 一
【微信小程序】初识微信小程序组件
大熊李子的博客
04-10 653
否，表示页面 wxss 样式将影响到自定义组件，自定义组件 wxss 中指定的样式也会影响页面和其他设置了 apply-shared 或 shared 的自定义组件。建议：在 组件 和 引用组件 的页面中建议使用 class 选择器， 不要使用 id、属性、标签选择器！否，表示页面 wxss 样式将影响到自定义组件，但自定义组件 wxss 中指定的样式不会影响页面。是，表示启用样式隔离，在自定义组件内外，使用 class 指定的样式将不会相互影 响。组件 A 的样式 不会影响 组件 C 的样式。
微信小程序组件化
weixin_48780364的博客
12-02 2702
微信小程序组件化
小程序引入自定义组件
菜鸟老五
10-08 5027
//WXML &lt;!-- 广告消息 --&gt; &lt;i-notice-bar icon="systemprompt" loop&gt; 2018年世界杯,将于6月14日至7月15日举行;2018年世界杯,将于6月14日至7月15日举行; &lt;/i-notice-bar&gt; &lt;!-- list --&gt; &lt;i-cell-group&gt; &lt;i-..
如何在微信小程序开发中添加组件？
weixin_50575727的博客
03-22 3701
如何在小程序中加入组件，手把手教学。
微信小程序 自定义组件
04-18
微信小程序是一种基于微信平台的应用程序，它可以在微信中直接运行，无需下载安装。而自定义组件是小程序中的一种重要功能，它允许开发者将一些常用的UI元素封装成组件，...以上就是微信小程序自定义组件的简单介绍。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值