2019跨平台框架对W3C 标准的实现达成统一

W3C IG MeetingTencent

关于我们About us

移动端高性能的

微型浏览器

Who’s Using Hippy

目录CONTENT

01Various Cross-Platform Frameworks And Tiny Apps

现有的跨平台框架与小程序

02The Consideration of Choosing A Framework

开发者对框架的抉择

03Better Practice to Achieve The Standards Unification

更好的底层代码统一实现方式

04The Advancement of Nowadays W3C standards

对W3C现有标准的拓展

第一部分

Cross-Platform Applications

现有的跨平台框架与小程序

现有的跨平台框架与小程序Cross-Platform Applications

• 支持一端代码自动转换成

H5/RN/各家小程序

• 适配工作多，需要跟上各厂

商的更新节奏

Taro/Chameleon

• 不同小程序框架都实现了独有的

HTML/CSS/JS语法

• 不直接支持业界内通用的前端框架

• 有独立的支付、生物识别等接口

小程序

• 跨平台JS-终端一体化框架

• 前端支持React/Vue

• 终端可以封装组件给前端使用

Hippy/RN/Weex/快应用

第二部分

The Consideration of

Choosing

A Framework

开发者对框架的抉择

为什么选择跨平台框架Why Choose a Cross-Platform Framework

01需要多平台适配，但缺少终

端开发 02为了与之前基于React/Vue

等纯Web项目对齐代码，青

睐语法接近的框架

04希望可以同时支持

H5/iOS/Android/小程序，

但适配成本又不会太高

03在各框架提供的基础上希望

可以自由拓展组件，满足业

务需求

跨平台框架Cross-platform Framework building by JavaScript

移植代码有较高的适配成本

各框架的底层API实现不一致

CSS样式、JS能力支持不完整

比纯WebView的性能体验好，能实现如长列表,

复杂动画等需求，可以使用终端封装的组件

跨平台API对齐

对React/Vue等前端框架使用者友好

不需要学习终端OC/Java语法

开发易入门

优点/Pros 劣势/Cons

第三部分更好的底层代码统一实现方式Better Practice to

Achieve the Standards Unification

一个APP的组成The composition of an application

业务逻辑 样式

业务代码

APISDK

底层能力

终端能力

实现统一接口的SDKBuild A SDK With Unified Interface

JS底层API的对齐

常规API

Timer

Console

Canvas

Network Fetch

公用能力API

Share

User Login

Payment

新能力API

WebXR

（领先W3C草案的功能）

Push Notifications

统一实现的SDK标准Achieve The Standards Unification

CSS基本语法

Flex布局的支持

统一实现的SDK标准Achieve The Unification of The Standards

CSS基本语法

盒模型的可定制

(border-box/content-box)

统一实现的SDK标准Achieve The Unification of The Standards

CSS基本语法

长度单位

pt

统一实现的SDK标准Achieve The Unification of The Standards

CSS基本语法

长度单位

rpx

统一实现的SDK标准Achieve The Unification of The Standards

支持业务层自由选择JS框架

业务层

JS SDK层

Native Components终端层

请求接口层API返回调用结果

Web Componets

第四部分

The Advancement of Nowadays W3C Standards

对W3C现有标准的拓展

通过模块导出框架能力Export component including special ability

JS Modules

• 提供框架终端能力（如分享、录音）

• 导出为mjs或js模块

与Web Components的结合Build by Web Components

WebComponents

• template （负责View层）

• style（标准的css语法）（可import）

与Web Components的结合Build by Web Components

WebComponents

定义一个Web Component

与Web Components的结合Build by Web Components

WebComponents

通过slot的实现，实现模块的定制化组建

与现有W3C标准的对齐The compatibility of W3C standards

W3C 标准

• 统一各框架支付、登录、分享等平台差

异较大的接口

• 减少业务代码适配的成本

（注：Share API 仍在草案阶段）

感谢观看