参数传递

只能用data-*方式进行传递

<button bindtap="bindhandler" data-info="{{2}}">aaa</button>

获取
事件处理函数中

bindhandler(e){
    console.log(e.target.dataset.info)
}

注意：不可以通过bindhandler(2)这种方式进行传参

data值改变

data:{
    count:1
}

bindtap2(e){
    this.setData({
        count: this.data.count + e.target.dataset.info
    })
}

文本框内容改变事件
内容改变后调用方法

<button bindinput="bindhandler" data-info="{{2}}">aaa</button>

rpx
把屏幕设备宽度等分为750分，运行时自动将rpx的样式单位换算成对应的像素单位来渲染

组件

组件和页面的区别
组件的.json文件中需要声明"component":true属性
组件的.js文件中调用的是Component()函数
组件的事件处理函数需要定义methods节点中

组件样式隔离
app.wxss中的全局样式对组件无效
只有class下选择去胡hi有样式隔离效果，其他选择器不受样式隔离的影响

styleIsolation

isolated(隔离)、apply-shared(页面影响组件)、shared(互相影响)

纯数据字段

Component的options节点中，指定puredataPattren为一个正则表达式，符合该表达式的字段将成为i纯数据字段（不用于页面上渲染的字段，助于提升页面性能）

生命周期函数

1）组件生命周期

created

组件钢创建好的时候，此时还不能调用setData，一般给组件的this添加一些自定义的属性字段

attached

大多数初始化工作可在这个时机进行

dettached

退出一个页面时触发，适合做一些清理工作

2）声明方式

在lifetimes属性里面声明

lifetimes:{
    attached(){},
    dettached(){}
}

监听页面生命周期

pageLifetimes:{
    show(){},
    hidee(){}
}

组件多插槽

1）定义

在js文件中

component:{
    option:{
        multipleSlots: true
    }
}

wxml中

<view>
    <slot name="before"></slot>
    <slot name="after"></slot>
</view>

2）使用

<test-component>
    <view name="before"></view>
    <view name="after"></view>
</test-component>

3）组件传值

属性绑定、事件绑定、获取组件属性

分包

目录结构

|--app.js
|--app.json
|--app.wxml
|--pages
|--package1
|--package2
|--utils

在app.json中配置

{
"pages":[]
"subpackages":[
    {
    "root":"package1",
    "pages":[]
    },
    {
    "root":"package2",
    "pages":[]
    }
]
}

独立分包

{
"pages":[]
"subpackages":[
    {
    "root":"package1",
    "pages":[]
    },
    {
    "root":"package2",
    "pages":[],
    "indipendent":true//不依赖主包单独运行
    }
]
}