• 您的电话 *

  • 您的需求

  • 发送

  • 颠覆视觉创新  塑造优-秀品牌

    展示企业形象  宣传产品服务

    您当前所在的位置:

    搜索

    微信小程序页面代码复用探索

    作者:华夏支点网络 浏览:7048 发表时间:2020-11-08 09:05:08



    写在前面


    微信小程序开发的碎碎念


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


    组件使用方法:

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


    // Page页面 wxml文件,引用title-bar对应的wxml......


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

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

    总结一下,最终想要达到的目标是:


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

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

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


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


    写在后面


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

    微信小程序页面代码复用探索
    并且还有继续增加的趋势。维护这一坨代码的难度正在慢慢增加。是时候解决代码复用的问题了。
    长按图片保存/分享
    0

    微信小程序页面代码复用探索

    2020-11-08 09:05:08

    浏览: 7049

    并且还有继续增加的趋势。维护这一坨代码的难度正在慢慢增加。是时候解决代码复用的问题了。



    写在前面


    微信小程序开发的碎碎念


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


    组件使用方法:

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


    // Page页面 wxml文件,引用title-bar对应的wxml......


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

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

    总结一下,最终想要达到的目标是:


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

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

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


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


    写在后面


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

    作者: 华夏支点网络
    0
    微信小程序页面代码复用探索
    并且还有继续增加的趋势。维护这一坨代码的难度正在慢慢增加。是时候解决代码复用的问题了。
    长按图片保存/分享

    相关设计案例

    相关怎样戒赌博设计案例

    建站资讯

    .

    Are you interested in ?

    撸起袖子干,干之前,先说说您的要求吧!


    怎样戒赌博制作咨询电话

    15285141318

    18685842288


      微信客服


    填写怎样戒赌博制作,网页设计,seo优化需求  * 请认真填写需求信息,24小时内与您联系。

  • 您的电话 *

  • 您的需求

  • 提交咨询

  • © 2012-2020 华夏支点 版权所有 黔ICP备2020008579号  黔公网安备 01982109827101号    SITEMAP

    专业的怎样戒赌博建设/推广、微信小程序开发、软件开发公司

    服务热线:15285141318 / 18685842288

    建站邮箱:449180048@qq.com

    © 2010-2020  华夏支点网络  版权所有  SITEMAP

    在线咨询
    TOP
    在线咨询
    在线咨询 联系方式 二维码
    热线电话
    15285141318
    E-mail地址
    449180048@qq.com
    二维码
    TOP
  • 取消