2019/3/18推荐 |腾讯OMI下一代前端统一框架-爱骇客

下一代前端统一框架 – 支持桌面Web，移动H5和小程序 – Next Front End Framework http://omijs.org
Omi – 下一代前端框架，去万物糟粕，合精华为一点点JS
基于Web组件并支持IE8 +（omio）和小程序（omip）
Omi生态
→Omi生态学习路线图

项目描述
OMI-文档 Omi官方文档
omip 直接使用Omi开发小程序或H5 SPA！
OMIO 兼容老浏览器的Omi版本（支持到IE8 +和移动端浏览器）。
omiu Omi官方UI。
OMIX 极小却精巧的小程序框架。
OMI-MP 通过微信小程序开发和生成Web单页应用（H5 SPA）
OMI路由器 Omi官方路由，超级小的尺寸，只有1KB的js。→DEMO
md2site 用markdown生成静态网站文档。
OMI-MVVM MVVM王者归来，mappingjs强力加持。
OMI-图表一个chart-x标签搞定报表
MP-MVVM 小程序插上MVVM的翅膀，mappingjs强力加持。
OMI-HTML 在omi中使用htm。
OMI-30秒 30秒理解一段有用的Omi代码片段。
OMI-刷卡 Omi + Swiper
OMI-vscode omi的Vscode扩展，立即安装！
OMI精灵 Web Components，JSX和Canvas的完美融合
OMI帆布 Web Components，JSX和Canvas的完美融合
OMI-devtools 谷歌浏览器开发工具扩展
OMI-CLI 项目脚手架工具，各种模板任你选。
OMI-EX Omi.js扩展（TypeScript）
OMI变换 Omi和css3transform完美结合。让css3变换在你的Omi项目中变得超级简单。
OMI抽头 Omi原生支持tap事件（omi v4.0.24 +）
OMI手指 Omi官方手势库
OMI点触控丝般顺滑的触摸运动
OMI-SNAP 预渲染骨架屏
OMI-国际化 Omi国际化解决方案
OMI页基于page.js的Omi 路由
特性
提供桌面，移动和小程序整体解决方案
小巧的尺寸
拥有官方UI组件库 – omiu
使用omio可以兼容到IE8
真正的MVVM，拥有mappingjs强力支持
支持 TypeScript
响应式数据绑定
增强了CSS，支持rpx单位，基于750屏幕宽度
基于Shadow Dom设计
利用Chrome开发工具扩展轻松调试，从Chrome应用商店安装
符合浏览器的发展趋势以及API设计理念
Web Components + JSX相互融合为一个框架Omi
Web Components也可以数据驱动视图， UI = fn(data)
JSX是开发体验最棒（智能提示），语法噪音最少，图灵完备的UI表达式，模板引擎不完备，模板字符串完备但是语法噪音太大
看看Facebook React和Web Components对比优势，Omi融合了各自的优点，而且给开发者自由的选择喜爱的方式
Shadow DOM与Virtual DOM融合，Omi既使用了虚拟 DOM，也是使用真实Shadow DOM，让视图更新更准确更迅速
局部CSS最佳解决方案（Shadow DOM），社区为局部CSS折腾了不少框架和库（使用JS或JSON写样式，如：Radium，，jsxstyle; react-style与的WebPack绑定使用生成独特的类名文件名—类名—hash值，如：CSS Modules，Vue），还有运行时注入scoped atrr的方式，都是hack技术; Shadow DOM Style是最完美的方案
独创的Path Updating机制，基于代理全自动化的精准更新，功耗低，自由度高，性能卓越，方便集成requestIdleCallback，对此。更新说再见吧！只要使用store系统，它就会自动化按需更新局部视图
对比同样开发TodoApp，Omi和React渲染完的DOM结构，Omi使用Shadow DOM隔离样式和语义化结构：

