-
前终端统⼀一⽅方案Hippy-Vue 设计和实现
腾讯 / QQ 浏览器器 SuperTeam / xqkuang
-
背景介绍
Web
开发效率⾼高
⽀支持多平台
可动态发布
体验差
能⼒力力弱
Native
开发效率低
⽆无法跨平台
发布复杂
体验好
能⼒力力强
传统移动端开发模式，⽆无法满⾜足业务精细化运营需求，急需寻找⼀一种⾼高性能、跨平台、动态发布的开发解决⽅方案。
前终端⼀一体化
开发效率⾼高
⽀支持双平台
可动态发布
能⼒力力强
体验好
-
Hippy 简介
腾讯 Hippy 动态运营解决⽅方案由 Hippy SDK 与 Hippy 管理理平台 组成：
• Hippy SDK 是⼀一套多端统⼀一的开发框架，它能通过 JavaScript
⾼高效率地开发出：跨平台（安卓/iOS/
Web）、⾼高性能的原⽣生应⽤用，尤其适合需要快速迭代⼜又追求⾼高性能的产品。
• Hippy 管理理平台 涵盖编译、发布、监控等动态运营所需的各个环节，并⽀支持灰度⽐比例例、ABTest、差量量包等
⾼高级特性。
AndroidPlatform
iOSPlatform
WebPlatform
React.jsLibrary
Vue.jsLibrary
前端主导⽀支持最流⾏行行的框架
向阳⽽而⽣生代码即将对外开源
（ 发布平台）
User Code JavaScript
-
Hippy 底层三⼤大特性
⾼高性能可复⽤用滚动列列表
动画和⼿手势实现
X5 内核团队提供⽀支持
-
项项⽬目架构
Hippy SDK 采⽤用三层设计，其中：
• JavaScript 层：提供业务代码运⾏行行时的前端上下⽂文环境；
• Native Framework 层：负责前终端通讯与 JavaScript VM，并提供 Native 相关模块；
• Portable UI 层：提供基础 UI 组件与布局计算框架，并负责渲染⾄至⽬目标平台；
Layout/StyleHippy Layout
TextComponent
Text...Component
NodeRender
Portable UI
Hippy BufferBridge
TextComponent
Network...Module
X5 V8/JSCJS Executor
Native Framework
JS2NativeBridge
JavaScript
Native2JSBridge
ConsoleGlobal
Console...Global Method
AndroidPlatform
iOSPlatform
WebPlatformReact.jsLibrary
Vue.jsLibrary
User CodeJavaScript
-
项项⽬目架构
Layout/StyleHippy Layout
TextComponent
Text...Component
NodeRender
Portable UI
Hippy BufferBridge
TextComponent
Network...Module
X5 V8/JSCJS Executor
Native Framework
JS2NativeBridge
JavaScript
Native2JSBridge
ConsoleGlobal
Console...Global Method
Hippy Buffer⼆二进制传输协议，编解码性能更更好。
X5 V8X5 团队特供 V8 引擎。
Hippy LayoutiOS、Android 共享布局引擎，纯 C 开发，只有 50kb。
-
项项⽬目架构
Hippy SDK 采⽤用三层设计，其中：
• JavaScript 层：提供业务代码运⾏行行时的前端上下⽂文环境；
• Native Framework 层：负责前终端通讯与 Javascript VM，并提供 Native 相关模块；
• Portable UI 层：提供基础 UI 组件与布局计算框架，并负责渲染⾄至⽬目标平台；
Layout/StyleHippy Layout
TextComponent
Text...Component
NodeRender
Portable UI
Hippy BufferBridge
TextComponent
Network...Module
X5 V8/JSCJS Executor
Native Framework
JS2NativeBridge
JavaScript
Native2JSBridge
ConsoleGlobal
Console...Global Method
AndroidPlatform
iOSPlatform
WebPlatformReact.jsLibrary
Vue.js Library
User CodeJavaScript
-
Hippy-Vue 的初⼼心
容易易
复⽤用
纯粹
-
Hippy-Vue 三个⽬目标
容易易 前端开发所熟悉的
复⽤用 拥抱标准
纯粹 只做移动端的实现
-
Hippy-Vue 特性
同⼀一套代码，三端运⾏行行：
移动端⽤用 Hippy-Vue 渲染原⽣生代码浏览器器⾥里里⽤用原版 Vue 渲染⽹网⻚页代码
终端扩展 Vue.Native，可以通过它判断是否在终端运⾏行行，访问原⽣生能⼒力力。
-
Hippy-Vue 特性
同样的 div
浏览器器⾥里里⽀支持的背景图样式Hippy-Vue 同样⽀支持
跟浏览器器⼀一样通过 overflow 样式确定滚动⽅方向
-
Hippy-Vue 特性
CSS display 参数⽀支持 none 值v-show 照样使⽤用
-
Hippy-Vue 特性
textarea 跟浏览器器⼀一模⼀一样
v-model 直接⽤用来做数据绑定
Emoji ⽀支持没问题 😋
-
Hippy-Vue 架构
AndroidPlatform
iOSPlatform
WebPlatform
Vue appUser code
Vue.jsLibrary
Component Mapname/props/events…
Renderer
Vue.js Core vnode/events…
DOM EmulatingDocument/Element/Text…
CSS MatcherRegExp
Runtime
template/script/stylevue-plugin
Compiler
CSS ASThippy-vue-css-loader
CSS SelectorApply the styles
ConsoleGlobal
JavasSriptVirtual DOM
CSS Reverse SelectorApply styles to DOM
Component Translatorto Native
node-ops
Hippy-Vue
-
模板
Hello
{ name: "Text", // 组件名称转换 props: { value: "Hello", // 参数转换
onClick: true, // 事件绑定 },}
{ name: "Image", props: { source: { uri:
"http://www.qq.com/logo.png", }, },}
HTML Hippy Buffer
-
样式
CSS MatcherRegExp
CSS ASThippy-vue-css-loader
CSS Reverse SelectorApply styles to DOM
#id { color: red }#id .class { background-color: blue }
[ { selector: [['#id']], style: [{ color: 12345 }], }, {
selector: [['#id', '.class']], style: [{ backgroundColor: 56789 }]
}]
[ Matcher({ selector: [[IdSelector('id')]], style: [ { color:
12345 } ], }), Matcher({ selector: [[IdSelector('id'),
ClassSelector('class')]], style: [ { backgroundColor: 56789 } ]
})]
Hello
VueConf
Hangzhou
Hello VueConf Hangzhou
0: [false, false] = Mismatch1: [true, false] = Part Matched;2:
[true, true] = Full Matched;
-
你们关⼼心的问题
Vue 升级到 3.0 后？
-
核⼼心升级不不影响 Hippy-Vue
Hippy-Vue 只更更改 Vue 的输⼊入和输出，核⼼心逻辑并未侵⼊入：
• 通过 node-ops 接⼝口对接⾃自定义 DOM
• 转换 DOM 到终端。• 单独实现 CSS 编译和解析
Vue 3.0 升级后如果 node-ops 接⼝口不不变，则可以直接升级适配。
更更新：有了了 createRender() 更更⽅方便便了了。
Component Mapname/props/events…
Renderer
Vue.js Core vnode/events…
DOM EmulatingDocument/Element/Text…
CSS MatcherRegExp
Runtime
template/script/stylevue-plugin
Compiler
CSS ASThippy-vue-css-loader
CSS SelectorApply the styles
ConsoleGlobal
JavaScriptVirtual DOM
CSS Reverse SelectorApply styles to DOM
Component Translatorto Native
node-ops
Hippy-Vue
-
Hippy 将在近期开源
Thx a lotKeep in touch
