微信小程序页面代码复用探索（一）—— 存在的问题及需求

写在前面

微信小程序开发的碎碎念

在上一篇文章的碎碎念中，我提到了小程序开发中一个比较尴尬的问题：代码复用问题。到这周为止，我一个页面的js代码行数已经达到了2000+，并且还有继续增加的趋势。维护这一坨代码的难度正在慢慢增加。是时候解决代码复用的问题了 。

现有的代码复用方案及其问题

现有的代码复用方案，使用微信小程序的组件Component。Component本身就是一种代码复用。而且在Component中，还提供了Behavior来共享代码。 但是，这种解决方案并不能覆盖所有场景。

举一个例子，我的页面中需要实现一个自定义title-bar，当页面滑动时，滑到一定的位置，这个title-bar的背景需要变成透明的，当滑动到另外一个位置时，title-bar需要变成纯色的。显然，我们需要在Page的onPageScroll中，去实现逻辑。现在，在另外一个页面中，又需要同样效果的title-bar。很自然的，我们需要把这个title-bar剥离成一个组件，页面直接引用，尽量不需要在Page页面中写逻辑。比较遗憾的是，使用Compoent做不到这一点。不管怎样，都需要在对应Page中的onPageScroll里去写逻辑。

其次，Component提供的Behavior，本质上是一种mixin。而mixin方案本身存在 命名冲突，隐式依赖 的问题。当多人协作开发同一个复杂页面、组件时，如果没有实现约定以及充分沟通，一不小心把别人的方法覆盖了（或被覆盖了），就尴尬了（我就踩坑了）。

我认为，微信小程序缺少一个 相互隔离、显性依赖的页面层代码复用方案 。

实现一个新的代码复用方案吧

既然微信暂时没有提供这样的解决方案，那自己来实现一个好了。既然自己实现，那就先明确一下需求。以上面的title-bar举例，我想实现的效果大致如下。

title-bar组件js代码，像写Page代码一样：

// title-bar组件 js文件
export default {
   ...
  data: {
     titleBarStyle: 'rgb(255,0,0)'
  },
  onPageScroll: function (e) {
    this.handleTitleBarChange(e.scrollTop);
  },
  handleTitleBarChange() {
    ...
    this.setData({
      titleBarStyle: 'transparent'
    });
    ...
  }
  ...
}

// title-bar组件wxml代码：
<view style='background: {{ titleBarStyle }}'>
  ...
</view>

组件使用方法：

// Page页面 js文件
Page({
  ...
  // 直接引用title
  components: ['title-bar.js'],
  ...
});

// Page页面 wxml文件，引用title-bar对应的wxml
...
<include src="title-bar.wxml" />
...

上面的代码和mixin很类似。前文也提到了，mixin会有命名冲突，隐式依赖的问题。其他组件里面万一也有一个 handleTitleBarChange 的方法，相互覆盖咋办。新的解决方案需要处理这个问题。

同时，新的解决方案最好可以是渐进式、轻量级的，方便现有小程序代码进行改造。

总结一下，最终想要达到的目标是：

1、像写Page一样写”组件“，在Page中直接引用即可复用代码。

2、避免命名冲突和隐式依赖。

3、轻量级，方便已有页面接入。

事实上，满足上述三个目标的解决方案，我已经实现了70%了。在后续的文章中，我会进行进一步的介绍。

写在后面

对于微信小程序开发这个领域，我深度接触的时间并不长。有什么其他解决页面层的代码复用问题的方案吗？欢迎交流。