Weapp影视评分项目开发（13）：扩展 Page 函数为所有页面增加公共方法

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第13天，点击查看活动详情

前言

上一篇文章介绍了使用 behavior 实现代码的复用，但 behavior 是组件级的，不能复用 Page 中的一些方法，所以本篇我们将扩展 Page 函数，进一步简化下拉刷新与上拉加载的代码。

知识点

Page 函数扩展

一、Page 介绍

Page 方法实际是一个全局方法，我们在全局任意地方都能获取该方法，所有的页面也是使用这个方法来实现页面逻辑的处理，它接收一个 object 类型的参数，参数中可以根据页面需求传入 data、生命周期、页面方法等属性。

二、Page 扩展

因为下拉刷新、上拉加载、页面分享会在很多页面中使用，以及希望在 onLoad 方法里面能实现一些相同的业务处理，所以我们需要把这些方法添加到 Page 函数中。

三、扩展的实现

我们在项目根目录中新增 /extend/page.js 文件，结构如下：

├── extend
│   └── page.js  // page 扩展函数文件

1. page.js 的实现

export default () => {
  const originalPage = Page; // 将 Page 原函数赋值给其它变量存储

  /**
   * @desc Page 扩展，增加一些方法
   * @param { object } config Page 页面配置项
   * @return { function } 扩展后的 Page 函数
   */
  Page = function (config) {
    // config 是页面默认的方法，我们从中取出需要扩展的方法命名
    const {
      onLoad,
      onReachBottom,
      onPullDownRefresh
    } = config;
    
    // onLoad 生命周期
    config.onLoad = function (options) {
      // 扩展代码请看 2. onLoad 生命周期扩展
    })
    
    // 下拉刷新事件扩展
    config.onPullDownRefresh = function () {
      // 扩展代码请看 3. onPullDownRefresh 扩展
    })
    
    // 上拉加载事件扩展
    config.onPullDownRefresh = function () {
      // 扩展代码请看 4. onPullDownRefresh 扩展
    })
  
    // 将扩展后的方法返回,我们将在 app.js 中进行调用将其设置到全局中
    return originalPage(config)
  }
}

2. onLoad 生命周期扩展

上一篇中我们在 getInfiniteData.js 的 data 中设置了一个默认字段 id，这个字段在资源详情页我们将其作为资源 ID ，所以我们需要获取到这个 id，页面中我们会在的 onLoad 生命周期中做如下操作：

Page({
  onLoad(options) {
    this.setData({
      id: options.id  // 将路由中的 id 赋值给 data
    })
  }
})

因为这部分代码在每个资源详情页是重复的，我们可以将这部分代码在上面的 page.js 中对 Page 方法进行扩展，这样详情页面就可以省略这部分重复代码，扩展如下：

// onLoad 生命周期
config.onLoad = function (options) {
  // 如果路由url传值中存在 id，则将其 setData 到 data 上
  // 如果页面中也有此判断条件，将会被覆盖
  if (options.id) {
    this.setData({
      id: options.id
    })
  }

  // 如果页面中存在 onLoad 方法，则将路由的参数指向改为 onLoad 对象
  if (typeof onLoad === 'function') {
    onLoad.call(this, options);
  }
}

3. onPullDownRefresh 扩展

上一篇的“正在热映”示例中，我们在页面的下拉刷新方法中调用了数据重置方法：

onPullDownRefresh() {
  this.resetData();  // 重置 data 数据并调用 loadMore 方法
}

同样，我们可以将这部分代码添加在 page.js 的扩展函数中，代码如下：

// 下拉刷新事件扩展
config.onPullDownRefresh = function () {
  // 如果页面中存在 onPullDownRefresh 方法
  // 则使用页面中的，也就是页面中的方法会覆盖此处定义的扩展
  if (typeof onPullDownRefresh === 'function') {
    onPullDownRefresh.call(this);
  } else {
    // 如果页面中存在 resetData 与 loadMore 方法
    // 则调用 resetData 方法，将 data 数据重置
    if (typeof this.resetData === 'function' && typeof this.loadMore === 'function') {
      this.resetData();
    }
  }
}

3. onPullDownRefresh 扩展

同样在上一篇的“正在热映”示例中，我们在页面的上拉加载更多的事件中调用了加载方法：

onReachBottom() {
  this.loadMore(); // 加载更多分页数据
}

同样，我们可以将这部分代码添加在 page.js 的扩展函数中，代码如下：

// 上拉加载事件扩展
config.onReachBottom = function () {
  // 如果页面中存在 onReachBottom 方法
  // 则使用页面中的，也就是页面中的方法会覆盖此处定义的扩展
  if (typeof onReachBottom === 'function') {
    onReachBottom.call(this);
  } else {
    // 如果页面中存在 loadMore 方法
    // 则调用该方法加载列表数据
    if (typeof this.loadMore === 'function') {
      this.loadMore(); // 加载更多分页数据
    }
  }
}

4. 方法实例化

以上即为对 Page 方法的扩展，我们需要将该方法在小程序的入口中实例化，代码如下：

// app.js
import extendPage from "./extend/page.js"; // 导入 page 扩展方法

extendPage(); // 执行该方法

至此，我们已实现将 onLoad、 onPullDownRefresh 与 onReachBottom 事件扩展到页面 Page 的默认方法中，所以上期的 “正在热映” 的 js 文件，如下实现即可：

// pages/movies/theater/index.js
import { getMovieTheater } from "../../../api/api"; // 导入热映影视接口

Page({
  behaviors: [wx.getInfiniteData],  // 注入混入

  loadMore() {
    this.getData(getMovieTheater);  // 调用正在热映方法
  }
})

只需要几行代码，就可以实现原有需要几十上百行代码才能实现的功能，是不是非常简洁。

四、更多

以上的扩展，已满足当前的项目需求，日常业务中，我们可能需要做一些埋点统计，页面分享等功能，同样可以在 Page 的扩展函数中实现。

总结

本篇是对上一篇混入实现的扩展，将原有需要在每个页面 Page 方法中实现的功能，扩展到了 Page 默认方法中，减少业务代码量与复杂度。