系统设计

腾讯视频技术团队偷懒了？！

动图封面

腾小云导读

PC Web 端、手机 H5 端、小程序端、App 安卓端、App iOS 端......在多端时代，一个应用往往需要支持多端。若每个端都独立开发一套系统来支持，将消耗巨大的人力和经费！腾讯视频团队想到一个“偷懒”的方法——能不能只开发一套基础系统，通过兼容不同平台的特性，来快速编译出不同平台的应用呢？本篇特邀腾讯视频团队为你分享快速编译出支持多端的应用、一套代码行走天下的“偷懒”历程。欢迎阅读。

1 背景

2 设计思路

3 具体实现

4 总结

01、背景

腾讯视频搜索在多个端都存在：安卓 App 端搜索、iOS App 端搜索、H5 端搜索、小程序端搜索、PC Web 端、PC 客户端搜索。每个端，除了个别模块的样式有细微差异之外，其他都一样，如下面的图片所示。

按照以前的现状，安卓 App 端搜索一套代码、iOS App 端搜索一套代码、手机 H5 端一套代码、小程序端搜索一套代码、PC 客户端一套代码、PC Web 端一套代码......每套代码都是独立开发，独立维护，成本非常高。并且，后端的搜索接口以前也是分散在多个不同的协议中，有的平台是 jce 协议的接口，有的是 PB 协议的接口，也是五花八门。

随着业务增长的需求，我们已经没有足够的时间来维护各自一套独立的系统，我们打算进行升级改革！治理的办法就是：收敛！把后端不同平台的接口都归一到同一个接口中，通过平台号来区分；前端也将不同平台的代码，收敛归一成一套代码，通过条件编译来兼容适配不同平台的差异性，不同的平台，在蓝盾流水线中配置不同的参数来上线，从而达到多合一的效果。

总体来说，我们团队就实现一个“多端合一的万能模板”的想法达成一致。并且，我们希望使用 hippy-vue 技术栈。

理由有以下：

02、设计思路

系统的架构图如下所示：

通用模版为了简化开发、提高开发效率，在模版中集成了大量现有组件和工具包，具体可以分为以下三层：

第三方工具层

在通用工具库中，模版包装并提供了很多常用方法，比如 cookie 的设置和 cookie 的获取方法；DOM 的操作方法；Cache 的设置，Cache 的获取，Cache 的过期时间等。在第三方接入库中，模版已经接好了 Aegis 监控，Tab 实验的实验值获取，大同上报等；在打包编译库中，模版提供了通用的 Hippy App 打包安卓脚本和 IOS 脚本、H5 的打包脚本、小程序地打包脚本、一套代码，运行不同的打包命令，执行不同的编译打包脚本，就可以生成不同平台对应的发布包。编译打包在后续还会详细讲解。

数据管理层

在这层中，模版集成了跟数据处理相关的模块。

在 Store 层，由于该模块是基于 Vue2 实现的（Vue3 会在下一个版本中提供），模版已经集成好了 Vuex、State、Getters、Mutations、Actions 等，并且都有实例代码（该模版是基于 Vue2 实现的，Vue3 会在下一个版本中提供）；

在 Model 层，模版提供了一套将 PB 文件转化为 TS 类文件的方法，方便快速接入后端PB协议接口请求；同时，还包装了接口通用请求方法，以及全局的统一错误处理上报方法；在数据配置中，模版提供了全局的常量配置文件，应用的版本配置文件（版本的配置对 Hippy App 的应用非常实用），以及 UI 样式的配置（正常模式样式还是暗黑模式样式，宽屏，窄屏等）。

UI 层

为了提高开发速度，提高开发效率，模版提供了示例页面代码。同时，根据脚手架来选择是否需要路由，来动态添加应用的路由；以及常用的基础组件库。这些组件库中的组件，是从众多 Hippy 应用中提取出来，实用又高效。

03、具体实现

本文将从 Hippy App 端实现，Hippy H5 端的实现和 Hippy 微信小程序端端实现来分别展开介绍。

下图是 Hippy App 端实现逻辑。

App 端的入口文件为 main-native.ts。在里面，声明了一个 App 实例，指定 phone 下的一些属性设置，比如状态栏、背景色等等。同时，需要用到的 native 组件，都需要在 main-native 中进行声明绑定，才可以在页面中使用。

例如：下图示例中注册声明了两个 native 组件，LottieView 和 VideoView，在页面中就可以直接使用这两个 native 组件。

Vue.registerElement('LottieView');

Vue.registerElement('VideoView', {
component: {
name: 'VideoView',
processEventData(event: any, nativeEventName: string, nativeEventParams: any) {

      // To do something for the native component event
return event;

    },

  },});

main-native 中还有一个重要的方法：app.$start() 方法。

该方法为 Hippy 引擎初始化完成后回调到 Hippy 前端的方法；Hippy 端跟 App 方法进行通信，通过 jsbridge 来进行，模版中已经封装好了具体方法；Hippy 请求后端接口，通过 fetch 协议，也有具体的协议方法封装；Hippy 在 App 内部的跳转，是通过伪协议跳转来实现的。

Hippy App 应用的部署分为以下三种情况：

本地调试

本地调试是通过 Hippy + Chrome Devtools 来完成，通过 WS 通道转发消息，具体流程如下图。

部署测试环境

模版中引入了环境变量参数，同时在代码模版中做了大量环境变量的兼容逻辑，比如测试环境用测试环境的接口，正式环境用正式环境的接口；测试环境用测试环境的 CDN，静态文件上传到测试环境，测试环境部署测试环境的离线包等；测试环境的调试我们是通过离线包的方式来实现的，有专门的测试环境流水线接入使用，只需要稍微做少许调整即可，有需要的可以私聊。

部署正式环境

正式环境流程会做这样几件事情：正式环境接口、正式环境的 CDN、正式环境的日志上、部署正式环境的离线包平台、图片的特殊处理。因为 App 端是采用离线包的形式，如果所有本地图片都打包到离线包中，会导致离线包包体积很大，会影响到 App 的整体体积大小和离线包的下载速度。模版中做了针对图片的特殊脚本处理：引入了图片编译大小变量：STATIC_SIZE_LIMIT。当大于该限制条件的图片都一律上传到 CDN，如果想保留的，则需要增加特殊声明：inline。

具体流程如下图所示：

Hippy H5 的实现流程如下图所示。

Hippy H5 的实现跟 App 的实现流程类似，但是差异如下：

这里重点讨论一下大同上报的实现。大同上报在 App 端的上报参数声明跟 H5 端的上报参数声明不一致，如何统一这些差异？模版中的解决方案是：封装自定义标签 Directive。

具体实现如下：在 Directive 标签中兼容 App 和 H5 的不一致。

/**

* @example

*

* <element v-report="elementReportInfo" />

* <element v-report="{ eid, ...extra }" />

* <page v-report="{ pgid, ...extra }" />

* <page v-report.page="assertPageReport" />

*/


Vue.directive('report', {

  bind(el) {

    el.addEventListener('layout', throttledForceReport);

  },

  unbind(el) {

    el.removeEventListener('layout', throttledForceReport);

  },

  inserted: setReport,

  update: setReport,

} as DirectiveOptions);

很多人可能会问，Hippy App 跟 Hippy H5 有很多不同的地方，如果写两套代码，会不会导致代码的体积变得很大？答案是一定的，为了解决以上问题，该万能模版提供了条件编译。引入环境变量：isNative。然后，根据该条件，进行条件编译，不同的平台，生成不同平台的代码，避免了生成大量冗余代码。

Hippy 微信小程序的实现流程如下图所示：