事件系统、wxml语法和生命周期小程序笔记

 事件系统

事件绑定和事件对象

小程序中绑定事件与在网页开发中绑定事件几乎一致，只不过在小程序中不能通过on的方式绑定事件，也没有click等事件，小程序中绑定事件使用bind方法，click事件需要使用tap事件来进行代替。

绑定事件的两种方式：

1. blind事件名，bind后面要跟冒号，冒号后面要跟事件名，例如：<view bind:tap="fnName"></view>

2. blind事件名，bind后面直接上事件名，例如：<view bindtap="fnName"></view>

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

 事件分类以及阻止事件冒泡

冒泡事件：当一个组件的事件被触发后，该事件会向父节点传递，若此时父节点也绑定了一个事件，父节点事件也会被触发 

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

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

事件传参

data-*自定义数据

微信小程序提供自定义属性，即data-*，若组件上触发的事件，会发送给事件处理函数。 也就是说data-*自定义的内容可以在事件执行的时候获取出来。然后用一个变量接收，并与需要跳转的地址进行拼接，实现明文传参。

事件传参：在触发事件时，将一些数据作为参数传递给事件处理函数的过程

在微信小程序中，常会在组件上添加一些自定义数据，然后再事件处理函数中获取这些自定义数据，从而完成业务逻辑的开发

在组件上通过data-*的方式定义需要传递的数据，其中*是自定义的属性，

例如：<view data-id="100" bindtap="handler"/>然后通过事件对象进行获取自定义数据

<!-- 若需要进行事件传参，需要在组件上通过 data-方式传递数据 -->

<button bindtap="btnHandler" data-name="tom">按钮</button>

若想接收传递数据，需要通过事件对象:

currentTarget 事件绑定者，也就是指：哪个组件绑定了当前事件处理函数

target 事件触发者，也就是指：哪个组件触发了当前事件处理函数

currentTarget 和 target两者都是指按钮，因为是按钮绑定的事件处理函数同时点击按钮触发事件处理函数，这时候通过谁来获取数据都可以

target就是你触摸的组件，currentTarget就是你当前事件绑定的组件(view)
点击内部的按钮时，点击事件以冒泡的方式向外扩散，也会触发外层view的tap事件处理函数。

注意事项：长的那个数据传参点击范围大（传参的参数也是大范围的），短的那个传参是精准定位到对应的事件的（就是范围小固定的）

1.在传递参数时，若自定义属性是多个单词，单词与单词之间直接使用中划线 - 进行连接，在事件对象中会转换为小驼峰写法

2.在传递参数时，若自定义属性是多个单词，单词如果使用小驼峰写法，在事件对象中会被转化为全部小写

mark自定义数据

Mark 是一种自定义属性，可以在组件上添加，用于来识别具体触发事件的 target 节点，同时 mark 还可以用于承载一些自定义数据

使用方式：在组件上使用mark自定义属性的方式将数据传递给事件处理函数，

例如：<view mark:id="100" bindtap="Handler"/> 然后通过事件对象接受传递数

Mark 和 data-*区别：

事件对象如果是data-*传递的参数：currentTarget获取的事件绑定者本身的数据

                                                         target获取的事件触发者绑定的数据

事件对象如果是mark 传递的参数：获取的是事件触发者到绑定者身上所有的数据

wxml语法

声明和绑定数据

声明位置：小程序页面中使用的数据均在Page（）方法的data对象中进行声明定义

声明好之后：在WXML中使用Mustache语法（双大括号{{}}）将变量包起来，从而将数据绑定

注意事项：在{{}}语法中，只能写表达式，不能写语句，也不能写js相关方法

setData()

修改数据

通过直接赋值的方式修改数据能够修改，但结果无法呈现在页面上

调用setData()方法进行修改，setData()方法接受对象作为参数，key是需要修改数据，value是最新值

作用：1.更新数据

           2.驱动视图（页面）更新

修改对象类型数据

1.新增

  若给对象新增属性，可以将key写成数据路径方式 a.b.c

2.修改

若新增和修改数据量都比较小，可以使用数据路径

若修改数据很多，每次写路径较为麻烦，可以使用 Es6 提供的展开运算符 和 Object.assign()

Es6 提供的展开运算符：通过展开运算符能够将对象中的属性复制给另一个对象，后面的属性会覆盖前面的属性

Object.assign()将多个对象合并成一个对象，合并时从后往前进行合并的

const userInfo = Object.assign(this.data.userInfo,{name : ‘Jerry’}， {age:18})
this.setData({

     userInfo       
})

3.删除

1)删除单个属性

//删除age属性，既从数据删除，也要从页面删除

delete this.data.userInfo.age
//打印出this.data.uerInfo
    console.log(this.data.uerInfo)
this.setData({
    //this.data.userInfo 赋值给 userInfo
    userInfo:this.data.userInfo 

})

代码删除age

2)删除多个属性 rest 剩余参数

const{ age, test, ...rest}= this.data.userInfo

this.setData({


    userInfo:rest
})

修改数组类型数据

例如：list :[1 , 2, 3]

