技术点:uniapp,小程序:页面组件获取所在页面的实例,重写生命周期

24 篇文章 1 订阅
14 篇文章 0 订阅

使用带来的好处:

  1. 不用一层层传递:页面组件可以直接获取到所在页面的实例上的数据,而不用通过prop一层层传下去,在页面组件所在的层级较深时极其好用
  2. 解耦:页面组件实现某些功能需要借助所在页面的生命周期钩子来进行一些操作的时候,使用该方法可以不用将处理的代码写在所在页面的钩子里,而是直接将代码写在页面组件里。
    例如:视频组件在滑动到某个节点才开始自动播放,就需要所在页面的 onPageScroll钩子里面进行视频处理逻辑,这样复用性极低。而且耦合度比较高,而是用本技巧可以直接在本组件里写逻辑,而不用修改所在页面的代码
  3. 可以实现一些本该实现不了的需求
    例如;一个页面拥有多个分享按钮,每一个按钮都分享不同的东西

实现:

const pages = getCurrentPages()
//    getCurrentPages() 方法用于获取当前页面栈的实例,返回一个由页面实例组成的数组,
//    数组的顺序是由打开的页面依次排序的,也就是说你每跳转一个页面,这个数组就会将那个页面
const page = pages[pages.length-1]
//    数组的最后一个实例,永远都是当前页面,所以可以得到当前页面的实例

此时,page就是当前页面的实例,可以直接使用page.xxx来调用此页面的data里面的属性

重写页面生命周期

此时你就可以来重写页面的生命周期,来让页面的生命周期里混入在这个页面里需要处理的代码
例1: 我现在来实现一个页面多个分享按钮,就需要重写页面的 onShareAppMessage 钩子

//    先使用一个变量来接收组件上本来就有的生命周期钩子
const old = page.onShareAppMessage 
//    重写生命周期
page.onShareAppMessage=function(){
    return {
      title: '自定义分享标题',
      path: '/pages/test/test?id=123'
    }
}

例2: 在页面滚动时需要加一些自己的该组件自己的业务代码

//    先使用一个变量来接收组件上本来就有的生命周期钩子
const old = page.onPageScroll
//    此处要使用function声明函数,不能使用箭头函数,因为如果function声明的函数里可以通过this获取到页面实例
page.onPageScroll=function(e){
	condole.log("我需要插入在页面的生命周期中插入一些数据")
//    执行所在页面的生命周期中其他逻辑
//    这里使用apply来改变之前之前页面的方法的this指向,不然如果页面的生命周期钩子里使用了this的话,会报错
//    argments是将之前可能有的一些参数传
	old.apply(this,argments)
}

结语: 代码不多,也不难理解,难就难在没有想到那个点,此技巧主要是借鉴的腾讯某统计插件的代码

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

易风有点疯

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值