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

使用带来的好处:

  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)
}

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

你可能感兴趣的:(Vue,前端学习,技术点,vue,javascript)