微信小程序初体验(三)

160 阅读2分钟

这是我参与11月更文挑战的第4天,活动详情查看:2021最后一次更文挑战

自定义组件

  • 在微信开发工具中右键新建Component 新建组件
  • 在父页面中的json文件中usingComponents属性中配置子组件名称和路径
  • 组件中的事件定义存在methods中,页面的事件定义在和data同层级下

父页面向子组件传递数据

  • 页面通过自定义属性传递数据给子组件
  • 子组件通过在properties属性中接受页面传递的数据,数据格式为
//接收从页面传递过来的数据
properties:{
   tabs:{
      type:Array,//要接收的数据类型
      value:[]//默认值
   }
}

子组件向父页面传递数据

  • this.triggerEvent("itemChange",{value})
  • 父页面中子组件标签上定义事件binditemChange 在参数中获得传递过来的数据
//子组件
 this.triggerEvent("itemChange",{value})
<!--父页面-->
<Tab tabs="{{tabs}}" binditemChange="bindItemChange"></Tab>
//父页面js
 bindItemChange:function(e){
 console.log(e.detail.value)
 }

应用生命周期

app.js中,整个应用的生命周期

  1. onLaunch 应用第一次启动就会触发的事件 使用场景:在应用第一次启动的时候,获取用户的个人信息

  2. onShow 应用被用户看到 使用场景:对应用的数据或者页面效果重置

  3. onHide 应用被隐藏 使用场景:暂停或者清除定时器

  4. onError 应用发生错误的时候,会触发 使用场景:在应用发生错误的时候,收集用户的错误信息,通过异步请求,将错误信息发送到后台去

  5. onPageNotFound 应用第一次启动的时候,如果找不到第一个入口页面就会触发 使用场景:如果页面不存在,通过j s方式重新跳转到一个页面

页面生命周期

页面初始化onLoad

一般用来发送异步请求来初始化页面数据

onShow

onReady

页面渲染完成

onHide

页面隐藏

onUnload

页面卸载,例如链接跳转,open-type为关闭当前页面的值时

用户下拉onPullDownRefresh

监听用户下拉动作 使用场景:页面数据,效果刷新等 监听该事件的前提是页面的配置中enablePullDownRefresh要设置为true

页面触底onReachBottom

页面上拉触底事件 使用场景:上拉加载下一页数据等

右上角分享onShareAppMessage

用户点击右上角分享时触发

页面滚动onPageScoll

页面滚动时就可以触发

页面尺寸变化onResize

页面的尺寸发生变化时触发 使用场景:例如横屏竖屏的时候

点击自己的tab item 事件onTabItemTab

当前页面时tab页面,点击自己tab item时触发