【飞书小程序】在任何模块里使用this.setData和this.data

背景

在开发飞书小程序的时候，业务逻辑可能很复杂，我们想要把很重的代码进行拆分，封装成不同的模块。这样逻辑会更清晰，代码可读性也会更好，并且更易于维护。

但是问题来了，小程序页面的很多逻辑可能都涉及到对data的读取和更改。如果把它们拆分到模块里，就我们需要在模块中使用this.setData去改变页面的data，或者使用this.data去直接读取data值。

但是尝试后可以发现，在模块里输出一个函数，函数里是无法正常调用this.setData或者this.data的，这两个属性为undefined。

/* module.js  */
export default function test(){
    console.log(this.setData) // undefined
    console.log(this.data) // undefined
}

那么该如何解决这个问题呢？

方案：获取当前页面实例

其实我们在页面js的Page({ … }）里调用的this，就是当前用户访问的小程序页面的一个实例对象，指向的就是Page它自身。

因此我们只要想办法重新获取到这个实例对象即可。

这里我们使用一个飞书提供的API —— getCurrentPages。这个方法用于获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。

重点是最后一句话。我们调用getCurrentPages方法，获取小程序的页面栈数组，然后获取到数组的最后一个元素，这个元素就是当前页面的实例对象，等同于你在Page({ … }）里调用的this。

我们把这块逻辑封装成一个方法，

/* _this.js */
export const getCurrentPage = () => {
    const pages = getCurrentPages()
    const last = pages.length - 1
    const target = pages[last] // 当前页面实例
    return target
}

然后在我们的模块里使用它，就能在任意地方调用this.setData、this.data了。

/* module.js  */
import getCurrentPage from './_this'

export default function test(){
	const _this = getCurrentPage()
    console.log(_this.setData) // 等同于使用this.setData
    console.log(_this.data) // 等同于使用this.data
}