菜单

微信小程序自定义组件

2019年5月25日 - Bootstrap

近年正值做的三个小程序项目中须要使用三个可免除的输入框控件,为了在等级次序中使用方便以及方便其余门类平素采纳,便封装了1个可祛除的input自定义组件。

组件的定义

//自定义组件component.json
{
  "component": true
}

//引用自定义组件的页面 page.json
{
  "usingComponents": {
    "component-tag-name": "../component/component"
  }
}

<!-- 这是自定义组件的内部WXML结构(component.wxml)-->
<view class='wapper'>
  <text>this is component</text>
  <slot name="slot1"></slot>
  我在中间
  <slot name="slot2"></slot>
</view>

<!-- 以下是对一个自定义组件的引用 (page.wxml)-->
<view>
  <text>This is Page</text>
  <component-tag-name inner-text="Some text" class="page-component">
    <view slot="slot1" class="slot">来自page页面,通过slot标签</view>
    <view slot="slot2"></view>
  </component-tag-name>
</view>

//component.wxss
.wapper{
  background-color:#ccc;
  width: 100%;
  height:auto;
}
.slot{
  color:red;
}

//page.wxss
.page-component{
  color:#fff;//有效,继承样式
  padding:10px;//无效
}
.slot{
  color:green;
}

//component.js
Component({
  options: {
    multipleSlots: true // 在组件定义时的选项中启用多slot支持
  },
  properties: {
    // 这里定义了innerText属性,属性值可以在组件使用时指定
    innerText: {
      type: String,
      value: 'default value', //不存在此属性时
    }
  },
  data: {
    // 这里是一些组件内部数据
    someData: {}
  },
  methods: {
    // 这里是一个自定义方法
    customMethod: function(){}
  }
})

Component构造器API

图片 1

零件的概念

透过上面的代码和出示结果能够见到:

  1. slot样式受page.wxss里的.slot潜移默化显示黄色,不受component.wxss.slot潜移默化展现原野绿。
  2. 三番七遍样式,如 font 、 color ,会从组件外继续到零部件内。除继续样式外,
    app.wxss
    中的样式、组件所在页面包车型大巴的体裁对自定义组件无效。例子中.page-componentcolor:#fff能生效,而padding则不见效。

组件需求完结的需假诺:输入框内没有内容时,删除开关隐藏;当输入框内有内容时,删除按键展现,点击删除按键则清空输入框内全数故事情节。并且还足以设置输入框全部样式以及输入框右侧Logo。

Page与Component数据交互

Tip:page代携带用组件页面,component代指自定义组件

  1. page在引用组件时能通过属性值设置,component.js在properties获取。
  2. page在引用组件时通data-xxx设置,component.js在this.dataset获取。

<!-- page.wxml -->
<component-tag-name fromPage="来自Page" data-other="from dataset"></component-tag-name>

Component({
  properties: {
    formPage: String  //简写
    /*
    myProperty: { // 属性名
      type: String, // 类型(必填),目前接受的类型包括:String, Number, Boolean, Object, Array, null(表示任意类型)
      value: '', // 属性初始值(可选),如果未指定则会根据类型选择一个
      observer: function(newVal, oldVal){} // 属性被改变时执行的函数(可选),也可以写成在methods段中定义的方法名字符串, 如:'_propertyChange'
    }
    */
  },
  attached:function(){
    console.log(this.properties.fromPage);
    console.log(this.data.fromPage); //用data也能访问properties
    //设置properties值用setData()
    this.setData({
      fromPage: '改变了'
    });
    console.log(this.properties.fromPage);
    //通过dataset获取data-other的值
    console.log(this.dataset.other);
  }
})

调节台打字与印刷如下

来自Page
来自Page
改变了
from dataset

<!-- page.wxml -->
<!-- 当自定义组件触发“myevent”事件时,调用“onMyEvent”方法 -->
<component-tag-name bindmyevent="onMyEvent" />

<!--component.wxml -->
<!-- 在自定义组件中 -->
<button bindtap="onTap">点击这个按钮将触发“myevent”事件</button>

//page.js
Page({
  onMyEvent: function(e){
    console.log(e.detail.msg);
  }
})

//component.js
Component({
  methods: {
    onTap: function () {
      var myEventDetail = {msg:'来自component的信息'} // detail对象,提供给事件监听函数
      var myEventOption = {} // 触发事件的选项
      this.triggerEvent('myevent', myEventDetail, myEventOption)
    }
  }
})

点击component组件,调控台出口入下

来自component的信息

明朗了供给之后,就足以起初早先达成了。

