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

微信扫一扫,分享到朋友圈

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

写在前面


微信小程序开发的碎碎念


在上一篇文章的碎碎念中,我提到了小程序开发中一个比较尴尬的问题:代码复用问题。到这周为止,我一个页面的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%了。在后续的文章中,我会进行进一步的介绍。

写在后面

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

微信扫一扫,分享到朋友圈

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

1.深入Istio:Sidecar自动注入如何实现的?

上一篇

特朗普连发四推批“暗室开票” 推特紧随其后全部屏蔽

下一篇

你也可能喜欢

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

长按储存图像,分享给朋友