微信小程序31~40

1.事件绑定和事件对象

小程序中绑定事件没有on 方式，也没有click,小程序中可以用bind方法，click事件也需要用tap事件来进行代替。
绑定事件分为两种：

1. bind:事件名，eg:

<view bind:tap="fnName"><view/>

2. bind事件名，eg:

<view bindtap="fnName"><view/>

事件处理函数需要写到.js文件中，在.js文件中需要调用小程序提供的Page方法来注册小程序的页面，可以直接在Page方法中创建事件处理函数。

type的三个属性可以改变按钮的样式：

1. primary 绿色底按钮
<button type="primary">绑定事件</button>
2. warn红色按钮
<button type="warn">绑定事件</button>
3. default绿色字按钮
<button type="default">绑定事件</button>

小按钮
<button type="primary" size="mini">绑定事件</button>

在小程序中，input输入框默认没有边框，需要自己添加样式

wxml页面
<input type="text" bindinput="getInputVal"/>
Page页面
getInputVal (event) {
        console.log(event);
    }
getInputVal (event) {
        console.log(event.detail.value);

2.事件的分类和组织事件冒泡

事件分为冒泡事件和非冒泡事件
冒泡事件：一个组件的事件被触发后，该事件会向父节点传递

<view class="catch" bind:tap="parentHandler">
	<button bind:tap="btnHandler">按钮</button>
</view>

非冒泡事件：一个组件的事件被触发后，该事件不会向父节点传递

<view class="catch" bind:tap="parentHandler">
<button catch:tap="btnHandler">按钮</button>
</view>

使用bind绑定的事件，会触发事件冒泡，如果想阻止，可以用catch来绑定事件。

3.事件传参-data-*自定义数据

事件传参：在触发事件时，将一些数据作为参数传递给事件处理函数的过程就是。
在组件上通过data-*的方式定义需要传递的数据，*是自定义的数据

<view data-id="100" bindtap="handler"/>

然后通过事件对象进行获取自定义数据

<button bind:tap="btnHandler" data-id="1" data-name="tom">按钮</button>
//currentTarget事件绑定者，即那个组件绑定了当前事件处理函数
//target事件触发者，即那个组件触发了当前事件处理函数
//currentTarget和target都是按钮，因为是按钮绑定的事件处理函数，同时触发，用谁获取数据都行
 btnHandler (event) {
        console.log(event.currentTarget.dataset.id);
        console.log(event.target.dataset.name);
    },

<view bind:tap="parentHandler" data-ppid="1" data-ppname="tom">
    <button data-id="1" data-name="tom">按钮</button>
</view>
//currentTarget事件绑定者:view
//target事件触发者:button
//想要获取view的数据用currentTarget，想要获取button的数据用target
parentHandler (event) {
        console.log(event);
    }

4.事件传参-mark自定义数据

mark用于识别具体触发事件的target节点，还可以承载一些自定义数据。

<view mark:id="100" bindtap="handler"/>

<view bind:tap="parentHandler" mark:ppid="1" mark:ppname="tom">
    <button mark:id="1" mark:name="tom">按钮</button>
</view>
//可以获取到触发事件的节点和父节点上所有的mark数据
parentHandler (event) {
        console.log(event);
    }

5.wxml语法-声明和绑定数据

小程序页面中使用的数据要在Page()方法的data对象中声明定义
数据声明好后，在WXML使用Mustache语法（{{}}）将变量包起来，从而将数据绑定
在{{ }}内部可以做一些简单的运算，如：算数运算、三元运算、逻辑判断
在{{ }}语法中，只能写表达式，不能写语句，也不能调用js相关的方法。

<view>{{ school }} </view>
<view>{{ obj.name }} </view>

<!-- 绑定属性值 ,要动态绑定一个变量时，属性值要用双大括号包裹-->
<view id="{{id}} ">绑定属性值</view>
<!-- 如果属性值是布尔值，也要用双大括号包裹 -->
<checkbox value="{{ isCheck }}"/>

6.setData()修改数据

小程序中修改数据不推荐赋值，赋值无法改变页面数据
要通过setData()进行修改，setData()方法接收对象作为参数，key是需要修改的数据，value是最新的值。
setData()方法有两个作用：

1. 更新数据
2. 驱动视图更新

data: {
        num: 1
    }, 
    updatenum () {
        console.log(this.data.num);
        this.setData({
            //key:是要更新的数据
            //value:是最新的值
            num:this.data.num + 1
        })
    }

7.setData()修改对象类型的数据

将key写成数据路径的方式a.b.c
‘userInfo.name’: ‘tom’,

<view>{{ userInfo.name }} </view>
<view>{{ userInfo.age }} </view>
<button bind:tap="updateUserInfo">修改对象类型数据</button>

 updateUserInfo () {
        // 新增单个或多个属性
        //修改同理
        this.setData({
            'userInfo.name': 'tom',
            'userInfo.age': '18'
        })
    }
    

优化：用ES6提供的展开运算符或者 Object.assign()

ES6提供的展开运算符
    const userInfo = {
        ...this.data.userInfo,
        name: 'jerry',
        age: 10
    },
    this.setData({
        userInfo
    })  

Object.assign()方法
const userInfo = Object.assign(this.data.userInfo, {name: 'jerry'}, { age: 18 })
    this.setData({
        userInfo
    })

删除对象类型的数据

//删除单个属性
    delete this.data.userInfo.age
    //此时数据已经更新
    this.setData({
        //要驱动视图更新
        userInfo: this.data.userInfo
    })

//删除多个属性
//用rest剩余参数
    const { age,test, ...rest } = this.data.userInfo

    this.setData({
        userInfo: rest
    })

8.修改数组类型数据

更改list，新增数组元素

第一种方法
updateList () {
        this.data.list.push(4)
        this.setData({
            list: this.data.list
        })
    }
    第二种方法
     updateList () {
        const newList = this.data.list.concat(4)
        this.setData({
            list: newList
        })
    }
    第三种方法
updateList () {
        const newList = [...this.data.list, 4]
        this.setData({
            list: newList
        })
    }

修改数组元素

this.setData({
//将数组的第一个元素中的name改为jerry
         'list[0].name': 'jerry'
     })

删除数组元素

第一种
this.data.list.splice(1,1)
    this.setData({
        list: this.data.list
    })
    第二种
    const newList = this.data.list.filter(item => item !== 2)
    this.setData({
        list: newList
    })

9.建议双向数据绑定

数据能影响页面，页面也能影响数据

<input model:value="{{value}}" />

注意事项：
只能是单一字段绑定，不能拼接
不能写data路径，也不支持数组和对象

10.列表渲染-基本使用

指通过循环遍历一个数组或对象，将其中的每个元素渲染到页面上。
在组件上用wx:for绑定数组或对象，重复渲染当前组件
每一项的变量名默认为item，下表变量名默认为index
要加上wx:key属性，一两种形式提供：

1. 字符串
2. 保留关键字*this
   
   注意事项：
   如果不加wx:key会报错
   在给wx:key加属性值时，不用双大括号语法，直接用遍历的array中item的某个属性

<view wx:for="{{ fruitList }}" wx:key="id">{{ item.name }} </view>

<view wx:for="{{ fruitList }}" wx:key="index">{{ item.name }} </view>

<view wx:for="{{ fruitList }}" wx:key="*this">{{ item.name }} </view>