尾身幸次应对
尾身幸次应对
必须收藏的资源
Omip编译H5原理揭秘
你必须收藏ES6 Spread Operator技巧
Omi snap骨架屏与快照
Omio兼容IE8踩坑之路
Omi生态发布
深入浅出Shadow Dom
HTM – JSX的替代品？还是另一种选择？
MVVM王者归来
60FPS动画在近江
将Web组件呈现为本机
Web组件MDN
Web组件Google
Web组件组织
代理MDN
CSS变量
CSS Shadow Parts
部分主题说明
平台HTML5
使用requestIdleCallback
requestIdleCallback polyfill
Web Components的力量
ShadowRoot
Firefox 63中的Web Components支持开发人员工具
目录
Omi生态
必须收藏的资源
一个HTML完全上手
再花30秒完全上手
快速入门
安装
项目模板
你好元素
TodoApp
商店
米特
生命周期
调试工具
浏览器兼容
React组件转成Omi
相关链接
贡献者们
维护者
感谢
执照
一个HTML完全上手
下面这个页面不需要任何构建工具就可以执行

点击这里看执行结果
Omi.js CDN
<！DOCTYPE html>
< html >

< 头 >
< meta charset = “ UTF-8 ” />
< title >在一分钟内添加Omi

< body >
< script src = “ https://unpkg.com/omi ” >
< script >
const { WeElement，h，render，define } = Omi

定义（’像按钮’，类延伸 WeElement {
安装（）{ 此。数据= {喜欢：假 } }

渲染（）{
如果（这个。数据。喜欢）{ 回报’你喜欢这个。’ }

返回 ħ（
‘按钮’， { 的onClick ：（）=> { 此。数据。喜欢= 真此。更新（） } }，’喜欢’ ） } }）

渲染（h（’ like-button ‘），’ body ‘）

通过上面脚本的执行，你已经定义好了一个自定义标签，可以不使用render方法，直接使用like-button标签：

< body >
< like-button >

再花30秒完全上手
你也可以使用现代化的JS语法，快速构建Omi项目：

从’ omi ‘导入 { render，WeElement，define }

define（’ my-counter ‘，类扩展 WeElement {
static observe = true

//也支持不加静，直接css = ..
静态 css = `
span {
颜色：红色;
} `

data = {
数： 1
}

sub =（）=> {
this。数据。数-
}

add =（）=> {
this。数据。数++
}

渲染（）{
返回（
< DIV >
<按钮的onClick = { 此。子 } > – < /按钮>
<跨度> { 此。数据。计数 } < /跨度>
<按钮的onClick = { 此。添加 } > + < / button >
< / div >
）
}
}）

渲染（< my – counter / >，’ body ‘）
也可以手动调用this.update，这样你就可以选择最佳的时机进行更新，比如：

从’ omi ‘导入 { render，WeElement，define }

