微信小程序 笔记11 input组件 自定义组件

目录

input组件

type属性

参数

自定义组件

创建组件

使用组件

给自定义组件添加属性

slot

事件

绑定事件

自定义组件事件

生命周期

监听组件所在页面的生命周期

---

input组件

type属性

type属性有number(数字)，text，idcard(身份证)，digit(带小数点数字)

参数

confirm-type	设置键盘右下角按钮的文字，仅在type='text'时生效。例如：在键盘右下角加一个发送send，前往go，next下一个，done完成，search搜索
cursor-spacing	在输入框被键盘挡住的时候，指定光标与键盘的距离，单位px或rpx。取 input 距离底部 的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离。如果没有指定这个值，并且输 入框被挡到了，那么距离键盘的距离为0。(就是说点开input框之后，键盘和input框之间的距离)
auto-focus	自动聚焦，拉起键盘
confirm-hold	点击键盘右下角按钮时是否保持键盘不收起。默认值false，即点击右下角的东西，键盘收起。
bindinput	键盘输入时触发，处理函数可以直接 return 一个字符串，将替换输入框的内容。
bindfocus	输入框聚焦时触发

自定义组件

创建组件

1. 自定义一个components(自己起名)文件夹，用来存放所有自定义的组件。
2. 再针对每一个组件创建一个文件夹，用来存放这个组件相关的文件。比如 mybox 这个组件，那么 可以创建一个 mybox 的一个文件夹。
3. 在指定组件的文件夹中 右键->新建Component 创建组件。这样创建的目的是在 json 文件中添 加 "component": true ，将其申明为一个组件。

wxml中中做好组件的节点布局，加入：

网络课堂

css省略

使用组件

在json文件中，加入

{
    "usingComponents": {
    "mybox": "/components/mybox/mybox"
}

在wxml中就可以使用

给自定义组件添加属性

在组件的js文件中，在properties中添加属性，添加属性的时候，需要指定两个值，一个是type，代表的是这个属性的类型，一个是value，代表的是这个属性的默认值。示例：

//me.js
Component({
    properties: {
        showInner: {
            type: Boolean,
            value: false
        }
    }
})

然后在 wxml 模板中就可以使用了。

还有另外一种使用data的形式，data中的数据可以渲染到组件的代码中，但是使用data不能作为属性来使用。

slot

在使用小程序内置的组件的时候，比如 view ，我们还可以在 view 中添加其他的组件。这个功能可以通 过 slot 节点来实现。示例代码如下：

 
    网络课堂  
     

以后在使用这个组件的时候，还可以添加自己的节点。示例：
 

  这是index中添加的

以上是添加一个slot，如果想要添加多个 slot ，那么需要在 js 文件中添加一个multipleSlots属性，示例代码如下：

Component({  
    options: {
        multipleSlots: true 
 },  
...

在 wxml 文件中，需要给每一个slot都指定name:

  这是before的组件
  这是after的组件

事件

绑定事件

组件可以直接再外面绑定事件。和普通的一样。

自定义组件事件

 自定义组件事件。直接在组件内绑定事件。并且如果我们想在组件内捕获到事件后，要通知到父组 件，那么可以通过 triggerEvent 方法来触发自定义的事件。
 

然后在组件的 js 文件中，使用以下代码进行捕获和传递给父组件

Component({ 
    method: {   
        onInnerTapEvent: function(event){     
            console.log("组件内监听到了innerTapEvent事件");
            var detail = {} // detail对象，提供给事件监听函数     
            var option = {} // 触发事件的选项    
            this.triggerEvent("customevent",detail,option); 
  } } })

然后在使用组件的地方，需要给自定义事件绑定监听方法： bindcustomevent="onCustomEventEvent"

生命周期

组件的生命周期，指的是组件自身的一些函数，这些函数在特殊的时间点或遇到一些特殊的框架事件时被自动触发。

其中，最重要的生命周期是 created/attached/detached ，包含一个组件实例生命流程的最主要时间点。

1. 组件实例刚刚被创建好时，created生命周期被触发。此时组件数据this.data 就是在Component构造器中定义的数据data。此时还不能调用setData。通常情况下，这个生命周期只应该用于给组件this添加一些自定义属性字段。
2. 在组件完全初始化完毕、进入页面节点树后，attached生命周期被触发。此时，this.data已被初始化为组件的当前值。这个生命周期很有用，绝大多数初始化工作可以在这个时机进行。
3. 在组件离开页面节点树后，detached生命周期被触发。退出一个页面时，如果组件还在页面节点树中，则detached会被触发。

监听组件所在页面的生命周期

还有一些特殊的生命周期，它们并非与组件有很强的关联，但有时组件需要获知，以便组件内部处理。 这样的生命周期称为“组件所在页面的生命周期”，在 pageLifetimes 定义段中定义。

生命周期	描述
show	组件所在的页面被展示时执行
hide	组件所在的页面被隐藏时执行
resize	组件所在的页面尺寸变化时执行