![2ea662c414792f0b8755f2132a0a8860.png](https://i-blog.csdnimg.cn/blog_migrate/d7121520ee21014cc9e5ee2cbcb67c3a.png)
点击上方“蓝字”关注我们
作者 | 刘尧彦
编辑 | 张婵
小程序组件库简介
![0432148dfc070ea7a24e4b69d0302ed0.png](https://i-blog.csdnimg.cn/blog_migrate/1dc3332ce343d79325c35bd33612e65d.png)
小程序组件库由来
![0432148dfc070ea7a24e4b69d0302ed0.png](https://i-blog.csdnimg.cn/blog_migrate/1dc3332ce343d79325c35bd33612e65d.png)
多端兼容
![0432148dfc070ea7a24e4b69d0302ed0.png](https://i-blog.csdnimg.cn/blog_migrate/1dc3332ce343d79325c35bd33612e65d.png)
起初设计时,为了使小程序组件库能够满足能在小程序和 H5 两个平台上使用,我们搭建了两套组件库,采用多仓库设计,一套适用于 H5 开发,一套适用于 App 小程序开发,如图所示:
要合并代码,我们必须分析出两条代码的相同点和不同点,把相同点提取为公共的代码,同时对不同点想办法针对小程序和 H5 的要求分别处理。
我们组件库都是基于 Vue(针对 H5)/类 Vue(针对小程序)的方式实现,因此一个组件的代码,都是由模板(template)、样式(style)、逻辑(script)三个部分组成。从外观上说,H5 和小程序的组件是保持高度一致的,因此,模板和样式部分完全可以复用,只要保证基础构成和属性一即可。
唯一的区别聚焦在逻辑上:对于 H5 组件,逻辑处理相对比较简单,基本只有交互逻辑;而对于小程序组件库而言,还需要处理跟小程序框架相关的控制逻辑,例如:通过 jsbridge 与原生层完成生命周期协同控制,又或者在部分逻辑实现上需要使用原生层的 API 完成。如图所示:
运行时抹平差异方案:它是先以 JavaScript 作为基础选定一个 DSL 框架,以这个 DSL 框架为标准在各端分别编译为不同的代码,各端分别有一个运行时框架或兼容组件库保证代码正确运行。
条件编译型方案:通过对代码的不兼容逻辑部分进行条件判断,通过在打包时添加全局变量的方式,在不同的条件下执行对应的逻辑部分,从而实现不同端打包编译不同代码库。
根据目前的需求多端只需要输出小程序组件库和 H5 两个组件库,而且运行时抹平差异方案比较复杂,首先需要基于同样的 DSL 设计一套统一的 API,然后需要分别针对 H5 和小程序实现两套 runtime 来屏蔽底层差异,投入成本比较高。
综合对比下来,我们采用了条件编译型方案来实现多端的需求。
采用条件编译这个方案,我们可以复用代码的模板部分和样式部分,只需要在所有不可复用的逻辑交互部分加上条件判断。条件判断的添加方式如下图所示:
接下来,我们需要在打包时添加环境变量,实现通过不同的打包命令得到不同的组件库。因此 cross-env 这个模块是一个很好的选择,它可以在打包命令处设置全局环境变量。打包命令的设置如下图所示:
然后执行打包命令时就会将特定的环境变量打包到代码,在使用组件库时通过不同的条件去执行不同的逻辑部分,从而实现组件库的多端兼容,流程图如下所示:
未来展望
![0432148dfc070ea7a24e4b69d0302ed0.png](https://i-blog.csdnimg.cn/blog_migrate/1dc3332ce343d79325c35bd33612e65d.png)
随着小程序库的使用越来越广泛,我们可能会不仅仅只兼容小程序和 H5 这两端,还会对支付宝小程序端,微信小程序端等进行兼容,就像 uni-app 组件库一样支持各种各样的端。
到时候,目前条件编译的兼容方案可能无法支持我们小程序的发展,我们可能会选择采用运行时抹平差异方案,自己搭建一套框架去管理各个端的组件库,这样就可以让每个端的小程序代码很干净,各自都只有自己的逻辑交互,我们只需要通过外部框架去管理消除每个端的小程序库的差异即可。通过这种方案就可以更加优雅和完美的去实现组件库多端兼容的问题。
本文由“壹伴编辑器”提供技术支持
![2e5aa6ce26dcd372cfcd87758cb3a8ab.png](https://i-blog.csdnimg.cn/blog_migrate/2dc728d68ecc6a99100d343cf0e7d61d.jpeg)
关于大前端研发团队
隶属于建信金科基础技术中心,我们的职责是为前端开发提供底层框架和技术支撑。
我们希望做最好的人机交互,用前端连接用户和企业,用最棒的用户体验传递企业价值。
『先产品之忧而忧,后测试之乐而乐』说的就是我们!
![156de7c49d67689bc96dd5cac1a522e7.gif](https://i-blog.csdnimg.cn/blog_migrate/57bf4e27ab55847738c498b39ae4cb6f.gif)
![be32c74f709a439dbb60868068562617.gif](https://i-blog.csdnimg.cn/blog_migrate/0f8d7b034ac2038e86354b8348890d32.gif)
![774bedc2077ba78d47154ab2cc112669.gif](https://i-blog.csdnimg.cn/blog_migrate/328d9747e2e41cd7d4589331d88973e2.gif)
猜你喜欢
建信金科大咖访谈:金融衍生品定价与建行实践目标检测中的数据标注业务代码究竟难不难写?Jenkins vs GitLab CI:CI/CD工具之战