define（’ my-counter ‘，类扩展 WeElement {
data = {
数： 1
}

static css = `
span {
color：red;
} `

sub =（）=> {
this。数据。伯爵-
这个。更新（）
}

add =（）=> {
this。数据。算上++
此。更新（）
}

渲染（< my – counter / >，’ body ‘）
→计数器演示

快速入门
安装
$ NPM我OMI-CLI -g ＃安装CLI
$ OMI初始化我的应用程序内＃初始化项目，你也可以执行Exec OMI初始化“在空文件夹
$ CD我的应用程序内＃请，如果你忽视执行此命令’OMI INIT’在一个空文件夹
$ npm start ＃ develop
$ npm run build ＃ release
npx omi-cli init my-app 也支持（要求npm v5.2.0 +）

目录说明：

├─ config
├─ public
├─ scripts
├─ src
│ ├─ assets
│ ├─ elements //存放所有 custom elements
│ ├─ store //存放所有页面的 store
│ ├─ admin.js //入口文件，会 build 成 admin.html
│ └─ index.js //入口文件，会 build 成 index.html
脚本
“ scripts ”：{
“ start ”： “ node scripts / start.js ”，
“ build ”： “ PUBLIC_URL =。nodes scripts / build.js ”，
“ build-windows ”： “ set PUBLIC_URL =。&& node scripts / build .js “，
”修复“： ” eslint src –fix “
}
你也可以设置PUBLIC_URL，比如：

…
“ build ”：“ PUBLIC_URL = https://fe.wxpay.oa.com/dv node scripts / build.js ”，
“ build-windows ”：“ set PUBLIC_URL = https：//fe.wxpay.oa .com / dv && node scripts / build.js “，
…
切换omi和omio
增加或删除package.json里的别名配置可以切换omi和omio渲染：

…
“ alias ”： {
“ omi ”： “ omio ”
}
…
项目模板
模板类型命令描述
基础模板（V3.3.0 +） omi init my-app 基础模板，支持omi和omio（IE8 +）
小程序模板（v3.3.5 +） omi init-p my-app Omi开发小程序
支持预渲染快照骨架的模板 omi init-snap my-app 基础模板，支持omi和omio（IE8 +），内置预渲染
TypeScript模板（omi-cli v3.3.0 +） omi init-ts my-app 使用TypeScript的模板
移动模板 omi init-weui my-app 使用了weui和omi-router的移动web app模板
omi-mp模板（omi-cli v3.0.13 +） omi init-mp my-app 小程序开发Web的模板
MVVM模板（omi-cli v3.0.22 +） omi init-mvvm my-app MVVM模板
Cli自动创建的项目脚手架是基于单页的create-react-app改造成多页的，有配置方面的问题可以查看create-react-app用户指南。

你好元素
先创建一个自定义元素：

从’ omi ‘导入 { define，WeElement }

定义（’你好元素’，类延伸 WeElement {
的onClick = EVT => {
//触发CustomEvent的
此。火灾（’ ABC ‘，{名称： ‘ dntzhang ‘，年龄： 12 }）
EVT。stopPropagation（）
}

css = `
div {
color：red;
游标：指针;
} `
}

渲染（道具）{
回报率（
< DIV的onClick = { 此。的onClick } >
你好{ 道具。味精 } { 道具。propFromParent }
< DIV >点击我！< / DIV >
< / DIV >
）
}
}）
使用该元素：

进口 { 定义，渲染，WeElement } 从 ‘ OMI ‘
进口 ‘ ./hello-element ‘

define（’ my-app ‘，类扩展 WeElement {
data = {abc ： ‘ abc ‘，passToChild ： 123 }

//定义自定义事件处理程序
onAbc = EVT => {
//由evt.detail得到EVT数据
此。数据。abc = ‘ by ‘ + evt。细节。这个名字
。数据。passToChild = 1234 这个。更新（）

}

css = `
div {
color：green;
} `
}

渲染（道具，数据）{
返回（
< DIV >
你好{ 道具。名 } { 数据。ABC }
<你好-元件
onAbc = { this。onAbc }
propFromParent = { data。passToChild }
msg = “ WeElement ”
/ >
< / div >
）
}
}）

渲染（< my – app name = “ Omi v4.0 ” / >，’ body ‘）
告诉Babel把JSX转化成Omi.h（）的调用：

{
“ presets ”：[ “ env ”，“ omi ” ]
}
需要安装下面两个npm包支持上面的配置：

“ babel-preset-env ”： “ ^ 1.6.0 ”，
“ babel-preset-omi ”： “ ^ 0.1.1 ”，
如果你使用babel7，也可以使用如下包和配置：

npm install –save-dev @ babel / preset-env
npm install –save-dev @ babel / preset-react
{
“ presets ”： [
“ @ babel / preset-env ”，
[
“ @ babel / preset-react ”，
{
“ pragma ”： “ Omi.h ”
}
]
]
}
如果不想把css写在js里，你可以使用webpack to-string-loader，比如下面配置：

