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

 更新时间: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
  • 完成组件的逻辑代码
  • 在其他页面注册组件
  • 使用组件

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

相关文章

  • js实现数组冒泡排序、快速排序原理

    js实现数组冒泡排序、快速排序原理

    这篇文章主要为大家详细介绍了js实现数组冒泡排序、快速排序的原理,感兴趣的小伙伴们可以参考一下
    2016-03-03
  • javascript实现仿腾讯游戏选择

    javascript实现仿腾讯游戏选择

    这篇文章主要介绍了javascript实现仿腾讯游戏选择,简单实现的下拉菜单二级联动效果,十分不错,有需要的小伙伴可以参考下。
    2015-05-05
  • JavaScript设计模式中的观察者模式

    JavaScript设计模式中的观察者模式

    这篇文章主要介绍了JavaScript设计模式中的观察者模式,观察者设计模式适用于监听一对多的操作,例如监听对象属性的修改等等,观察者模式能够降低代码耦合度,提升可扩展性
    2022-06-06
  • Javascript实现图片轮播效果(一)让图片跳动起来

    Javascript实现图片轮播效果(一)让图片跳动起来

    图片轮播效果,在各大网站的首页都能看到,比较常见,下面脚本之家小编给大家介绍Javascript实现图片轮播效果(一)让图片跳动起来,需要的朋友参考下
    2016-02-02
  • javascript 页面跳转方法集合

    javascript 页面跳转方法集合

    js 中实现页面跳转的方法(window.location和window.open的区别)
    2009-03-03
  • Bootstrap基础学习

    Bootstrap基础学习

    Bootstrap是Twitter推出的一个用于前端开发的开源工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。它使用了流行的浏览器技术,给web开发提供了时尚的版式,表单,buttons,表格,网格系统等等。
    2015-06-06
  • 原生JS实现点击数字小游戏

    原生JS实现点击数字小游戏

    这篇文章主要为大家详细介绍了原生JS实现点击数字小游戏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-04-04
  • 页面实时更新时间的JS实例代码

    页面实时更新时间的JS实例代码

    这篇文章主要介绍了页面实时更新时间的JS实例代码,有需要的朋友可以参考一下
    2013-12-12
  • js实现同一个页面,多个enter事件绑定的示例

    js实现同一个页面,多个enter事件绑定的示例

    今天小编就为大家分享一篇js实现同一个页面,多个enter事件绑定的示例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-10-10
  • JavaScript中的方法重载实例

    JavaScript中的方法重载实例

    这篇文章主要介绍了JavaScript中的方法重载实例,本文直接给出重载实例,需要的朋友可以参考下
    2015-03-03

最新评论