behaviors

behaviors 是用以组件间代码共享的风味。种种 behavior
能够包括1组属性、数据、生命周期函数和艺术,组件引用它时,它的天性、数据和情势会被联合到零部件中,生命周期函数也会在相应时机被调用。各个组件能够引用多少个behavior 。 behavior 也得以引用其余 behavior 。
behavior 须要动用 Behavior() 构造器定义。

// my-behavior.js
module.exports = Behavior({
  behaviors: [],
  properties: {
    myBehaviorProperty: {
      type: String
    }
  },
  data: {
    myBehaviorData: {}
  },
  attached: function(){},
  methods: {
    myBehaviorMethod: function(){}
  }
})

组件引用时,在behaviors定义段中校它们每种列出就能够。

// my-component.js
var myBehavior = require('my-behavior')
Component({
  behaviors: [myBehavior],
  properties: {
    myProperty: {
      type: String
    }
  },
  data: {
    myData: {}
  },
  attached: function(){},
  methods: {
    myMethod: function(){}
  }
})

在上例中,my-component中最终蕴含myBehaviorPropertymyProperty五个属性,myBehaviorDatamyData四个数据字段,和myBehaviorMethodmyMethod七个点子。当组件触发attached生命周期时,会相继触发my-behavior中的attached生命周期函数和my-component中的attached生命周期函数。

组件和它引用的 behavior
中能够涵盖同名的字段,对这个字段的拍卖措施如下:

首先,在目的目录下新建贰个自定义组件

零件间涉及

五个自定义组件间的嵌套关系(parent父 / child 子/ ancestor祖先 /
descendant子孙),通过relations
定义段来相互间的通讯(必须在三个零部件定义中都参与relations定义,否则不会一蹴而就)。

<!-- page.wxml -->
<custom-ul>
  <custom-li> item 1 </custom-li>
  <custom-li> item 2 </custom-li>
</custom-ul>

<!-- component.wxml -->
<view class='wapper'>
  <text>custom-ul</text>
  <slot></slot>
</view>


<!-- children-component.wxml -->
<view>
  <text>li-item</text>
  <slot></slot>
</view>

//page.json
{
  "usingComponents": {
    "custom-ul": "../component/component",
    "custom-li": "../component/children-component"
  }
}

//component.json
{
  "component": true
}

//children-component.json
{
  "component": true
}

//component.js
Component({
  relations:{
    'children-component': {  //子组件相对路径
      type: 'child', // 关联的目标节点应为子节点
      linked: function (target) {
        // 每次有custom-li被插入时执行,target是该节点实例对象,触发在该节点attached生命周期之后
        console.log('--linked--');
        console.log(target);
      },
      linkChanged: function (target) {
        // 每次有custom-li被移动后执行,target是该节点实例对象,触发在该节点moved生命周期之后
      },
      unlinked: function (target) {
        // 每次有custom-li被移除时执行,target是该节点实例对象,触发在该节点detached生命周期之后
      }
    }
  },
  methods: {
    _getAllLi: function () {
      // 使用getRelationNodes可以获得nodes数组,包含所有已关联的custom-li,且是有序的
      var nodes = this.getRelationNodes('children-component');
      console.log('--getAllLi--');
      console.log(nodes);
    }
  },
  ready: function () {
    this._getAllLi()
  }
})


//children-component.js
Component({
  data:{
    name: 'name'
  },
  relations: {
    'component': {  //父组件相对路径
      type: 'parent', // 关联的目标节点应为父节点
      linked: function (target) {
        // 每次被插入到custom-ul时执行,target是custom-ul节点实例对象,触发在attached生命周期之后
      },
      linkChanged: function (target) {
        // 每次被移动后执行,target是custom-ul节点实例对象,触发在moved生命周期之后
      },
      unlinked: function (target) {
        // 每次被移除时执行,target是custom-ul节点实例对象,触发在detached生命周期之后
      }
    }
  }
})

图片 2

页面呈现

图片 3

console

图片 4

官网API

图片 5

说了如此多,官方网站基本都有

微信小程序-自定义组件

建好之后,我们要求来规划布局。依据需要来看,我们只须要四个零部件:五个image和多个input。右侧1个image提醒图标,然后3个input输入框,最终3个image删除按键。大家要把尽恐怕多的数目设置成能够修改的绑定数据,升高自定义组件的可扩大性。

谈到底分明的wxml布局文件如下:

