小程序：事件和渲染

问题导向

微信小程序的显示与隐藏？有哪些生命周期？事件如何处理？如何渲染数据？

如果你都有了答案，可以忽略本文章，或去小程序学习地图寻找更多答案

显示与隐藏

有两种方式控制组件的显示与隐藏：
1.wx:if
2.hidden

1.wx:if
true显示，false隐藏

如果isShow为true，则显示hello，否则显示world
<view>
	<view wx:if="{{isShow}}">hello</view>
	<view wx:else>world</view>
<view>


2.hidden
true隐藏，false显示

如果isShow为true，则显示，否则不显示
<view hidden="{{isShow}}" >
	<view>hello world</view>
<view>
 
 
注意：
hidden不会触发组件的detached，wx:if可以触发

生命周期

//页面声明周期
onLaunch  //程序启动
onLoad    //监听页面显示加载，只执行一次，页面切换也不执行了
onReady   //监听页面初次渲染完成
onShow    //监听页面显示，执行多次，页面切换会再次执行
onHide    //监听页面隐藏
onUnload  //监听页面卸载
onPullDownRefresh  //页面相关事件处理函数--监听用户下拉动作
onReachBottom //页面上拉触底事件的处理函数
onShareAppMessage //用户点击右上角分享


//组件声明周期
created   //组件被创建
attached  //组件进入节点
ready     //组件渲染完成 
detached  //组件被销毁
error     //组件方法错误时


//组件所在页面的生命周期
pageLifetimes：{
    show     //组件展示
	hide     //组件消失
	resize   //组件重置
}

事件绑定

关键字类型：
bind：不阻止冒泡
catch：阻止冒泡

关键字:事件名
bind:tap
bind:change
bind:input

原生事件
<view bind:tap='handleClick' 或 bindtap='handleClick'>
	<view>hello world</view>
<view>


自定义事件：由子组件向父组件传递事件或数据时所接收使用的事件
如：
1.子组件传递事件和数据：通过this.triggerEvent传递事件和数据
sendEventAndData(){
	this.triggerEvent('onRemoreBlog', {
      bId: this.properties.bId
    })
}

2.页面在使用组件时,然后在js文件中的handleSendEventAndData处理该事件
<c-like bind:onRemoreBlog="handleOnRemoreBlog" />

3.在页面中的处理事件中，可以从事件对象中获取子组件传递过来的数据
handleOnRemoreBlog(e){
	const bid = e.detail.bId
	删除逻辑...
}​

列表渲染

使用wx:for="{{要循环渲染的数据}}"

wx:key的作用：绑定固定值，使其不会发生改变
wx:for-item的作用：修改默认的item名字，默认渲染的每一项的名字是item，可以任意修改为其他名字

如何使用：
操作静态数组：使用index，wx:key=“index”
操作动态数组：wx:key="{{*this}}"，指向当前的值，保留自身特征，如使用随机排序时，复选框保留被选
操作动态对象：使用id，独一无二的值，wx:key=“id”

<view class="container">
    <block wx:for="{{todoList}}" wx:key="index" wx:for-item="data">
        <v-todoItem title={{data.title}}/>
    </block>
</view>

学习更多

小程序学习地图