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

 更新时间:2021年05月14日 11:57:19   作者:wangshus  
最近在用自定义组件搭建小程序,简单记录下步骤,所以这篇文章主要给大家介绍了关于微信小程序新手入门之自定义组件使用的相关资料,需要的朋友可以参考下

前言

从小程序基础库版本 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
  • 完成组件的逻辑代码
  • 在其他页面注册组件
  • 使用组件

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

相关文章

  • 使用有限状态机实现简版的html解析器

    使用有限状态机实现简版的html解析器

    FSM(Finite State Machines) 有限状态机,也叫有限状态自动机,是为研究有限内存的计算过程和某些语言类而抽象出的一种计算模型,本文将使用有限状态机实现一个简版的html解析器,有需要的小伙伴可以参考下
    2023-11-11
  • 使用JavaScript实现一个交互式音乐播放器

    使用JavaScript实现一个交互式音乐播放器

    JavaScript,作为前端开发的重要语言,可以实现许多复杂的功能,在这篇文章中,我们将一起创建一个交互式的音乐播放器,快跟随小编一起学习一下吧
    2024-01-01
  • js 冒泡事件与事件监听使用分析

    js 冒泡事件与事件监听使用分析

    js 冒泡事件与事件监听 代码分析
    2009-09-09
  • 在TypeScript中泛型的使用方法及场景

    在TypeScript中泛型的使用方法及场景

    泛型是TypeScript中的一个强大特性,它可以增加代码的灵活性和安全性,在本文中,我将向您介绍泛型的使用方法和场景,并展示如何使用类型约束,需要的朋友可以参考下
    2023-08-08
  • 微信小程序实现蓝牙设备搜索及连接功能示例详解

    微信小程序实现蓝牙设备搜索及连接功能示例详解

    这篇文章主要介绍了微信小程序实现蓝牙设备搜索及连接功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-06-06
  • JS中Generator函数与async函数用法介绍

    JS中Generator函数与async函数用法介绍

    javascript中经常会用到异步编程,在ES6之后我们使用的 Generator函数、async函数、promise都是我们异步编程的一大助力,这里我们主要讲解Generator、async函数,并且简介他们之间的一些联系,本篇文章会带着一些简易案例,方便大家理解使用
    2023-06-06
  • 微信小程序picker多列选择器(mode = multiSelector)

    微信小程序picker多列选择器(mode = multiSelector)

    本文主要介绍了微信小程序picker多列选择器,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-07-07
  • js获取鼠标点击的位置实现思路及代码

    js获取鼠标点击的位置实现思路及代码

    常用的是 event.clientX和event.clientY分别获取横向的和纵向的位置,但仅使用这个方法是不够的,感兴趣的朋友可以了解本文
    2014-05-05
  • JSON基本语法及与JavaScript的异同实例分析

    JSON基本语法及与JavaScript的异同实例分析

    这篇文章主要介绍了JSON基本语法及与JavaScript的异同,结合实例形式分析了json简单值、对象、数组三种类型值使用技巧,需要的朋友可以参考下
    2019-01-01
  • js常用排序实现代码

    js常用排序实现代码

    js常用排序,整理了,常用的数组互换。
    2010-12-12

最新评论