<view class='input-class'>
   <image src='{{inputIcon}}' mode="scaleToFill" class='icon-class'></image>
   <input placeholder='{{inputHint}}' bindconfirm='{{confirmTap}}' style='flex:1;width:100%;padding-left:12rpx;' bindinput='inputListener' bindconfirm='inputConfirm' value='{{inputValue}}' type='{{inputType}}' password='{{isPassword}}' confirm-type='{{confirmType}}'></input>
   <image class="{{isClearShow?'clearImgShow':'clearImgHide'}}" src='clear.png' bindtap='clearTap' mode='widthFix'></image>
</view>

然后,大家将在来安装组件的有的品质和监听方法了。小程序的零部件属性列表是概念在.js文件的properties里的。把需求暴表露来并得以修改的属性都写在那几个中。其语法示举例下:

properties: {
  myProperty: { // 属性名
   type: String, // 类型(必填),目前接受的类型包括:String, Number, Boolean, Object, Array, null(表示任意类型)
   value: '', // 属性初始值(可选),如果未指定则会根据类型选择一个
   observer: function(newVal, oldVal, changedPath) {
     // 属性被改变时执行的函数(可选),也可以写成在methods段中定义的方法名字符串, 如:'_propertyChange'
     // 通常 newVal 就是新设置的数据, oldVal 是旧数据
   }
  },
  myProperty2: String // 简化的定义方式
 }

自个儿的性情列表如下:

 /**
   * 组件的属性列表
   */
   properties: {
     inputHint: {
        type: String,
        value: '搜索'
     },
     inputIcon: {
        type: String,
        value: 'search.png'
     },
     inputType: {
        type: String,
        value: 'text'
     },
     isPassword: {
        type: Boolean,
        value: false
     },
     confirmType: {
        type: String,
        value: "done"
     }
   }

做到了质量列表的编辑之后,接下去大家要求为自定义组件增多监听事件。

 事件系统是组件间通讯的重中之重格局之一。自定义组件能够触发即兴的事件,引用组件的页面能够监听这个事件。

监听以及触发事件的语法是这么的:

//触发事件
//自定义组件触发事件时,需要使用 triggerEvent 方法,指定事件名、detail对象和事件选项
methods: {
  onTap: function(){
   var myEventDetail = {} // detail对象,提供给事件监听函数
   var myEventOption = {} // 触发事件的选项
   this.triggerEvent('myevent', myEventDetail, myEventOption)
  }
 }
//监听事件
<!-- 当自定义组件触发“myevent”事件时,调用“onMyEvent”方法 -->
<component-tag-name bindmyevent="onMyEvent" />
<!-- 或者可以写成 -->
<component-tag-name bind:myevent="onMyEvent" />

此地我们需求设置的触及事件有,输入框的输入事件以及输入框的承认事件。通过
trigger伊芙nt 方法钦赐事件名以及事件触发事件参数

 /**
   * 组件的方法列表
   */
   methods: {
     inputListener: function (e) {
        var value = e.detail.value;
        var cursor = e.detail.cursor;
        if (value === null || value === undefined || value.length === 0) {
          this.setData({
             isClearShow: false
          });
        } else {
          this.setData({
             isClearShow: true
          });
        }
        var detail = {
          value: value,
          cursor: cursor
        };
        this.triggerEvent('inputListener', detail);
     },
     inputConfirm: function (e) {
        var value = e.detail.value;
        var detail = {
          value: value
        }
        this.triggerEvent('inputConfirm', detail);
     },
     clearTap: function () {
        this.setData({
          isClearShow: false,
          inputValue: ''
        });
     }
   }

以上就已经完成了那个可清除input组件的自定义开荒了。将来来看怎么选拔这些组件。

第三在急需选用此组件的页面.json文件中设置usingComponents属性来引进那一个自定义组件

   "usingComponents": {
     //这里是设置的组价标签名称以及组件地址
     "clearInput": "../../components/clearInput/clearInput"
   }

下一场,大家就能够在页面中引用那么些自定义组件了,引用的主意极其轻松,通过大家在上一步设置的标具名称就能够引用了。

<clearInput inputHint='搜索订单' icon-class='common_search_img' input-class='common_search_input' confirmType='search' bind:inputListener='inputListener' bind:inputConfirm='searchEvent' />

终极兑现的意义图如下:

图片 6

项目GitHub地址:https://github.com/RaoMeng/TemplateOfHotel

总结

如上所述是小编给我们介绍的微信小程序自定义组件之可祛除的input组件,希望对大家持有扶助,如果大家有别的疑问请给自个儿留言,小编会及时还原我们的。在此也非常感激大家对剧本之家网址的支持!

您或然感兴趣的文章:

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图