H5马甲包开发方案

"ANONYMOUS_BUNDLE"

Posted by Mrx on May 9, 2023

前言 —— 业务需求需要开发几个马甲包用于引流,不同于过审用的马甲包(用完不需要更新),这批马甲包需要保持跟主应用的同步更新,但是改动较小,一般是文案和图片,颜色需要改变,所以开发方案还需要重新评估下

确认马甲包适配方案

  • 新分支方案,开一个新分支或者新的仓库(好处是代码隔离,修改带来的副作用比较小。缺点是开发维护,打包构建成本加倍)

  • 类多语言方案,抽离主题色,文字,图片为动态配置变量,再通过包名注入对应的内容(好处是代码集中,修改集中,一次构建多处使用。缺点是代码耦合性较强,构建没有隔离,修改可能带来副作用)

方案实现

经过组内讨论,考虑到人力成本和后期的维护成本,决定使用类多语言的技术方案。接下来就开始考虑如何具体实现了。该项目是采用的vue3,借鉴了vue- i18n,通过plugin来进行内容的注入。

第一步 实现全局变量的注入

通过插件的形式全局注入$mjb的全局变量,供全局使用

image-20230509145650987

第二步 动态加载包配置

避免加载不必要的内容

image-20230509145922151

第三步 使用

通过包名(由url或者其它途径获得)加载对应的马甲包配置文件

image-20230509150138156

到这一步就可以开始愉快的进行马甲包开发了,一次开发多个包使用。附上demo地址,使用前要注意认真评估下是否满足业务需求

TODO

  • 多个马甲包图片文字配置起来会麻烦,如何减少重复操作

  • 支持css变量