4、小程序进阶一

type：字符串类型，表示此次事件的类型；
timeStamp：数字类型，表示事件生成时的时间戳；
traget：对象类型，表示触发事件的组件上的一些属性集合，可能存在冒泡，或者嵌套元素；
currentTarget：对象类型，当前组件的属性集合，可能存在冒泡，或者嵌套元素；
mark：对象类型，表示事件标记的数据；

<!-- pages/page/page.wxml -->
<view id="1" class="outer" bind:tap="EventFunction">
    <view id="2" class="inner"></view>
</view>

/* pages/page/page.wxss */
.outer {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: red;
    width: 300rpx;
    height: 300rpx;
    margin: 10px;
}

.inner {
    background-color: black;
    width: 100rpx;
    height: 100rpx;
}

// pages/page/page.js
Page({
    EventFunction(event) {
        console.log(event.target)
        console.log(event.currentTarget)
    }
})

{id: "2", offsetLeft: 43, offsetTop: 43, dataset: {…}}
{id: "1", offsetLeft: 0, offsetTop: 0, dataset: {…}}

<!-- pages/page/page.wxml -->
<view class="outer" bind:tap="EventFunction" data-number="{{1}}" />

// pages/page/page.js
Page({
    EventFunction(event) {
        console.log(event.target.dataset)
        console.log(event.currentTarget.dataset)
    }
})

# 结果
{number: 1}
{number: 1}

<!-- pages/page/page.wxml -->
<view class="view1" capture-bind:tap="view1CaptureEvent">
    <view class="view2" capture-bind:tap="view2CaptureEvent">
        <view class="view3" capture-bind:tap="view3CaptureEvent"></view>
    </view>
</view>

/* pages/page/page.wxss */
.view1 {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: red;
    width: 600rpx;
    height: 600rpx;
}

.view2 {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: blue;
    width: 400rpx;
    height: 400rpx;
}

.view3 {
    background-color: green;
    width: 200rpx;
    height: 200rpx;
}

// pages/page/page.js
Page({
    view1CaptureEvent() {
        console.log('view1CaptureEvent')
    },
    view2CaptureEvent() {
        console.log('view2CaptureEvent')
    },
    view3CaptureEvent() {
        console.log('view3CaptureEvent')
    }
})

view1CaptureEvent
view2CaptureEvent
view3CaptureEvent

<!-- pages/page/page.wxml -->
<view class="view1" bind:tap="view1CaptureEvent">
    <view class="view2" bind:tap="view2CaptureEvent">
        <view class="view3" bind:tap="view3CaptureEvent"></view>
    </view>
</view>

/* pages/page/page.wxss */
.view1 {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: red;
    width: 600rpx;
    height: 600rpx;
}

.view2 {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: blue;
    width: 400rpx;
    height: 400rpx;
}

.view3 {
    background-color: green;
    width: 200rpx;
    height: 200rpx;
}

// pages/page/page.js
Page({
    view1CaptureEvent() {
        console.log('view1CaptureEvent')
    },
    view2CaptureEvent() {
        console.log('view2CaptureEvent')
    },
    view3CaptureEvent() {
        console.log('view3CaptureEvent')
    }
})

view3CaptureEvent
view2CaptureEvent
view1CaptureEvent

<!-- pages/page/page.wxml -->
<!-- 阻止事件冒泡 -->
<view class="view1" bind:tap="view1CaptureEvent">
    <view class="view2" catch:tap="view2CaptureEvent">
        <view class="view3" bind:tap="view3CaptureEvent"></view>
    </view>
</view>

<!-- pages/page/page.wxml -->
<!-- 阻止事件捕获 -->
<view class="view1" capture-bind:tap="view1CaptureEvent">
    <view class="view2" capture-catch:tap="view2CaptureEvent">
        <view class="view3" capture-bind:tap="view3CaptureEvent"></view>
    </view>
</view>

