我在小程序工程化方面的一些实践

我在小程序工程化方面的一些实践

早期做小程序时,还是原始时代,项目结构混乱,各种冗余代码,每次迭代时由于高昂的维护成本,极为头疼。遂在一次次的更迭中完成了基础组件的初版,极为酸爽。从此之后在当时的情况下只需要关注于业务,对于通用的该封装封装,该分层分层,该解耦解耦,也出了一款独立于业务之外的基础组件。洋洋自得。

后来入职新公司,遇到的问题也是同样的,在工作之余计划将此前抽象的基础组件集成进来,发现了不少问题,其中之一就是上手极为不易,在这个过程中又有一些改进。

更迭

此前公司的小程序开发模式是:
在这里插入图片描述
此前的问题对于页面的创建是极为的不便,对于代码的调试也不方便,代码结构也没有进行分层。

接入基础组件之后,目前的小程序优化为以下结构:
在这里插入图片描述
相比之前添加了一层隔离层,好处与未来的规划可以下图解释:
在这里插入图片描述
当前小程序此前就采用glup进行构建的,于是我在这个基础之上添加了一些任务,使用工具自动引入基础组件,而对编写上层业务代码来说是无感知、无侵入的,还可以按照之前的原生方式写,这是它的一大优势。

目前还有的问题是页面之间的Intent通信耦合还是很严重,解决思路为可以提供一个中介者来完成,不过这个对目前来说问题不大。

目前已经完成的功能有:

  • 开发者模式,可以用来切换环境,目前有生产,预发,测试。
  • 对App的注册进行了代理,可以在基础层完成一些初始化工作。目前有监控的初始化。
  • 对每个Page的生命周期与setData方法做了代理,setData在编译时替换为了setMFData。
  • setMFData目前对setData的调用做了节流。可以提升页面的渲染性能。
  • 将运行时环境所提供的方法挂载到了每个页面实例下。不需要再通过wx.xx调用,可直接通过this.xx调用。这样的好处在于使业务代码与运行时api进行了隔离,也方便使用。
  • 对此前的网络层再做了一层隔离,这一层只是用来承载网络访问,并桥接了网络监控的能力。而上层会做更多的业务处理。

将来可以做的事:

  • 可以采用类vue的编写方式,将4个文件合并至一个文件,扩展名可以为*.mp。
  • 可以写一个脚手架用来创建*.mp文件。
  • 需要写一个mp-loader将*.mp转换为对应的微信文件。
  • 可以写一个转换工具将之前的代码合并至一个*.mp文件中。

*.mp文件的结构可以如下:

// *.mp
// <!-- wxml内容 -->
<template>
   <view id="page">
   </view>
</template>

// <!-- js内容 -->
<script>
   Page({
       data: {

       },
       onLoad() { 

       },
       reload() {
       },
       onUnload() {
       }
   })
</script>

// <!-- css内容 -->
<style>
   #page {
       padding: 40rpx 50rpx;
       text-align: center;
   }
</style>

// <!-- 小程序特有的配置 -->
<config>
   {
       "navigationBarTitleText": "小程序开发者"
   }
</config>

以上就是我目前可以根据当前的一些问题进行的一些探索,这也是一个循序渐进的过程,将来在业务需要时也会催生出更好的方案,权当给大家分享一个实践的思路。

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页