共计 4638 个字符，预计需要花费 12 分钟才能阅读完成。
腾小云导读
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 技术栈。
理由有以下：
| Hippy 是公司级别的中台框架，有专门的团队在进行问题的修复和性能的迭代开发，并且广泛应用到了很多公司级的利用中，临时不会呈现“荒凉抛弃”的场面；Hippy 是为了抹平 iOS、Android 双端差别，提供靠近 Web 的开发体验而生，在下层反对了 React 和 Vue 两套界面框架，前端开发人员能够通过它，将前端代码转换为终端的原生指令，进行原生终端 App 开发；Hippy 在底层进行了大量的优化，使利用 Hippy 框架开发的终端 App 利用，在启动速度，可复用列表组件、渲染效率、动画速度、网络通信等方面都提供了业内顶尖的性能体现，值得信赖；Hippy 在下层反对 Vue 技术栈，正好咱们团队目前所有的前端我的项目也都对立为 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 的入口文件为 main-native.ts，h5 的入口文件为 main.ts 文件。H5 的入口文件中，没有对于 iphone 的设置，跟 Web 的设置一样；H5 的路由用 vue-router，页面中的路由跳转都是 H5 超链接，不是伪协定；H5 的本地调试很简略，跟 Vue Web 一样，都是在本地起 http-server 来测试；测试环境的部署和正式环境的部署都是采纳的服务器来部署，不是离线包。 |
|---|
这里重点讨论一下大同上报的实现。大同上报在 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 微信小程序的实现流程如下图所示：
小程序的实现是基于 Taro Vue 框架。该框架跟 Hippy Vue 框架人造兼容，然而也有一些小程序的非凡中央：
| 小程序的入口文件约定为 app.ts，创立 app 实例是在 app.ts 中来实现；小程序的主页面文件为 app.vue，在其中定义小程序的状态栏，标题栏，页面等；小程序的全局配置在 app.config.ts 中；小程序的构建脚本在 script 中的 index.js。小程序的代码是基于 Hippy Vue 的代码通过 Taro 主动构建转化而成，很多配置都是主动生成的，只须要在开发的时候，遵循约定的命名标准即可。 |
|---|
为了一套代码可能同时反对 App，H5 和微信小程序，须要遵循一些约定的标准，否则在从 Hippy Vue 转化为 Taro Vue 的时候会遇到一些问题：
| 文件夹命名标准：全副小写加“-”，例如：node-redis, agent-base 等，不要用大驼峰等；文件的命名标准：跟文件夹命名标准统一，全副小写加“-”，例如：eslint-recomment.js；属性的命名：也采纳小写加“-”，例如：data-url。 |
|---|
04、总结
目前该模版曾经在腾讯视频的搜寻场景落地，并且上线利用，然而，还是有一些须要独特打磨的中央：
Vue3 的反对 ：目前咱们是基于 Hippy Vue2 来实现的。随着 Vue3 的广泛应用，后续咱们须要降级到 Vue3。
组件丰盛 ：通用组件的品种还不是特地丰盛，只是基于咱们腾讯视频搜寻场景进行的封装，后续能够补充更多更丰盛的组件。
迭代降级 ：通用组件目前还是通过源代码的形式寄存在代码模版中，不利于后续组件的降级迭代。打算后续会把组件给迁徙到咱们的利用组件库平台 Athena，该平台咱们会后续发专文介绍，大家敬请期待。
以上是本次分享全部内容，如果感觉文章还不错的话欢送分享~
-End-
原创作者|熊才刚
技术责编|陈恕胜
你有什么开发提效小技巧？欢送在腾讯云开发者公众号评论区中分享你的教训和认识。咱们将选取 1 则最有意义的分享，送出腾讯云开发者 - 文化衫 1 件（见下图）。6 月 21 日中午 12 点开奖。