iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >微信小程序新手入门之自定义组件的使用
  • 603
分享到

微信小程序新手入门之自定义组件的使用

2024-04-02 19:04:59 603人浏览 薄情痞子
摘要

前言 从小程序基础库版本 1.6.3 开始,小程序支持简洁的组件化编程。所有自定义组件相关特性都需要基础库版本 1.6.3 或更高。 开发者可以将页面内的功能模块抽象成自定义组件,以

前言

小程序基础库版本 1.6.3 开始,小程序支持简洁的组件化编程。所有自定义组件相关特性都需要基础库版本 1.6.3 或更高。

开发者可以将页面内的功能模块抽象成自定义组件,以便在不同的页面中重复使用;也可以将复杂的页面拆分成多个低耦合的模块,有助于代码维护。

一、小程序的好处和特点

1、好处

开发者:小程序开发门槛相对较低,难度不及APP,能够满足简单的基础应用,适合生活服务类线下商铺以及非刚需低频应用的转换;也能节约开发和推广成本。

用户:能够节约使用时间成本和手机内存空间。对于开发者来说

2、特点

便捷性:小程序是不需要下载安装的,即用即走,非常方便用户的使用。并且不占用手机的内存,很便捷。

唯一性:小程序的名称是具有唯一性的,谁先注册就是谁的,当别人已经注册成功了,你是没有办法在注册的。

二、为什么要使用自定义组件

在写小程序的时候,可能存在很多个页面要使用同一个组件的情况,比如说,设计了4个页面,每个页面的顶部都需要显示一个搜索框,如果在每个页面都复制同一份搜索框的代码,会比较繁杂,代码可读性比较差,也不易于后期代码维护,此时可以单独封装为一个组件,大概意思就是,也就是通常说的自定义组件,此后哪个页面需要用到时就直接在对应页面的JSON文件中引入即可。

三、怎么使用自定义组件

1、打开项目文件目录,新建一个compoments目录

新建一个compoments目录

2、在compoments目录里,新建一个组件名

新建自定义组件

3、右键单击选择新建compoment

4、在自定义组件(prolist)里完成逻辑代码 5、在要引用组件的页面中的json文件中,注册组件

6、在页面的wxml中就可以使用prolist组件

7、在组件(prolist)中接收传过来的值

8、接收的值可以在组件的wxml文件中直接使用

总结

  • 新建一个目录存放自定义组件
  • 再新建一个组件的文件夹
  • 创建compoment
  • 完成组件的逻辑代码
  • 在其他页面注册组件
  • 使用组件

到此这篇关于微信小程序新手入门之自定义组件使用的文章就介绍到这了,更多相关微信小程序自定义组件内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: 微信小程序新手入门之自定义组件的使用