1.新增数组元素

如果直接使用 push ，可以更新 data ,但是不能更新页面中的数据

1）

this.data.list.push(4)
this.setData({
     //list赋值给list，驱动视图更新
     list:this.data.list
})

2）

const newList = this.data.list.concat(4)
this.setData({
     list:newList
})

3)

//list的每一项赋值给外层数组
const newList = [...this.data.list ， 4]
this.setData({

    list:newList
})

2.修改数组元素

list :[{ id:1, name: 'tom'}]

this.setData({

    //使用数据路径进行修改
    ‘list[1]’:6
    'list[0].name':'jerry'
})

3.删除数组元素

1)

this.setData({
   
    list: this.data.list
})

2)

//把在itme里不等于2的筛选出来,把1，3组成一个新数组
const newList=this.data.list.filter(item => itme !==2)
this.satData ({

     list:newList
})

简易双向数据绑定

在wxml中，普通属性的绑定是单向的：数据能改变页面，但是在页面输入框中输入数据并不会改变本身数据

//单向绑定
<input type="text" value="{{  value  }}"/>

若希望用户输入数据的同时改变data中

的数据，可以借助简易双向绑定机制，在对应属性之前添加modet前缀：<input model : value="{{value]}">

​
//双向绑定
<input type="text" model:value="{{ value }}"/>

​

注意事项：1.只能是一个单一字段的绑定

                  2.尚不能写data路径，也就是不支持数组和对象，

例如：错误用法<input model: value="{{ a,b }}"/>

如果需要获取复选框的选中效果，需要给 checked 添加 model:

列表渲染

基本使用

列表渲染指通过循环遍历一个数组或对象，将其中的每一个元素渲染到页面上

在组件上使用 wx:for 属性绑定一个数组或对象，即可使用每一项数据重复渲染当前组件

每一项的变量名默认为 itme ,下标（索引）变量名默认为 index

进行列表渲染使用 wx:for 属性，属性值用双大括号进行包裹，每一项的变量名默认是 itme,每一项的下标的变量名默认是 Index

渲染数组和对象的区别：

如果渲染的是数组，itme:数组的每一项 ，index：下标

如果渲染的是对象，itme: 对象属性的值，index: 对象属性

在使用 wx:for 进行遍历时， 建议加上 wx:key属性 ，wx:key 提升性能，wx:key的值以两种形式提供：wx:key不需要使用双大括号进行包裹，直接写遍历的数组中 itme 的属性

1.字符串：代表需要遍历的 arry中 itme的某个属性，该属性的值需要是列表中唯一的字符串数字，且不能动态改变

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

2.保留关键字 *this 代表在 for 循环中的 itme本身，当 itme 本身是一个唯一的字符串或者数字时可以使用

<view wx:for="{{ numList }}" wx:key="this">{{ itme }}<view/>

进阶用法

1.对默认的变量名和下标进行修改，使用wx:for-itme，wx:for-index

wx:for-itme 指定数组当前元素的变量名

wx:for-index  指定数组当前的下标的变量名

2. 将wx:for 用在<block/>标签上， 以渲染一个包含多个节点的结构块

  <block/> 并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性

 <block/>标签在 wxml 中可以用组织代码，支持列表渲染，条件渲染等

条件渲染

控制页面结构的展示和隐藏，有两种方式：

1.使用 wx:if, wx:elif , wx:else属性值

wx:elif , wx:else不能单独使用，在使用时必须结合 wx:if 使用

使用了wx:if  的属性组不能打断，组件必须连贯

2.使用 hidden 属性

wx:if 与 hidden的区别：

1.wx:if ：当条件为true 时将结构展示出来，否则结构会破坏不会进行展示，通过移除/新增节点的方式来实现

2.hidden ：当条件为true 时将结构隐藏，否则结构会进行展示，通过display样式属性来实现

生命周期

小程序运行机制

小程序启动：冷启动，热启动

冷启动：用户首次使用小程序或小程序销毁后被用户再次打开，此时小程序要重新加载启动

热启动：用户已经打开过小程序，在一定时间内又打开小程序，从后台状态进入前台状态

前台：小程序启动后，展示给用户的界面，此时处于前台状态

后台：小程序没有真正被关闭，进入后台状态

挂起：小程序进入后台5秒，微信停止小程序JS 线程执行，小程序进入挂起状态，开发者使用后台播放音乐能力时，在后台持续工作，不会进入挂起状态

销毁：小程序被挂起30分钟以后，指小程序被终止运行

小程序更新机制

启动时同步更新/启动时异步更新

启动时同步更新：微信运行时，会定期检查最近使用的小程序是否有更新。若有更新，下次小程序启动时会同步更新，更新到最新版本后再打开小程序。若用户长时间未使用小程序，会强制同步检查版本更新

启动异步更新：在启动时没有发现更新，小程序每次冷启动时，都会异步检查是否有更新版本。若发现由新版本，将会异步下载新版本的代码包，将新版本的小程序在下一次冷启动进行使用，当前访问使用的依然是本地旧版本代码