微信小程序开发-小程序生命周期&页面生命周期&与页面相关的事件处理功能&简单的双向绑定&表单组件

1、 小程序生命周期功能

小程序的生命周期功能是app内app（对象）功能用于注册小程序。接受Object参数以指定其小程序的生命周期回调。

小程序生命周期函数的调用顺序为onLaunch>onShow>onHide

1.OnLaunch侦听器小程序初始化

加载小程序时要执行的函数。

启动（）{

//通常，这里会请求获取背景数据

安慰日志（“苹果加载”）；

},

2.onShow Monitor小程序显示

显示小程序时要执行的函数。

显示（）{

安慰日志（“app显示”）；

},

3.OnHide监听器小程序隐藏

隐藏小程序时执行的功能（从前台切换到后台）。

打开隐藏（）{

安慰日志（“隐藏小程序”）；

}

2、 页面的生命周期功能

页面生命周期函数是每次输入/切换到新页面时都会调用的生命周期函数。页面生命周期函数在app.js中调用

1.OnLoad侦听页面加载

onLoad函数侦听页面加载并初始化页面状态数据。一个页面只能调用一次。onLoad函数的参数可以接收为打开当前页面而调用的查询参数。

在当前页面跳转到详细信息页面后，调用查询参数id。

详细信息页面中的onLoad函数可以获取传递的查询参数id。

onLoad:函数（选项）{

//获取传递的参数id

让｛id｝=选项

}

2.首次呈现onReady侦听器页面

当页面首次呈现时触发，页面将只被调用一次，表示页面已准备好与视图层交互。

onReady:函数（）{

安慰日志（“页面的初始渲染完成”）；

}

3.OnShow监控页面显示

每次打开页面时触发。

onShow:函数（）{

安慰日志（'页面显示'）；

}

4.隐藏onHide侦听器页面

当页面隐藏/切换到背景时触发。例如，当navigateTo或底部选项卡切换到其他页面时，小程序切换到后台等。

onHide:函数（）{

安慰日志（'页面隐藏'）；

},

5.OnUnload侦听页面卸载

当页面被卸载（实际关闭）时触发，例如当redirectTo或navigateBack被转移到另一个页面时。

onUnload:函数（）{

安慰日志（'页面卸载'）；

},

3、 页面相关事件处理功能

1.到达底部

当它被拉到底部时，onReachBottom函数将被触发以执行相应的操作。

onReachBottom：函数（）{

//操作

}

2.下拉刷新

注意：下拉刷新在默认情况下处于关闭状态，因此需要在中设置下拉刷新的权限。json文件。

EnablePullDownRefresh：设置是否启用当前页面的下拉刷新。

BackgroundColor：设置窗口的背景色。

BackgroundTextStyle：下拉加载的样式。默认设置为灯光。仅支持暗/亮。

{

“enablePullDownRefresh”：true，

“backgroundColor”：“#d1c2d3”，

“backgroundTextStyle”：“浅”

}

下拉刷新操作具有默认时间。如果要更改默认下拉时间，可以使用计时器。

wx。StopPullDownRefresh（）：设置刷新后停止下拉刷新操作。

onPullDownRefresh:函数（）{

setTimeout（（）=>{

wx.stop下拉刷新（）

}, 1000);

}

3.OnShareAppMessage用户单击右上角进行共享

onShareAppMessage:函数（）{

}

4、 轻松的双向绑定

1.公共属性绑定

在WXML中，公共属性的绑定是单向的。如果用户修改输入框中的值，则this.data。值不会同时更改。

2.易于双向绑定

如果你需要改变这一点。dataValue，您需要使用简单的双向绑定机制。双向绑定意味着一个位置被修改，另一个位置一起被修改。

表单中的数据通过model:value方法以双向方式绑定到js中的数据。

3.双向绑定的表达式限制

双向绑定的表达式限制：① 它只能是单个字段的绑定；② 目前，数据路径不可用。

以下表达式错误：

<输入模型：value=“值为｛｛value｝｝”/>

<输入模型：value=“｛｛a+b｝｝”/>

<输入模型：value=“｛｛a.b｝｝”/>

5、 窗体组件

1.选择器组件

范围：指定数组（指定显示的数据）。

范围键：如果范围数组是对象数组，则需要添加范围键属性以指定选择器中显示的内容（指定对象的属性