• 您的电话 *

  • 您的需求

  • 发送

GZHXZD.COM


文章详情

——————

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

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

浏览:4619 发表时间: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

          浏览: 4620

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



          写在前面


          微信小程序开发的碎碎念


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