{
测试：/ [ \\ | \ / ] _ [ \ S ] * \。css $ /，
使用： [
‘ to-string-loader ‘，
‘ css-loader ‘
]
}
如果你的css文件以_开头，css会使用to-string-loader。如：

来自’ omi ‘的 import { tag，WeElement render }

define（’ my-app ‘，类扩展 WeElement {

CSS = 需要（’ ./_index.css ‘）
…
…
…
你也可以忘掉这一对繁琐的配置直接使用omi-cli，不需要你配置任何东西。

TodoApp
下面列举一个相对完整的TodoApp的例子：

从’ omi ‘导入 { define，render，WeElement }

定义（’待办事项列表’，函数（道具）{
返回（
< UL >
{ 道具。项。图（项目 => （
<李键= { 项。ID } > { 项。文本 } < /李>
））}
< / ul >
）
}）

define（’ todo-app ‘，类扩展 WeElement {
static observe = true

data = {items ： []，text ： ‘ ‘ }

渲染（）{
返回（
< DIV >
< H3 > TODO < / H3 >
<待办事项-列表项= { 此。数据。项 } / >
<形式的onSubmit = { 此。handleSubmit } >
<输入
id = “ new-todo ”
onChange = { this。handleChange }
value = { this。数据。text }
/ >
< button >添加＃{ this。数据。物品。长度 + 1 } < / button >
< / form >
< / div >
）
}

handleChange = e => {
this。数据。text = e。目标。值
}

handleSubmit = e => {
e。的preventDefault（）
如果（！此。数据。文本。修剪（）。长度）{
回报
}
这个。数据。物品。推（{
文字：这个。数据。文字，
id ：日期。现在（）
}）
这个。数据。text = ‘ ‘
}
}）

渲染（< todo – app / >，’ body ‘）
商店
Omi的Store体系：从根组件注入，在所有子组件可以共享。使用起来非常简单：

从’ omi ‘导入 { define，render，WeElement }

define（’ my-hello ‘，类扩展 WeElement {
render（）{
//任意子组件的任意方法都可以使用this.store访问注入的商店
返回 < div > { this。商店。名称 } < / div >
}
}）

定义（’我的应用内’，类延伸 WeElement {
handleClick =（）=> {
//任意子组件的任意方法都可以使用this.store访问注入的储存
此。店。反向（）
此。更新（）
}

渲染（）{
返回（
< DIV >
<我的-你好/ >
<按钮的onclick = { 此。handleClick } >逆转< /按钮>
< / DIV >
）
}
}）

const store = {
name ： ‘ abc ‘，
reverse ： function（）{
this。name = this。名字。分裂（“ ”）。反转（）。加入（“ ”）
}
}
//通过第三个参数注入
渲染（ <我的 -应用程序 / >，文档。主体，存储）
与全局变量不同的是，当有多个根节点的时候就可以注入多个商店，而全局变量只有一个。

米特
如果不想使用store的数据体系，也可以使用发布订阅模式。比如在Omi中使用mitt跨组件通讯：

交叉组件的通信
生命周期
生命周期方法当它被调用
install 在组件安装到DOM之前
installed 组件安装到DOM后
uninstall 在从DOM中删除之前
beforeUpdate 在更新之前
updated 更新后
beforeRender 之前 render()
receiveProps 父元素重新渲染将触发它
调试工具
使用Omi开发工具可以非常简单地调试和管理你的UI。不需要任何配置，你只要安装然后就能调试。

既然Omi使用了Web Components和Shadow-DOM，所以不需要像React一样安装其他元素面板，只需要使用Chrome自带的Elements的侧边栏便可，它和React开发者工具一样强大。

React组件转成Omi
举个例子，下面是吧weui react的按钮转成weui omi的按钮的例子：

差异分裂
差异统一
之前
后
浏览器兼容
Omio – 兼容老浏览器的Omi版本（支持到IE8 +和移动端浏览器）