「这是我参与2022首次更文挑战的第2天，活动详情查看：2022首次更文挑战」

前言

我们在开发中，有通用的方法需要在各个页面或组件中使用，我们不可能每一个方法都在每个页面重新写一遍。 一种是我们把所有的通用方法统一整合到一个工具文件中，当在页面或组件中使用时，引入该文件，使用其提供的方法。 一种是我们通过对系统提供的Page()函数或Components()函数增加一个包装器函数，扩展其能力，在其自身增加通用的方法。

本篇文章我们就来实现第二种方式。

原理

本质是通过一个中间函数，用来处理options选项，将我们通用的逻辑与用户定义的参数进行合并。这样就对其进行了扩展，最终调用的还是Page和Component函数。 接下来以Page函数为例。

扩展api函数

在utils文件中，新建extendPage.js文件，其提供一个基类函数。

export default function extendPage(options) {
    Page({
        ...options,
    })
}

这样每个页面引入这个extendPage之后，我们就有了扩展其能力的可能，可以在extendPage中实现每个页面都通用的方法。

合并参数

这种情况下，我们可能会在一些生命周期函数中有一些通用的操作，比如上报pv，uv等，或者监听页面销毁，或者一些其他的需要在生命周期函数中，每个页面都通用的功能，这时为了不影响我们原有页面中的逻辑，这个时候就需要对我们生命周期函数进行合并。

实现很简单，就是在extendPage中，在对应的生命周期函数中，写我们通用的功能，在最后在调用下用户自己页面实现的函数。

以onLoad的举例：

export default function extendPage(options) {
    Page({
        ...options,
        onLoad(params) {
            // 可以在此写每个页面通用的在onLoad函数中实现的功能，最后调用用户自己的生命周期函数逻辑
            
            console.log('通用逻辑');
            if (options.onLoad) {
                options.onLoad.call(this, params);
            }
        },
    })
}

重写页面Page函数

在页面中，引入我们已经写好的扩展函数。

import extendPage from "../../utils/extendPage"
extendPage({
  data: {
  },
  
  onLoad() {
    console.log('onLoad')
  },
})

注意点

• 一个是同名生命周期的调用，如果用户自定义的参数中，有对生命周期函数的调用，这时候用户定义的要在页面生命周期函数调用之前调用。
• 属性或方法命名冲突时，是以用户自定义的为准，保证用户的期望表现。

扩展常用功能

• 比如一些全局使用的toast，loading，showModal等api函数的封装. 这样封装的好处是我们如果想用使用自定义的UI时，可以直接在统一的函数内替换。

toast(options) {
    const {title, icon, duration} = options;
    wx.showToast({
      title,
      icon: icon || 'none',
      duration: duration || 3000
    })
  }
  
   showLoading(options) {
    wx.showLoading(options)
  },
  hideLoading() {
    wx.hideLoading();
  }

• 页面通用的埋点方法的封装，因为我们真实业务中，每个页面都会有埋点，因此我们把相关的埋点功能，统一放在扩展函数内，统一提供。

  setPageView() {},
  setModuleClick() {},
  setModuleView() {}

• 还有一些针对每个页面的一些性能监控的逻辑，这时候也可以统一放在该扩展函数中，统一处理。

总结

整体来说，目的就是为了封装与复用，提高我们的开发效率及可维护性。在项目中尽可能去复用我们的逻辑，不论后期的更改或优化，每个功能都有统一的出口点，方便替换及优化。