vivo 官网资源包适配多场景的应用
本文介绍了资源包的概念及使用场景，同时对资源包的几种使用方案进行对比。通过本文，大家可以快速掌握资源包的使用方法，解决单一配置满足多场景、多样式的问题。
一、业务背景
随着官网项目的业务深入发展，单纯的配置已经满足不了各种复杂场景的需求了，靠适配各种场景的需求只会让配置后台越来越复杂。而且有些特殊场景是需要在特殊时间触发，并且需要运营人员做到快速配置，无需发版，配置正确的地步。资源包的出现就是为了解决上述场景的。它能配置一次，无需发版，支持预览，并且适合所有特殊场景的样式。这种能力已经在我们官网运用的很好了。
二、什么是资源包？
包含网页、JS、CSS 和图片视频等静态资源的文件，并具有一定目录规则的压缩包，可以通过后台配置，快速上线更换，无需版本发布。下图所展示的是一个Demo的资源包目录。
三、为什么要使用资源包
最开始我们开发完一个功能，即使设计时考虑的比较通用，但是在一些特殊节日的时候总有样式上面的偏差，功能无法满足，紧急情况只能发版解决。所以出现了资源包的解决方案，这种方案只需要前端按照一定的规则开发一个完整的资源包，在后端进行资源包的解析。
前端能立马看到整个页面样式，做到配置一次，快速上线的目的。这种方式对大部分场景比较适用，但是对于需要动态获取数据、用户分流的页面不太适用，资源包大多都是静态页面。所以在使用资源包的前提下需要自己去评估下业务场景。
3.1 资源包使用场景
- 解决一套配置只适配一种样式的局限性，满足了多页面多样式的随时更新的需求。
- 满足特殊活动前端展示特殊样式的需求，比如各种节日的主题，特殊活动的内容，手机360度模型。
- 可以作为各个场景的兜底数据，并且在重构的时候可以解决新旧数据的兼容性问题。
图一：
图二：
图一和图二是两种不同的资源包，图一是X50 Pro+的360度模型，图二是X50 Pro+的静态宣传页面，两种不同的资源包达到了给用户展示不同的效果目的，其实在后台就一个配置入口。
可见这种方式非常灵活的展示了不同的需求。
四、怎么使用资源包
4.1 整体流程
不同的资源包有不同的规则目录，解析规则也不一样，所以后台有统一的资源包解析适配器，对应到不同的解析方法，然后经过一系列的解析操作（主要是JS、CSS、图片、视频、JSon文件官网规则适配逻辑和相对路径的替换）之后把主页面内容入库和入缓存。最后把上传的资源包解压后上传到
静态资源服务器上面。资源压缩包上传到静态服务器我们这边尝试了三种方案，分别如下：
4.2 方案一：本地解压
本地解压是在本机器完成资源包的解压工作，把资源包所有文件解压到本机的规定的目录，然后解析压缩完的主网页，替换网页中所有的引用静态资源的路径。
下图展示了本地解压方案
本地解压主要是把制作好的静态资源zip包上传上去，规定好解压路径，通过Zip的工具类对zip包进行解压，解压好的文件上传到本地，本地解析主要是对解压好的文件中主文件比如"index.html"进行解析，解析的主要工作是按照一定规则通过jsoup去操作HTML 文件，筛选一些我们需要的样式、页面并且替换静态资源的路径，改为上传到你本地路径。前端直接获取服务端返回的数据进行渲染成你资源包的页面。
本地解压方案评估
优势：
- 解压资源包和解析资源包的速度比较快。
- 资源包文件能完美解压全文件数据，丢失的概率会小很多。
劣势：
- 文件存储本地，影响本地的存储容量，不好统一管理。
- 文件存储本地，影响后续系统的容器化。
- 文件安全性，容易造成违规文件社交性散播。
4.3 方案二：本地解压+云上传
本地解压如同第一种方案，之后会把解压后的所有文件上传到OSS服务器上面。同样去解析主文件"index.html"。后续步骤类似第一种方案。
本地解压+云上传方案评估
优势
- 文件具备统一管理，可支持在线删除，编排的能力。
- 文件安全性，上传到OSS存储服务器上面的文件具备时效性，具备安全性。
劣势
- 文件上传的速度最终会导致静态资源包上传的速度，跟网络IO强相关。
- 文件整体性差，其中有一份文件没有上传上去，不支持回滚，导致整个资源包不可用。
4.4 方案三：云解压
如何确保资源包的整体性？思路：上传一个完成的资源包到云服务器，然后在线解压？
静态资源包会直接上传到文件服务系统，上传的这个动作是一个事件，触发了绑定该事件的函数进行在线解压，然后从文件系统拉取解压后的文件进行以上方案的解析。
优势
- 保证文件的安全性和整体性，可以设置文件的访问权限，保证文件上传时候的不丢失问题。
- 通过Serverless技术保证上传的速度、并发量。
劣势
- 云函数的支持性比较差，不是很通用。
- 资源包的大小会影响上传和解压效率。
引申：Serverless 的计算产品-云函数
- 云函数提供了一种直接在云上运行、无状态的、短暂的、由事件触发的代码能力。
- 云函数的运行是由事件驱动，在有事件的到来，云函数就会启动运行，而且是按需启动，不会占用很多资源。一次HTTP请求，一次文件上传，一次数据库修改，一个动作都能作为一个事件。
每次请求都会触发一个解压云函数的事件驱动，解压函数会启动一个实例来执行脚本，完成本次请求的解压工作，具体的解压脚本代码本文暂不做阐述。
当用户上传zip包到规定的bucket目录下的时候会触发云函数，云函数会启动一个实例来执行脚本，帮用户完成压缩包的解压。
五、资源包带来的好处
资源包这种方案在我们团队已经使用非常的成熟了，解决适配各种不同的样式配置，包括官网首页、官网产品详情页等不同的页面。现在系统运行比较稳定，我们这套解决方案也是比较成熟的。
运营同学只要在一个入口上传不同类型的资源包，能完成各种样式、各种规则的页面配置，真正达到单一配置，多套样式的功能的实现。
这套机制不仅提升了我们运营同学的50%的运营效率，更为我们解决了大促、节假日特殊样式的配置场景。
六、资源包的弊端
- 资源包的制作不可控，不同制作者制作出来的资源包带来的适配成本、对接成本、测试成本都是很大的。
- 资源包还是比较重量级的，一些动效、图片、适配资源比较大，对后台资源占用比较多，功能要求比较高。
七、未来展望
上述方案当然不是最优的方案，是这种场景下的的一种常用的解决方案，当然有更好的解决方案。未来我们考虑把常用配置项做成元组件形式，然后通过元组件之间的任意组合形成我们最终配置的页面。
运营只需要拖拽其中的元组件，自己想怎么组合就怎么组合，节日的组合成为一份页面，大促的组合也可以成为一份页面，很自由。这种随意组合的方式你可以称之为lowcode模式，这也是我们未来想做的东西。
八、写在最后
本文讨论了使用资源包的大体思路以及一些关键技术点的解决方案，各种不同方案对比。目前官网正在应用第三种方案，但是需要具备Serverless这种能力，我们在探索期间寻求了运维同学的帮助，编写在线解压函数的脚本远远没有上述来的简单。由于本篇限制并没有对Serverless的技术进行详细介绍，有兴趣的同学可以深入了解这方面的知识。
作者：vivo 官网商城开发团队
vivo 官网资源包适配多场景的应用相关推荐
- vivo官网APP全机型UI适配方案
vivo 互联网客户端团队- Xu Jie 日益新增的机型,给开发人员带来了很多的适配工作.代码能不能统一.apk能不能统一.物料如何选取.样式怎么展示等等都是困扰开发人员的问题,本方案就是介绍不同机 ...
- 2D+1D | vivo官网Web 3D应用开发与实战
一. 前言 1.1 前端工程师,不写网页,还能做什么? 在近20年的前端发展史中,前端经历了铁器时代(小前端),信息时代(大前端)以至现在的全能前端时代.经历了几个时代的沉淀之后,前端领域开始更加细分 ...
- 富文本编辑器：ckeditor(使用官网下载包)
之前,直接使用的ckeditor-vue实现的富文本编辑器,问题主要是使用add-ons里面的plugin比较麻烦,需要自己包装,然后如果想要更改固有的plugin,比如table.tablesele ...
- 天地图key申请_关于天地图官网资源的一些记录
1.申请Key 天地图API级服务接口调用需要获得开发授权,因此,以前不带token的请求连接全部失效. 登录天地图官网,根据应用场景选择创建,得到相应的token值. 2.确定服务资源 在地图API ...
- 关于天地图官网资源的一些记录
1.申请Key 天地图API级服务接口调用需要获得开发授权,因此,以前不带token的请求连接全部失效. 登录天地图官网,根据应用场景选择创建,得到相应的token值. 2.确定服务资源 在地图API ...
- 【keil5】keil官网PACK包不显示的解决方案
大家下载PACK包的时候需要登录官网去下载: https://www.keil.com/dd2/pack/ 结果打开发现没有下载的地方 浏览器按F12可以看到如下错误: 这个时候可以通过增加RERES ...
- Keil官网下载包不显示的解决方法
Keil 5(MDK 5)包管理器用不了,包无法下载,这时候我们需要到官网去下载这些包,但有人可能会发现打开https://www.keil.com/dd2/pack/ 这个页面的时候,发现并没有可以 ...
- threejs视频教程学习（1）：本地搭建threeJS官网、渲染第一个场景
前言 学习教程:老陈 threejs课程 官方网站是在国外,在本地搭建threejs是为了更方便的查看官方文档.例子. 官方网站:threejs 搭建 下载开发环境的压缩包文件,github 有时候打 ...
- 【转】赛灵思官网资源导读
俗话说"授之鱼不如授之以渔",看到这边有人要资料有人送资料的,其实论坛不更应该是一个交流的空间么?那就让找资料更有效率一点,让大家花更多时间来交流吧. 言归正传,写这篇文章主要想介 ...
最新文章
- php request payload怎么接收,[问题] PHP接收Request payload传递过来的参数
- C++知识点40——运算符的重载概念与分数类实现（中）
- 基于原子探索者stm32f407开发板的ucos-iii+lwip1.4.1的tcp server并发服务器完美解决例程（转）...
- 我的第一篇blog 【随意】
- 中国银河证券签约神策数据 数据赋能业务跨越性增长
- Django从理论到实战(part22)--include模板标签
- .NET5即至，你准备好了吗？
- mysql 层级结构查询
- Ubuntu 16.04 安装Go 1.9.2
- mysql一对多增删改查_SQLAlchemy 增删改查 一对多 多对多
- Tasker to stop Poweramp control for the headset while there is an incoming SMS - frozen
- OpenGL 错误获取glGetError()
- 智慧体育训练考核系统软件-智能体能综合测评系统
- 面试题（两个栈实现一个队列和两个队列实现一个栈）
- Word | 关于删除分节符(下一页)前面的版式就乱了解决方案
- idea下的新建的index.jsp访问不到404
- Simple Contrastive Representation Adversarial Learning for NLP Tasks
- 错误SyntaxError: (unicode error) truncated \UXXXXXXXX escape的解决方法
- realme真我笔记本Air官宣发布时间 将于7月12日发布
- fffffffffffffffffffffffffffff