likes
comments
collection
share

小程序之自定义组件(一)

作者站长头像
站长
· 阅读数 46

组件开发,对于做开发的人来说,是非常熟悉的一个朋友.如果你对组件还是不太了解,并且也没有开发和使用过组件,那么,我只能说,你有点太老实.不会偷懒的程序员,不是好程序员.哈哈哈.废话不多说.今天就简单分享一下组件的开发细节.

您在这里能看到啥

  1. 啥是组件
  2. 创建和使用组件
  3. 组件传值

啥事组件

老规矩,还是先说一下.我自己对组件的理解:

组件:如果非要划分职责的话,我认为他就是一个最小单元的加工厂.不论是UI还是工具,它都有.它就是最小功能的实现方案.它让你的代码重复利用率大大提升.也大大降低了维护成本.当然使用者只需要关心组件怎么使用可以达到自己的效果,并不关心它的实现.用我们的专业来讲,也算是解耦了.但你不能把组件真的认为它就是很单一的功能.其实好的组件是可以组合使用的.切记.在开发项目的时候.要先好好思考,把通用的东西,尽量抽离成为组件.

上面简单的说了一下我自己的对组件的理解.下面我们来看看小程序里.怎么去创建和使用组件吧.

创建和使用组件

  1. 创建组件

    • 创建小程序项目

      如果不出意外的话,你新创建的小程序项目,默认结构应该如下所示. 小程序之自定义组件(一)

    然后你就会发现.怎么没有components文件.如果你会好奇,那就说明你还是知道组件的.不用担心,没有我们就手动创建一个就行.如下所示

    小程序之自定义组件(一)

    components文件夹,就是来存放我们自己定义组件的地方.

    • 创建组件
      • 点击components文件
      • 右键选择新建Component,如下所示 小程序之自定义组件(一)
      • 输入组件名字即可创建完成,如下所示 小程序之自定义组件(一)

  2. 使用组件

    经过上面步骤,现在我们已经创建了自己的组件,那我们怎么在其他界面使用呢.

    1. 引入组件

      比如我们想要在index文件里,引入上面test组件.那我们需要在index.json中的usingComponents对象中,添加我们的组件.如下所示 小程序之自定义组件(一)

      当然.我们这里创建的test组件,其实是不规范的.因为,在components文件夹里.不可能只有test这一个组件.如果我们不对其管理的话,就会发现里面会有很多的.js文件.为了其他人更好的阅读.我们尽量给自己的组件创建属于它自己的文件夹.如下所示. 小程序之自定义组件(一)

      这样.我们在index中的json文件中的引入,也要做相应的修改,切记,组件的路径一定要对,不然组件是不会生效的,也会在调试器给予⚠️.

    小程序之自定义组件(一) 2. 使用组件

    经过上面引入组件后,其实我们已经定义了组件的名字,那么使用起来,就和view一样简单了.如下所示: 小程序之自定义组件(一) 在这里,你可以理解和view一样的.你可以给它设置位置、颜色等等.到这里,最简单的组件使用已经完成,我觉得你会有疑惑.那我怎么给你组件传值呢,以及组件相应事件怎么告诉我呢.下面我们来看一下今天的核心内容吧.

组件传值

如果一个组件是一个纯粹的UI.没有事件响应和动态数据展示,那么到上面,就完成了.下面我们详细的讲解一下组件的js文件.

  • 我们来看一下test.js里面有啥

    Component({
     /**
     * 组件的属性列表
     */
     properties: {},

     /**
     * 组件的初始数据
     */
     data: {},

     /**
     * 组件的方法列表
     */
     methods: {}
 })

    最直观的就是组件js文件是被Component包裹的.然后就是三个分区

    1. 组件的属性列表

      这里面定义的属性是对外公开的.可以让使用者传值进来的. 下面.我们一起看一下是怎么定义属性的吧.

      properties: {
     // 这是我们定义属性的名字
     title: {
         // 属性的类型 可以是 String,Boolean,Number等等基础类型. 
         type: String,
         // 默认值
         value: '示例图'
         // 用于监听属性值的变化
         observer: '_configTitle'
     },
},

    2. 组件的初始数据

      这里面定义的属性是内部自己使用的.这里的使用和page中js的使用是一样的.

      data: {
   // 定义一个名叫normaltitle的属性.
   normaltitle: ""
}

      通过上面的定义,我们在.wxml的使用方式,和page是一样的,如下所示

      <view>{{normaltitle}}</view>

      下面我们将在组件的方法列表中,举例说明一下data的赋值.

    3. 组件的方法列表

      这里面定义的方法也是内部自己使用的.经过上面两个模块的将讲解,我们可以在这里,把对外属性和对内属性组合到一起使用.上面我们已经定义了一个监听事件._configTitle,下面我们来实现它吧.

      methods: {
    _configTitle: function(newVal) {
        this.setdata({
            noramltitle:newVal
        });
    }

}

      当然,监听事件可以做很多事,这取决于你的需求,我这里是简单的举例.说明一下怎么去监听属性值.

下篇文章我将会详细的讲解一下.

  1. 组件事件回调
  2. 组件的生命周期
转载自:https://juejin.cn/post/7173245572885774366
评论
请登录