[cce@doorta ~]# tree /usr/local/Project/wechat
├── app.js
├── app.json
├── app.wxss
├── components
│   └── section-info # section-info组件
│       ├── section-info.js
│       ├── section-info.json
│       ├── section-info.wxml
│       └── section-info.wxss
├── pages
│   └── index
│       ├── index.js
│       ├── index.json
│       ├── index.wxml
│       └── index.wxss
├── project.config.json
├── project.private.config.json
└── sitemap.json
[cce@doorta ~]# cat /usr/local/Project/wechat/components/section-info/section-info.json 
{
  "component": true, # 设置当前页面为组件
  "usingComponents": {}
}

[cce@doorta ~]#  cat /usr/local/Project/wechat/pages/index/index.json 
{
        "usingComponents": {
                "section-info": "/components/section-info/section-info"
        }
}

<!--pages/index/index.wxml-->
<section-info/>

[cce@doorta ~]# cat /usr/local/Project/wechat/app.json 
{
  "pages": [
    "pages/index/index"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle": "black",
    "enablePullDownRefresh": true
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json",
  "usingComponents": { # 全局注册
                "section-info": "/components/section-info/section-info"
        }
}

isolated：默认值，表示启用隔离，自自定义组件内外，使用class指定的样式将不会相互影响；
apply-shared：表示页面的wxss样式将影响自定义组件，但自定义组件中的wxss中指定的样式将不会影响页面；
shared：表示页面的wxss样式将影响自定义组件，同时自定义组件的wxss样式也将影响页面；

created：组件被创建，可以用来做网络请求初始化数据等；
attached：组件被添加到组件树当中，可以获取DOM信息；
ready：当组件在是涂层布局完成之后执行；
moved：当组件实例被移动到节点树另一个位置时执行；
detached：组件从组件树当中移除，可以做一些垃圾回收操作；
error：当组件方法抛出异常时执行；

hide：组件所在页面被展示时执行；
show：组件所在页面被隐藏时执行；
resize：组件所在页面尺寸发生变化时执行

properties：定义组件通信数据；
data：定时页面数据；
methods：自定义方法；
options：额外的配置选项；
externalClasses：引用外部样式；
observers：属性和数据监听；
pageLifetunes：组件在页面时的生命周期；
lefetimes：组件自身的生命周期；

<!--components/section-info/section-info.wxml-->
<text>{{title}}</text>

// components/section-info/section-info.js
Component({
  properties: {
    title: {
      type: String,
      value: "title默认值"
    }
  }
})

<!--pages/index/index.wxml-->
<section-info title="页面传递过来的title值"/>

<!--components/section-info/section-info.wxml-->
<button size="mini" type="primary" bind:tap="btnclick">触发事件</button>
// components/section-info/section-info.js
Component({
  methods: {
    btnclick() {
      this.triggerEvent("custom_click")
    }
  }
})

<!--pages/index/index.wxml-->
<section-info title="页面传递过来的title值" bind:custom_click="click"/>
// pages/index/index.js
Page({
  click(){
    console.log(1)
  }
})

// components/section-info/section-info.js
Component({
  methods: {
    btnclick() {
      this.triggerEvent("custom_click",{"name":"cce"})
    }
  }
})


// pages/index/index.js
Page({
  click(e){
    console.log(e.detail)
  }
})
# 结果如下
{name: "cce"}

<!--pages/index/index.wxml-->
<view>
    <section_info>
        <button size="mini" type="primary">触发事件</button>
    </section_info>
</view>
{
    "usingComponents": {
        "section_info": "/components/section-info/section-info"
    }
}

<!--components/section-info/section-info.wxml-->
<view>
    <slot></slot>
</view>

<!--components/section-info/section-info.wxml-->
<view>
    <slot name="s1"></slot>
    <slot name="s2"></slot>
</view>
// components/section-info/section-info.js
Component({
  options: {
    multipleSlots: true
  }
})

<!--pages/index/index.wxml-->
<view>
    <section_info>
        <button slot="s1" size="mini" type="primary">插槽1</button>
        <button slot="s2" size="mini" type="primary">插槽2</button>
    </section_info>
</view>