本文链接: https://www.lsjlt.com/news/125965.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 微信小程序新手入门之自定义组件的使用
    前言 从小程序基础库版本 1.6.3 开始,小程序支持简洁的组件化编程。所有自定义组件相关特性都需要基础库版本 1.6.3 或更高。 开发者可以将页面内的功能模块抽象成自定义组件,以...
    99+
    2022-11-12
  • 微信小程序自定义tabbar组件
    本文实例为大家分享了微信小程序自定义tabbar组件的具体代码,供大家参考,具体内容如下 由于项目需求,必须自己写组件: 第一步:在App.json中配置tabBar,自定也组件也必...
    99+
    2022-11-11
  • 【微信小程序】自定义组件(一)
    🎁写在前面: 观众老爷们好呀,这里是前端小刘不怕牛牛频道,小程序系列文章又更新了呀。 今天牛牛带来的是微信小程序的自定义组件入门知识,赶紧拿起小本本做笔记呀! ...
    99+
    2023-09-05
    微信小程序 前端 小程序
  • 【微信小程序】自定义组件(二)
    🎁写在前面: 观众老爷们好呀,这里是前端小刘不怕牛牛频道,小程序系列文章又更新了呀。 上文我们讲解了微信小程序自定义组件的入门知识,那么今天牛牛就来讲讲自定义组件的进阶知识吧,...
    99+
    2023-09-01
    微信小程序 小程序 前端
  • 微信小程序自定义地址组件
    本文实例为大家分享了微信小程序自定义地址组件的具体代码,供大家参考,具体内容如下 项目需求 需要调用后台传过来的地址,存储地址时存的是地址的id,所以市面上的地址组件均不符合我的需求...
    99+
    2022-11-13
  • 微信小程序怎么自定义组件
    这篇文章主要讲解了“微信小程序怎么自定义组件”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“微信小程序怎么自定义组件”吧!组件模版和样式类似于页面,自定义组件拥有自己的 wxml&n...
    99+
    2023-06-26
  • 微信小程序怎么自定义组件Component使用
    本篇内容介绍了“微信小程序怎么自定义组件Component使用”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!1- 前言在本文中你将收获小程序...
    99+
    2023-07-05
  • 微信小程序自定义组件(超详细)
    💌写在开头: 哈喽呀,亲爱的宝子们。 今天要介绍的是关于小程序自定义组件的相关内容。 主要分以下几个部分:组件的创建,组件的结构,组件的引用,组件样式,组件的生命周期等。 ...
    99+
    2023-09-09
    微信小程序 小程序 前端
  • 微信小程序中如何自定义组件
    这篇文章将为大家详细讲解有关微信小程序中如何自定义组件,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。在微信小程序开发过程中,对于一些可能在多个页面都使用的页面模块,可以把它封装成一个组件,以提高开发效率。...
    99+
    2023-06-29
  • 微信小程序如何自定义tabbar组件
    这篇文章主要讲解了“微信小程序如何自定义tabbar组件”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“微信小程序如何自定义tabbar组件”吧!由于项目需求,必须自己写组件:第一步:在App...
    99+
    2023-06-14
  • 微信小程序自定义波浪组件怎么用
    这篇文章主要为大家展示了“微信小程序自定义波浪组件怎么用”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“微信小程序自定义波浪组件怎么用”这篇文章吧。先看看效果图:...
    99+
    2022-10-19
  • 微信小程序自定义顶部导航组件
    本文实例为大家分享了微信小程序自定义顶部导航组件,供大家参考,具体内容如下 在components中新建文件夹navbar components/navbar.wxml <!-...
    99+
    2022-11-13
  • 微信小程序实现自定义拍摄组件
    微信小程序实现自定义摄像头(在摄像头内添加提示信息),供大家参考,具体内容如下 摄像头组件(wxml) <!-- 拍照功能 自定义摄像头           bindtap:t...
    99+
    2022-11-13
  • 微信小程序怎么自定义地址组件
    本文小编为大家详细介绍“微信小程序怎么自定义地址组件”,内容详细,步骤清晰,细节处理妥当,希望这篇“微信小程序怎么自定义地址组件”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。项目需求需要调用后台传过来的地址,存储...
    99+
    2023-07-02
  • 【小程序】微信小程序自定义组件Component详细总结
    1- 前言 在本文中你将收获 小程序如何使用自定义组件自定义组件之间的传值自定义组件中插槽的使用 2- 组件文件新建 2.1 定义组件 在根目录新建components文件夹,建立cell 文件夹,...
    99+
    2023-09-23
    微信小程序 小程序 前端 开发语言 javascript
  • 微信小程序自定义底部导航栏组件
    本文实例为大家分享了微信小程序底部导航栏组件的具体实现代码,供大家参考,具体内容如下 1、在自己项目的公共组件的文件价下新建tabbar.vue(定义的自定义导航栏组件) <...
    99+
    2022-11-12
  • 微信小程序button组件如何自定义样式
    本篇内容主要讲解“微信小程序button组件如何自定义样式”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“微信小程序button组件如何自定义样式”吧!背景颜色wxml代码<button c...
    99+
    2023-06-26
  • 微信小程序自定义组件Component的代码详解
    目录1- 前言2- 组件文件新建2.1 定义组件2.2 注册组件2.3 使用组件2.4 图参考3- 外部类和样式隔离3.1定义组件3.2 使用组件3.3 图解释4- 组件插槽4.1 ...
    99+
    2023-03-02
    微信小程序自定义组件详解 微信小程序 component 微信小程序自定义组件
  • 微信小程序怎么使用自定义组件封装原生image组件
    本文小编为大家详细介绍“微信小程序怎么使用自定义组件封装原生image组件 ”,内容详细,步骤清晰,细节处理妥当,希望这篇“微信小程序怎么使用自定义组件封装原生image组件 ”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习...
    99+
    2023-06-26
  • 微信小程序使用扩展组件库WeUI的入门教程
    目录微信小程序使用WeUI入门教程1. 学习参考2.NodeJs初始化3.安装WeUI组件库4.配置4.1 构建npm4.2 支持npm5.项目使用WeUI总结微信小程序使用WeUI...
    99+
    2022-11-13
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作