鱼C论坛

 找回密码
 立即注册
查看: 2424|回复: 5

[庖丁解牛] 009 ∞ 生命周期函数和页面事件处理函数

[复制链接]
发表于 2018-5-12 14:03:31 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能^_^

您需要 登录 才可以下载或查看,没有账号?立即注册

x
本帖最后由 不二如是 于 2018-5-12 14:18 编辑


                               
登录/注册后可看大图


上一讲我们介绍了page()的玩法,本次看一看提到的生命周期函数

生命周期顾名思义,从打开小程序到用户最终关上小程序的过程就是一个使用生命周期。


                               
登录/注册后可看大图


可以细化为:
onLoad (页面加载): 一个页面只会调用一次,可以在 onLoad 中获取打开当前页面所调用的 query 参数。

onShow (页面显示): 每次打开页面都会调用一次。

onReady (页面初次渲染完成): 一个页面只会调用一次,代表页面已经准备妥当,可以和视图层进行交互。对界面的设置如wx.setNavigationBarTitle请在onReady之后设置。

onHide (页面隐藏): 当navigateTo或底部tab切换时调用。

onUnload (页面卸载): 当redirectTo或navigateBack的时候调用


生命周期的调用以及页面的路由方式,本次先不介绍,后续再来~

主要介绍一下onLoad参数:
类型         说明
Object         其他页面打开当前页面所调用的 query 参数






页面事件处理函数

页面事件处理,顾名思义,发生在小程序页中由用户产生的操作行为。

像下拉刷新,上拉触顶,页面滚动...都可以是。

onPullDownRefresh,下拉刷新:
监听用户下拉刷新事件。

需要在app.json的window选项中或页面配置中开启enablePullDownRefresh。

当处理完数据刷新后,wx.stopPullDownRefresh可以停止当前页面的下拉刷新。


onReachBottom,上拉触底:
监听用户上拉触底事件。

可以在app.json的window选项中或页面配置中设置触发距离onReachBottomDistance。

在触发距离内滑动期间,本事件只会被触发一次。


onPageScroll,页面滚动 :
监听用户滑动页面事件。


参数为 Object,包含以下字段:
字段         类型         说明
scrollTop         Number         页面在垂直方向已滚动的距离(单位px)


onShareAppMessage,用户转发 :
只有定义了此事件处理函数,右上角菜单才会显示“转发”按钮

用户点击转发按钮的时候会调用

此事件需要 return 一个 Object,用于自定义转发内容


自定义转发字段 :
字段        说明        默认值  
title        转发标题        当前小程序名称  
path        转发路径        当前页面 path ,必须是以 / 开头的完整路径  


看完上面这些方法,举一个例子:
当用户在转发时,小程序标题标题为“我爱鱼C”,路径为"/page/user?id=666"


可以在index.js中添加:
onShareAppMessage: function () {
    return {
      title: '我爱鱼C',
      path: '/page/user?id=666'
    }
  }
Snip20180512_130.png





课后作业


1、下列选项中符合“一个页面只会调用一次”的要求的选项是?
a.onShow  b.onReady  c.onLoad  d.onShut

2、补充代码:
Page({
?  : function () {
    return {
      title: '自定义转发标题',
     ? : '/page/user?id=333'
    ?
  }

})



答案:
游客,如果您要查看本帖隐藏内容请回复





如果有收获,别忘了评分


                               
登录/注册后可看大图


这位鱼油,如果喜欢小程序,请订阅 专辑☞传送门)(不喜欢更要订阅



                               
登录/注册后可看大图

本帖被以下淘专辑推荐:

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2018-7-16 15:50:59 | 显示全部楼层
答案
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2020-7-2 12:27:55 | 显示全部楼层
c
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2021-12-5 13:00:45 | 显示全部楼层
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2022-3-30 16:15:01 | 显示全部楼层
c
onShareAppMessage  path  }
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2023-3-11 22:13:25 | 显示全部楼层
111
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-11-22 02:24

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表