比特派交易所下载|omi

比特派交易所下载|omi

作者： 比特派交易所下载
2024-03-07 20:21:29

福建省欧米投资有限公司——官网

福建省欧米投资有限公司——官网

天猫旗舰店

新品秀

女士

男士

双肩包

拉杆箱

小件类

欧米故事

新品秀

2023新品秀

女士

手提包

双肩包

单肩包/斜挎包

水桶包

链条包

其他

男士

公文包

钱夹

皮带

其他

双肩包

男士

女士

通用/中性

其他

拉杆箱

登机箱（18~22英寸）

中号箱（23~26英寸）

大号箱（27~31英寸）

铝箱

皮箱

布箱

其他

小件类

钱夹

名片夹

皮带

箱包吊饰

其他

欧米故事

品牌故事

2023春夏新品画册

2023新品秀

品牌动态

中文  英文

搜索

购物车

会员中心 

最新活动

新闻动态

活动&新闻

页面版权所有 © 2018 福建省欧米投资有限公司 电话：4008-828-101

加盟优势

加盟条件

加盟流程

战略合作伙伴

招商加盟

关于公司

客户服务

专属服务

免费标准配送

免费上油保养

 

关注OMI

微信

官方商城

关于OMI

企业文化

人才招募

企业信息

微博

常见问题

文件下载

安全与隐私

在线留言

联系我们

闽ICP备06032162号 网站建设：中企动力 厦门

时尚“隐”力

藏在背包的秘密，带你解锁时尚的奥秘

更多 >

2023夏季时尚腋下包

双肩包

 ¥ 559.00

点击购买 时尚“隐”力

藏在背包的秘密，带你

解锁时尚的奥秘

更多 >

¥ 599.00

腋下包

2023夏季时尚手提包

点击购买 热门推荐

欧米OMI包包女斜挎包2023新款潮高级感时尚链条包法式女包单肩包

属性

欧米OMI包包女斜挎包2023新款单肩包小众设计质感手提女包链条包

属性

欧米OMI包包女链条单肩包2023新款潮高级感时尚手提包斜挎包女包

属性

品牌动态

2023夏季新品画册

欣赏完整大片

2023新品走秀

 

品牌动态

查找附近的门店

跨界 - Omi �布多端统一框� Omip 打通�程�� Web | 微信开放社区

跨界 - Omi �布多端统一框� Omip 打通�程�� Web | 微信开放社区

交�专区�务市场微信学堂文档�程�常用主页�程��游��业微信微信支付�务市场微信学堂文档登录评论置顶跨界 - Omi �布多端统一框� Omip 打通�程�� Web精选热门dntzhang(张磊)2019-02-2812063�览18评论Omi 框�是腾讯研�的下一代�端框�， 基� Web Components 规范设计的组件化框�，�以开� PC Web�移动端 H5，也�以直�使用 Omi 开��程�。Omip

今天，Omi �仅仅�以开�桌� Web�移动 H5，还�以直�开��程��直�开��程��直�开��程��

→ omijs.org

→ Github 地�

Omi 简介

Omi 框�是腾讯研�的下一代�端框�， 基� Web Components 规范设计的组件化框�，�以开� PC Web�移动端 H5，也�以直�使用 Omi 开��程�。Omi �务�腾讯的 H5 页�, PC 网站以�腾讯内部的一些管�系统和�程�等。自�年年底开�以�，该项目共�得 Star 数 7000+，贡献者 40+。Omi 借助京东 O2Team 优秀的 taro 多端统一框�，以� Omi 开�团队和社区贡献者近期的共�努力，使 Omi 打通了�程�� Web。细心的用户会��，Omi 的 slogan � 下一代 Web 框� �更为 下一代�端框�, 因为 Omip 的加入，Omi 生� Web �能脱离 Web。

�样的语法，�样的书写格�，�行在��的平����的�境，除了一些平�特有的API，几��用任何改动! �的 Omi 项目�一些�其微�的改动(平�特性相关)就能跑在安�/IOS的�程�里。

Learn Once, Write Anywhere

Write Once, Run Anywhere

Omip 特性

一次学习，多处开�，一次开�，多处�行

使用 JSX，表达能力和编程体验大�模�

支�使用 npm/yarn 安装管�第三方�赖

支�使用 ES6+

支�使用 CSS 预编译器

�程� API 优化，异步 API Promise 化

超轻�的�赖包，顺��程�标签和组件的设计

快速开始

npm i omi-cli -g

omi init-p my-app

cd my-app

npm start //开��程�

npm run dev:h5 //开� h5

npm run build:h5 //�布 h5

把�程�目录设置到 dist 目录就�以愉快地调试了�

node 版本�求 >= 8

也支�一�命令 npx omi-cli init-p my-app (npm v5.2.0+)

当然也支� TypeScript:

omi init-p-ts my-app

TypeScript 的其他命令和上�一样，也支��程�和 h5 SPA 开�。

Omip 多端示例

Omi 其他

社区化�展，欢�加入并贡献社区

目� Omi 的贡献者�布国内外�大公�（中国�韩国��国�土耳其），Omi 共��了快 40 �贡献者的文档和代��交，核心贡献者共 11 �。欢�有想法有能力有激情的开�者加入贡献者行列并最终能够进入 Omi Team。

你�以�这几个方�贡献：

1.翻译文档，目�有中文�英文和韩文，欢�其他语言版本的翻译加入

2.�交补�代�优化 Omi

3.积��� Issue 的讨论，如答疑解惑��供想法或报告无法解决的错误

4.贡献案例，�以是管����PC 网站�移动端 H5等等

5.完善文档，�以��修正文档，让其更易懂，上手更快

6.扩展 Omi 生�，编写 Omi 自定义组件

7.分享� Omi 的故事

8.写 Omi 相关的 blog

我们�常欢�开�者们为腾讯开�贡献一份力�，相应也将给予贡献者激励以表认��感谢。��腾讯贡献者激励计划

Omi 交�群

欢�加入Omi交�群，群���：256426170，也�扫�加入:

æ„Ÿè°¢

感谢京东 O2Team taro 项目

感谢京东 O2Team taro 团队

Github

https://github.com/Tencent/omi

最�一次编辑�  2019-03-20  点� 5收�分享

扫��程��分享�制链�删除文章�，文章内容和评论将一并被删除，且����。删除�消评论关闭请选择投诉�由广告内容�法�规���水内容其他18 个评论Dircex2019-03-01加粗标红�入代��入链��入图片上传视频

请 登录 ��表内容

关闭新�或编辑超链�链�地�确认�消关闭�入视频视频链�确认�消�表�害了你好，麻烦通过点击下方“�馈信��按钮，�供出�问题的。待楼主�馈2019-03-01�� 2�� 关闭请选择投诉�由广告内容�法�规���水内容其他陈��2019-03-01加粗标红�入代��入链��入图片上传视频

请 登录 ��表内容

关闭新�或编辑超链�链�地�确认�消关闭�入视频视频链�确认�消�表�常支��在�程��用了一个框�模�就是Omix�供了�常的解决�路和方案，真的�高很大的效�你好，麻烦通过点击下方“�馈信��按钮，�供出�问题的。待楼主�馈2019-03-01�� 2�� 1dntzhang(张磊)2019-03-01加粗标红�入代��入链��入图片上传视频

请 登录 ��表内容

关闭新�或编辑超链�链�地�确认�消关闭�入视频视频链�确认�消�表�能��更多�你好，麻烦通过点击下方“�馈信��按钮，�供出�问题的。待楼主�馈2019-03-01� ��关闭请选择投诉�由广告内容�法�规���水内容其他关闭请选择投诉�由广告内容�法�规���水内容其他铭锋科技2019-02-28加粗标红�入代��入链��入图片上传视频

请 登录 ��表内容

关闭新�或编辑超链�链�地�确认�消关闭�入视频视频链�确认�消�表��支�你好，麻烦通过点击下方“�馈信��按钮，�供出�问题的。待楼主�馈2019-02-28�� 2�� 关闭请选择投诉�由广告内容�法�规���水内容其他哆啦A�2019-03-07加粗标红�入代��入链��入图片上传视频

请 登录 ��表内容

关闭新�或编辑超链�链�地�确认�消关闭�入视频视频链�确认�消�表这个轮�圆�圆？你好，麻烦通过点击下方“�馈信��按钮，�供出�问题的。待楼主�馈2019-03-07�� 1�� 关闭请选择投诉�由广告内容�法�规���水内容其他阿巴阿巴2019-03-06加粗标红�入代��入链��入图片上传视频

请 登录 ��表内容

关闭新�或编辑超链�链�地�确认�消关闭�入视频视频链�确认�消�表新项目打算用omip😄😄你好，麻烦通过点击下方“�馈信��按钮，�供出�问题的。待楼主�馈2019-03-06�� 1�� 关闭请选择投诉�由广告内容�法�规���水内容其他2019-03-04加粗标红�入代��入链��入图片上传视频

请 登录 ��表内容

关闭新�或编辑超链�链�地�确认�消关闭�入视频视频链�确认�消�表贊一个。你好，麻烦通过点击下方“�馈信��按钮，�供出�问题的。待楼主�馈2019-03-04�� 1�� 关闭请选择投诉�由广告内容�法�规���水内容其他张远山2019-03-02加粗标红�入代��入链��入图片上传视频

请 登录 ��表内容

关闭新�或编辑超链�链�地�确认�消关闭�入视频视频链�确认�消�表目�在使用omix，感觉还行。今天更新了一下，解决了一些问题。但是加上了store了以��替�好多。你好，麻烦通过点击下方“�馈信��按钮，�供出�问题的。待楼主�馈2019-03-02�� 1�� 关闭请选择投诉�由广告内容�法�规���水内容其他I'am 大豆�文 ark2019-03-01加粗标红�入代��入链��入图片上传视频

请 登录 ��表内容

关闭新�或编辑超链�链�地�确认�消关闭�入视频视频链�确认�消�表gogo你好，麻烦通过点击下方“�馈信��按钮，�供出�问题的。待楼主�馈2019-03-01�� 1�� 关闭请选择投诉�由广告内容�法�规���水内容其他2019-03-01加粗标红�入代��入链��入图片上传视频

请 登录 ��表内容

关闭新�或编辑超链�链�地�确认�消关闭�入视频视频链�确认�消�表��支�，Omi的生�真丰富（你好，麻烦通过点击下方“�馈信��按钮，�供出�问题的。待楼主�馈2019-03-01�� 1�� 关闭请选择投诉�由广告内容�法�规���水内容其他2019-03-01加粗标红�入代��入链��入图片上传视频

请 登录 ��表内容

关闭新�或编辑超链�链�地�确认�消关闭�入视频视频链�确认�消�表��打�，支�你好，麻烦通过点击下方“�馈信��按钮，�供出�问题的。待楼主�馈2019-03-01�� 1�� 关闭请选择投诉�由广告内容�法�规���水内容其他12正在加载...加粗标红�入代��入链��入图片上传视频

请 登录 ��表内容

关闭新�或编辑超链�链�地�确认�消关闭�入视频视频链�确认�消关闭关注“微信开放社区�公众�关注�，�在微信内�收相应的���醒。请使用微信扫�二维�关注 “微信开放社区� 公众�作者介�关注文章标签omi关�腾讯��规范文档中心辟谣中心客�中心Copyright © 2012-2024 Tencent. All Rights Reserved.

�Mac App Store 上的“录�专家Omi-�幕录制编辑软件�

�Mac App Store 上的“录�专家Omi-�幕录制编辑软件�

退出商店Apple商店MaciPadiPhoneWatchAirPods家居娱乐配件技术支持

0+

Mac App Store 预览

录�专家Omi-�幕录制编辑软‪件‬

4+

支�内录系统声音时�步记录麦克��摄�头画‪�‬

JingZhi He

4.9 • 1.7万 个评分

�费

�供 App 内购买项目

截�

简介

Omi录�专家for mac让你快速记录自己的工作步骤。无论是整个�幕，还是划定的区域，或者�自摄�头的画�，都能一键录制。你的视频文件将被�存为mp4格�。主�功能- 全�录制- 区域录制- 摄�头录制- 窗�录制 (适用�macOS 12.3�以上版本)- 应用录制 (适用�macOS 12.3�以上版本)- 声音录制- 摄�头画中画- 摄�头虚拟背景（适用�macOS 12.0�以上版本）- 录制系统声音（需��独下载安装声音驱动�件）- 录制鼠标点击事件- 录制按键事件- 录制中简��幕绘制功能- 选择录制画�尺寸- 选择录制画�帧�- 选择录制画�分辨�- 指定录制时长- 视频编辑器- 设置快�键Omi录�专家�供以下�级到VIP�解�的功能,您�以�得所有高级�务。�务：�级为VIP解�无�制使用一次性购买以�得终身访问��月订阅年度订阅价格�能因地点而异。��政策和使用�款https://docs.qq.com/doc/DWnlQaXV6c3hhcWxXhttps://docs.qq.com/doc/DWkJVc3Fhd0xSdEdP

新内容

2024年2月26日

版本 1.3.8

- 一些错误修�- 部分用户界�优化

评分�评论

4.9（满分 5 分）

1.7万 个评分

1.7万 个评分

，，��。。//趣味�动会

，

2022/11/25

软件使用感觉很好

虽然我还没有学会�么录制电脑系统声音，但是就目�的使用情况也�以给4分，（还有一分扣在，希望�以出更详细的教学）。如�官网以�教程�以更直观一些就更加用户�好了，�在的设置有点�蔽。所以希望开�者看到了�以百忙之中抽时间给一下��，谢谢��

开�人员��

，

感谢，希望一切都好，最近大家都�了，好难�。

DDDaraAAA

，

2022/10/10

��一个问题

系统录制时，�然出�了声音无法录制，画��然有，很烦，这个问题是我用了两个月�出�的问题，�能是我�入了耳机，但�在耳机�了问题�然在，甚至�扬声器的录制声音都没了。希望这个问题能尽快解决，没法录制声音真的是录制软件的硬伤，但能�到�费和功能如此多，还是挺�容易的，感谢开�者。

开�人员��

，

1.1.2正好�了大版本的驱动更新，改动比较大，如�是�级用户建议把��版本包括驱动�载，然��新安装最新版本。如�还是有问题，�以加我微信appsupportgroup看一下具体是�录制那个应用的声音。

fengqingyueming

，

2022/03/21

�错，很好用。

录了七八个�时的视频，没有出� 一次问题。尤其是有定时录的功能，这样就���以设置好时间，录网上课程�在是太方便了。�以选择录系统内部声音。也没有烦人的广告，还有视频转�和编辑功能，碰到这样的产�真是�气�给雷锋点���

开�人员��

，

感谢使用，有任何问题，欢�加我微信appsupportgroup

App ��

开�者“JingZhi He�已表�该 App 的��规范�能包括了下述的数�处�方�。有关更多信�，请�阅开�者��政策。

未�你关�的数�

开�者�能会收集以下数�，但数��会关�你的身份：

标识符

使用数�

诊断

��处�规范�能基�你使用的功能或你的年龄等因素而有所��。了解更多

信�

供应商

JingZhi He

大�

20.9 MB

类別

效�

兼容性

Mac

设备需装有 macOS 10.13 或更高版本。

语言

简体中文， �体中文， 英语

年龄分级

4+

Copyright

© Jingzhi He

ä»·æ ¼

�费

App 内购买项目

VIP 按月自动续费

Â¥38.00

终身VIP

Â¥148.00

VIP 按年自动续费

Â¥68.00

终身VIP（�广）

Â¥68.00

App 支�

��政策

App 支�

��政策

更多�自此开�人员的 App

Ainder - 和AI练雅��语�虚拟谈�爱

效�

更多选购方式：查找你附近的 Apple Store 零售店及更多门店，或者致电 400-666-8800。

Copyright © 2023 Apple Inc. 保留所有权利。

隐私政策

使用条款

销售政策

法律信息

网站地图

omi: Omi - 前端跨框架跨平台框架 基于 Web Components 并支持 IE8+(omio)，小程序(omi-kbone) 和 任意前端框架集成

omi: Omi - 前端跨框架跨平台框架

基于 Web Components 并支持 IE8+(omio)，小程序(omi-kbone) 和 任意前端框架集成

登录

注册

开源

企业版

高校版

搜索

帮助中心

使用条款

关于我们

开源

企业版

高校版

私有云

Gitee AI

NEW

我知道了

查看详情

登录

注册

代码拉取完成，页面将自动刷新

开源项目

>

WEB应用开发

>

WebUI组件/框架

&&

捐赠

捐赠前请先登录

取消

前往登录

扫描微信二维码支付

取消

支付完成

支付提示

将跳转至支付宝完成支付

确定

取消

Watch

不关注

关注所有动态

仅关注版本发行动态

关注但不提醒动态

29

Star

133

Fork

0

腾讯开源 / omi

代码

Issues

0

Pull Requests

0

Wiki

统计

流水线

服务

Gitee Pages

质量分析

Jenkins for Gitee

腾讯云托管

腾讯云 Serverless

悬镜安全

阿里云 SAE

Codeblitz

我知道了，不再自动展开

加入 Gitee

与超过 1200万 开发者一起发现、参与优秀开源项目，私有仓库也完全免费 ：）

免费加入

已有帐号？

立即登录

返回

master

管理

管理

分支 (13)

标签 (168)

master

v6.25

v6

dependabot/npm_and_yarn/packages/omim/templates/acorn-6.4.1

pr/370

add-observe-type

omi-ts-support-png

add-app-ts

update-omi-d-ts

update-omi.d.ts

ie11

v3

fix-scoper-pesudo-issue

v7.6.6

v7.6.1

v7.5.6

v7.5.5

v7.5.0

v7.4.5

v7.4.1

v7.3.10

v7.3.9

v7.3.8

v7.3.6

v7.3.5

v7.3.1

v7.3.0

v7.2.1

v7.2.0

v7.1.14

v7.1.13

v7.1.12

v7.1.10

克隆/下载

克隆/下载

HTTPS

SSH

SVN

SVN+SSH

下载ZIP

登录提示

该操作需登录 Gitee 帐号，请先登录后再操作。

立即登录

没有帐号，去注册

提示

下载代码请复制以下命令到终端执行

为确保你提交的代码身份被 Gitee 正确识别，请执行以下命令完成配置

git config --global user.name userName

git config --global user.email userEmail

初次使用 SSH 协议进行代码克隆、推送等操作时，需按下述提示完成 SSH 配置

1

生成 RSA 密钥

2

获取 RSA 公钥内容，并配置到 SSH公钥 中

在 Gitee 上使用 SVN，请访问 使用指南

使用 HTTPS 协议时，命令行会出现如下账号密码验证步骤。基于安全考虑，Gitee 建议 配置并使用私人令牌 替代登录密码进行克隆、推送等操作

Username for 'https://gitee.com': userName

Password for 'https://userName@gitee.com':

#

私人令牌

新建文件

新建子模块

上传文件

分支 13

标签 168

贡献代码

同步代码

创建 Pull Request

了解更多

对比差异

通过 Pull Request 同步

同步更新到分支

通过 Pull Request 同步

将会在向当前分支创建一个 Pull Request，合入后将完成同步

dntzhang

fix(omi): computed fn should run only once

32f64e5

285 次提交

提交

取消

提示:

由于 Git 不支持空文件夾，创建文件夹后会生成空的 .keep 文件

assets

保存

取消

packages

保存

取消

.gitattributes

保存

取消

.gitignore

保存

取消

LICENSE

保存

取消

README.CN.md

保存

取消

README.md

保存

取消

Loading...

README

English | 简体中文

Omi - Web Components 框架

信号 Signal 驱动的响应式编程，reactive-signal强力驱动

⚡ 微小的尺寸，极速的性能

目标 100+ 模板 & OMI 模板源码

OMI Form & OMI Form 游乐场 & Lucide Omi 图标

你要的一切都有: Web Components, JSX, Function Components, Router, Suspense, Directive, Tailwindcss...

面向对象编程(OOP) 和 数据驱动编程(DOP) 两种范式都支持

使用 Constructable Stylesheets 轻松管理和共享样式

import { render, signal, tag, Component, h } from 'omi'

const count = signal(0)

function add() {

count.value++

}

function sub() {

count.value--

}

@tag('counter-demo')

export class CounterDemo extends Component {

static css = 'span { color: red; }'

render() {

return (

<>

{count.value}

)

}

}

使用该组件:

import { h } from 'omi'

import './counter-demo'

render(, document.body)

// 或者

import { CounterDemo, Other } from './counter-demo'

// 当需要导入其他东西的时候，防止被 tree shaking

render(, document.body)

// 或者

document.body.appendChild(document.createElement('counter-demo'))

安装

npm i omi

快速创建 Omi + Vite + TS/JS 项目：

$ npx omi-cli init my-app # 或者创建js项目: npx omi-cli init-js my-app

$ cd my-app

$ npm start # develop

$ npm run build # release

快速创建 Omi + Router + Signal + Suspense + Tailwindcss + Vite + TS 项目：

$ npx omi-cli init-spa my-app

$ cd my-app

$ npm start # develop

$ npm run build # release

包

核心包

omi - Omi 框架的实现代码。

omi-form - 强大易用且跨框架的表单解决方案。

lucide-omi - Lucide 的 Omi 图标集合。

omiu - 希望打造最好的 web 组件。

omi-router - 创建单页应用。

omi-cli - 快速创建 Omi + Vite + TS/JS 项目。

入门套件 (未发布到 npm)

omi-elements - 官方推出 Tailwind Omi 套件。

omi-starter-spa - 快速创建单页应用(SPA)，内置了 Omi + OmiRouter + Tailwindcss + TypeScript + Vite + Prettier。

omi-starter-ts - 基于 Vite + Omi + TypeScript 的模板。

omi-starter-tailwind - 基于 Vite + Omi + TypeScript + Tailwindcss 的模板。

omi-starter-js - 基于 Vite + Omi + JavaScript 的模板。

omi-vue - Vue SFC + Vite + OMI + OMI-WeUI.

组件

omi-weui - Omi 版本的 WeUI。

omi-auto-animate - Omi 版本的 @formkit/auto-animate。

omi-suspense - 处理异步依赖。

指令

omi-transition - 提供进入和离开动画。

omi-ripple - 用于为用户界面元素添加涟漪（ripple）效果。当用户与元素交互（例如点击按钮）时，涟漪效果会从交互点开始扩散开来。

综合性例子 (未发布到 npm)

snake-game-2tier - 基于 Omi Signal class 两层架构的贪吃蛇游戏。

snake-game-3tier - 基于 Omi 响应是函数三层架构的贪吃蛇游戏。

omi-tutorial - Omi 官方教程源代码。

如果你想帮助项目发展，可以先简单地与同行分享!

Share via Dev.to

Share via Twitter

Share via Facebook

Share via LinkedIn

Share via Pinterest

Share via Reddit

Share via StumbleUpon

Share via Vkontakte

Share via Weibo

Share via Hackernews

多谢！

使用

TodoApp 使用响应式函数

数据驱动编程

在数据驱动编程中，我们将重点放在数据本身和对数据的操作上，而不是数据所在的对象或数据结构。这种编程范式强调的是数据的变化和流动，以及如何响应这些变化。基于响应式函数的 TodoApp 就是一个很好的例子，它使用了响应式编程的概念，当数据（即待办事项列表）发生变化时，UI 会自动更新以反映这些变化。

import { render, signal, computed, tag, Component, h } from 'omi'

const todos = signal([

{ text: 'Learn OMI', completed: true },

{ text: 'Learn Web Components', completed: false },

{ text: 'Learn JSX', completed: false },

{ text: 'Learn Signal', completed: false }

])

const completedCount = computed(() => {

return todos.value.filter(todo => todo.completed).length

})

const newItem = signal('')

function addTodo() {

// api a，不会重新创建数组

todos.value.push({ text: newItem.value, completed: false })

todos.update() // 非值类型的数据更新需要手动调用 update 方法

// api b, 和上面的 api a 效果一样，但是会创建新的数组

// todos.value = [...todos.value, { text: newItem.value, completed: false }]

newItem.value = '' // 值类型的数据更新需会自动 update

}

function removeTodo(index: number) {

todos.value.splice(index, 1)

todos.update() // 非值类型的数据更新需要手动调用 update 方法

}

@tag('todo-list')

class TodoList extends Component {

onInput = (event: Event) => {

const target = event.target as HTMLInputElement

newItem.value = target.value

}

render() {

return (

<>

    {todos.value.map((todo, index) => {

    return (

  • type="checkbox"

    checked={todo.completed}

    onInput={() => {

    todo.completed = !todo.completed

    todos.update()

    }}

    />

    {todo.completed ? {todo.text} : todo.text}

    {' '}

    • )

    })}

Completed count: {completedCount.value}

)

}

}

render(, document.body)

TodoApp 使用信号类 Signal

面向对象编程

在面向对象编程中，我们将重点放在对象上，对象包含了数据和操作数据的方法。这种编程范式强调的是对象之间的交互和协作，以及如何通过对象的封装、继承和多态性来组织和管理代码。基于响应式函数的 TodoApp 也可以使用面向对象的方式来实现，例如，我们可以创建一个 TodoList 类，这个类包含了待办事项列表的数据和操作这些数据的方法，以及一个 update 方法来更新 UI。

import { render, Signal, tag, Component, h, computed } from 'omi'

type Todo = { text: string, completed: boolean }

class TodoApp extends Signal<{ todos: Todo[], filter: string, newItem: string }> {

completedCount: ReturnType

constructor(todos: Todo[] = []) {

super({ todos, filter: 'all', newItem: '' })

this.completedCount = computed(() => this.value.todos.filter(todo => todo.completed).length)

}

addTodo = () => {

// api a

this.value.todos.push({ text: this.value.newItem, completed: false })

this.value.newItem = ''

this.update()

// api b, same as api a

// this.update((value) => {

// value.todos.push({ text: value.newItem, completed: false })

// value.newItem = ''

// })

}

toggleTodo = (index: number) => {

const todo = this.value.todos[index]

todo.completed = !todo.completed

this.update()

}

removeTodo = (index: number) => {

this.value.todos.splice(index, 1)

this.update()

}

}

const todoApp = new TodoApp([

{ text: 'Learn OMI', completed: true },

{ text: 'Learn Web Components', completed: false },

{ text: 'Learn JSX', completed: false },

{ text: 'Learn Signal', completed: false }

])

@tag('todo-list')

class TodoList extends Component {

onInput = (event: Event) => {

const target = event.target as HTMLInputElement

todoApp.value.newItem = target.value

}

render() {

const { todos } = todoApp.value

const { completedCount, toggleTodo, addTodo, removeTodo } = todoApp

return (

<>

    {todos.map((todo, index) => {

    return (

  • type="checkbox"

    checked={todo.completed}

    onInput={() => toggleTodo(index)}

    />

    {todo.completed ? {todo.text} : todo.text}

    {' '}

    • )

    })}

Completed count: {completedCount.value}

)

}

}

render(, document.body)

这里不讨论哪种方式(DOP,OOP)的好坏，使用 omi 两种方式都可以任意选择。

自动导入 h

vite.config.js:

import { defineConfig } from 'vite'

export default defineConfig({

esbuild: {

jsxInject: "import { h } from 'omi'",

jsxFactory: "h",

jsxFragment: "h.f"

}

})

你可以在构建时候注入代码，这样就不用手动导出 h。

定义跨框架组件

在 Vue 中使用 Omi component 例子如下:

my-counter.tsx:

import { tag, Component, h, bind } from 'omi'

@tag('my-counter')

class MyCounter extends Component {

static props = {

count: {

type: Number,

default: 0,

changed(newValue, oldValue) {

this.state.count = newValue

this.update()

}

}

}

state = {

count: null

}

install() {

this.state.count = this.props.count

}

@bind

sub() {

this.state.count--

this.update()

this.fire('change', this.state.count)

}

@bind

add() {

this.state.count++

this.update()

this.fire('change', this.state.count)

}

render() {

return (

<>

{this.state.count}

)

}

}

在 Vue3 中使用

如果在 omi 组件中使用:

this.fire('count-change', this.state.count)

在 vue 中使用组件监听事件如下:

在 React 中使用

import { useState, useRef, useEffect } from 'react'

import useEventListener from '@use-it/event-listener'

import './my-counter'

function App() {

const [count, setCount] = useState(100)

const myCounterRef = useRef(null)

useEffect(() => {

const counter = myCounterRef.current

if (counter) {

const handleChange = (evt) => {

setCount(evt.detail)

}

counter.addEventListener('change', handleChange)

return () => {

counter.removeEventListener('change', handleChange)

}

}

}, [])

return (

<>

Omi + React

)

}

export default App

贡献者

License

MIT © Tencent

空文件

Starred

133

Star

133

Fork

0

捐赠

0 人次

举报

举报成功

我们将于2个工作日内通过站内信反馈结果给你！

请认真填写举报原因，尽可能描述详细。

举报类型

请选择举报类型

举报原因

取消

发送

误判申诉

此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。

如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。

取消

提交

简介

Omi - 前端跨框架跨平台框架

基于 Web Components 并支持 IE8+(omio)，小程序(omi-kbone) 和 任意前端框架集成

展开

收起

暂无标签

JavaScript

等 5 种语言

TypeScript

81.8%

CSS

12.9%

JavaScript

4.5%

HTML

0.7%

Vue

0.1%

保存更改

取消

发行版

暂无发行版

开源评估指数源自 OSS-Compass 评估体系，评估体系围绕以下三个维度对项目展开评估：

1. 开源生态

生产力：来评估开源项目输出软件制品和开源价值的能力。

创新力：用于评估开源软件及其生态系统的多样化程度。

稳健性：用于评估开源项目面对多变的发展环境，抵御内外干扰并自我恢复的能力。

2. 协作、人、软件

协作：代表了开源开发行为中协作的程度和深度。

人：观察开源项目核心人员在开源项目中的影响力，并通过第三方视角考察用户和开发者对开源项目的评价。

软件：从开源项目对外输出的制品评估其价值最终落脚点。也是开源评估最“古老”的主流方向之一“开源软件” 的具体表现。

3. 评估模型

基于“开源生态”与“协作、人、软件”的维度，找到与该目标直接或间接相关的可量化指标，对开源项目健康与生态进行量化评估，最终形成开源评估指数。

贡献者

全部

近期动态

加载更多

不能加载更多了

编辑仓库简介

简介内容

Omi - 前端跨框架跨平台框架

基于 Web Components 并支持 IE8+(omio)，小程序(omi-kbone) 和 任意前端框架集成

主页

取消

保存更改

JavaScript

1

https://gitee.com/Tencent/omi.git

git@gitee.com:Tencent/omi.git

Tencent

omi

omi

master

深圳市奥思网络科技有限公司版权所有

Git 大全

Git 命令学习

CopyCat 代码克隆检测

APP与插件下载

Gitee Reward

Gitee 封面人物

GVP 项目

Gitee 博客

Gitee 公益计划

Gitee 持续集成

OpenAPI

帮助文档

在线自助服务

更新日志

关于我们

加入我们

使用条款

意见建议

合作伙伴

售前咨询客服

技术交流QQ群

微信服务号

client#oschina.cn

企业版在线使用：400-606-0201

专业版私有部署：

13670252304

13352947997

开放原子开源基金会

合作代码托管平台

违法和不良信息举报中心

粤ICP备12009483号

简 体

/

繁 體

/

English

点此查找更多帮助

搜索帮助

Git 命令在线学习

如何在 Gitee 导入 GitHub 仓库

Git 仓库基础操作

企业版和社区版功能对比

SSH 公钥设置

如何处理代码冲突

仓库体积过大，如何减小？

如何找回被删除的仓库数据

Gitee 产品配额说明

GitHub仓库快速导入Gitee及同步更新

什么是 Release（发行版）

将 PHP 项目自动发布到 packagist.org

评论

仓库举报

回到顶部

登录提示

该操作需登录 Gitee 帐号，请先登录后再操作。

立即登录

没有帐号，去注册

Omi - Dating, Friends & More

- Dating, Friends & M

GitHub - Tencent/omi: Web Components Framework - Web组件框架

GitHub - Tencent/omi: Web Components Framework - Web组件框架

Skip to content

Toggle navigation

Sign in

Product

Actions

Automate any workflow

Packages

Host and manage packages

Security

Find and fix vulnerabilities

Codespaces

Instant dev environments

Copilot

Write better code with AI

Code review

Manage code changes

Issues

Plan and track work

Discussions

Collaborate outside of code

Explore

All features

Documentation

GitHub Skills

Blog

Solutions

For

Enterprise

Teams

Startups

Education

By Solution

CI/CD & Automation

DevOps

DevSecOps

Resources

Learning Pathways

White papers, Ebooks, Webinars

Customer Stories

Partners

Open Source

GitHub Sponsors

Fund open source developers

The ReadME Project

GitHub community articles

Repositories

Topics

Trending

Collections

Pricing

Search or jump to...

Search code, repositories, users, issues, pull requests...

Search

Clear

Search syntax tips

Provide feedback

We read every piece of feedback, and take your input very seriously.

Include my email address so I can be contacted

Cancel

Submit feedback

Saved searches

Use saved searches to filter your results more quickly

Name

Query

To see all available qualifiers, see our documentation.

Cancel

Create saved search

Sign in

Sign up

You signed in with another tab or window. Reload to refresh your session.

You signed out in another tab or window. Reload to refresh your session.

You switched accounts on another tab or window. Reload to refresh your session.

Dismiss alert

Tencent

/

omi

Public

Notifications

Fork

1.2k

Star

12.9k

Web Components Framework - Web组件框架

omijs.org

License

View license

12.9k

stars

1.2k

forks

Branches

Tags

Activity

Star

Notifications

Code

Issues

59

Pull requests

0

Discussions

Actions

Wiki

Security

Insights

Additional navigation options

Code

Issues

Pull requests

Discussions

Actions

Wiki

Security

Insights

Tencent/omi

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

 masterBranchesTagsGo to fileCodeFolders and filesNameNameLast commit messageLast commit dateLatest commit History285 Commitsassetsassets  packagespackages  .gitattributes.gitattributes  .gitignore.gitignore  LICENSELICENSE  README.CN.mdREADME.CN.md  README.mdREADME.md  View all filesRepository files navigationREADMELicenseEnglish | 简体中文

Omi - Web Components Framework

Signal-driven reactive programming by reactive-signal

100+ OMI Templates & OMI Templates Source Code

OMI Form & OMI Form Playground & Lucide Omi Icons

⚡ Tiny size, Fast performance

Everything you need: Web Components, JSX, Function Components, Router, Suspense, Directive, Tailwindcss...

Both object oriented programming(OOP) and data oriented programming(DOP) are supported

Harness Constructable Stylesheets to easily manage and share styles

import { render, signal, tag, Component, h } from 'omi'

const count = signal(0)

function add() {

count.value++

}

function sub() {

count.value--

}

@tag('counter-demo')

export class CounterDemo extends Component {

static css = 'span { color: red; }'

render() {

return (

<>

{count.value}

)

}

}

Use this component:

import { h } from 'omi'

import './counter-demo'

render(, document.body)

// or

import { CounterDemo, Other } from './counter-demo'

// Prevent tree Shaking when importing other things

render(, document.body)

// or

document.body.appendChild(document.createElement('counter-demo'))

Install

npm i omi

To quickly create an Omi + Vite + TS/JS project:

$ npx omi-cli init my-app # or create js project by: npx omi-cli init-js my-app

$ cd my-app

$ npm start # develop

$ npm run build # release

To quickly create an Omi + Router + Signal + Suspense + Tailwindcss + Vite + TS project:

$ npx omi-cli init-spa my-app

$ cd my-app

$ npm start # develop

$ npm run build # release

Packages

Core packages

omi - Implementation of omi framework.

omi-form - Powerful, simple and cross frameworks form solution.

lucide-omi - Lucide icon collection for omi.

omiu - Hope to create the best web components. For example, the powerful vchart and vtable

omi-router - Create SPA of omi framework.

omi-cli - To quickly create an Omi + Vite + TS/JS project.

Starter kits (not published to npm)

omi-elements - Tailwind Element Omi UI KIT.

omi-starter-spa - A starter repo for building single page app using Omi + OmiRouter + Tailwindcss + TypeScript + Vite + Prettier.

omi-starter-ts - A starter repo for building web app or reusable components using Omi in TypeScript base on Vite.

omi-starter-tailwind - A starter repo for building web app or reusable components using Omi + Tailwindcss + TypeScript + Vite.

omi-starter-js - A starter repo for building web app or reusable components using Omi in JavaScript base on Vite.

omi-vue - Vue SFC + Vite + OMI + OMI-WeUI.

Components

omi-weui - WeUI Components of omi.

omi-auto-animate - Omi version of @formkit/auto-animate.

omi-suspense - Handling asynchronous dependencies.

Directives

omi-transition - Applying animations when an component is entering and leaving the DOM.

omi-ripple - A lightweight component for adding ripple effects to user interface elements.

Examples (not published to npm)

snake-game-2tier - SNake Game with Signal class

snake-game-3tier - SNake Game with reactivity functions

omi-tutorial - Source code of omi tutorial.

If you want to help the project grow, start by simply sharing it with your peers!

Share via Dev.to

Share via Twitter

Share via Facebook

Share via LinkedIn

Share via Pinterest

Share via Reddit

Share via StumbleUpon

Share via Vkontakte

Share via Weibo

Share via Hackernews

Thank you!

Usage

TodoApp with reactivity functions

Data oriented programming

In data-oriented programming, the focus is on the data itself and the operations on the data, rather than the objects or data structures that hold the data. This programming paradigm emphasizes the change and flow of data, and how to respond to these changes. The TodoApp with reactivity functions is a good example of this, using the concepts of reactive programming, where the UI automatically updates to reflect changes in the data (i.e., the to-do list).

import { render, signal, computed, tag, Component, h } from 'omi'

const todos = signal([

{ text: 'Learn OMI', completed: true },

{ text: 'Learn Web Components', completed: false },

{ text: 'Learn JSX', completed: false },

{ text: 'Learn Signal', completed: false }

])

const completedCount = computed(() => {

return todos.value.filter(todo => todo.completed).length

})

const newItem = signal('')

function addTodo() {

// api a

todos.value.push({ text: newItem.value, completed: false })

todos.update() // Trigger UI auto update

// api b, same as api a

// todos.value = [...todos.value, { text: newItem.value, completed: false }]

newItem.value = '' // Changing the value type can automatically update the UI

}

function removeTodo(index: number) {

todos.value.splice(index, 1)

todos.update() // Trigger UI auto update

}

@tag('todo-list')

class TodoList extends Component {

onInput = (event: Event) => {

const target = event.target as HTMLInputElement

newItem.value = target.value

}

render() {

return (

<>

    {todos.value.map((todo, index) => {

    return (

  • type="checkbox"

    checked={todo.completed}

    onInput={() => {

    todo.completed = !todo.completed

    todos.update() // Trigger UI auto update

    }}

    />

    {todo.completed ? {todo.text} : todo.text}

    {' '}

    • )

    })}

Completed count: {completedCount.value}

)

}

}

render(, document.body)

TodoApp with Signal Class

Object oriented programming

In object-oriented programming, the focus is on the objects, which contain both data and methods to operate on the data. This programming paradigm emphasizes the interaction and cooperation between objects, and how to organize and manage code through object encapsulation, inheritance, and polymorphism. The TodoApp with reactivity functions can also be implemented in an object-oriented way, for example, by creating a TodoList class that contains the data of the to-do list and methods to operate on this data, as well as a update method to update the UI.

import { render, Signal, tag, Component, h, computed } from 'omi'

type Todo = { text: string, completed: boolean }

class TodoApp extends Signal<{ todos: Todo[], filter: string, newItem: string }> {

completedCount: ReturnType

constructor(todos: Todo[] = []) {

super({ todos, filter: 'all', newItem: '' })

this.completedCount = computed(() => this.value.todos.filter(todo => todo.completed).length)

}

addTodo = () => {

// api a

this.value.todos.push({ text: this.value.newItem, completed: false })

this.value.newItem = ''

this.update()

// api b, same as api a

// this.update((value) => {

// value.todos.push({ text: value.newItem, completed: false })

// value.newItem = ''

// })

}

toggleTodo = (index: number) => {

const todo = this.value.todos[index]

todo.completed = !todo.completed

this.update()

}

removeTodo = (index: number) => {

this.value.todos.splice(index, 1)

this.update()

}

}

const todoApp = new TodoApp([

{ text: 'Learn OMI', completed: true },

{ text: 'Learn Web Components', completed: false },

{ text: 'Learn JSX', completed: false },

{ text: 'Learn Signal', completed: false }

])

@tag('todo-list')

class TodoList extends Component {

onInput = (event: Event) => {

const target = event.target as HTMLInputElement

todoApp.value.newItem = target.value

}

render() {

const { todos } = todoApp.value

const { completedCount, toggleTodo, addTodo, removeTodo } = todoApp

return (

<>

    {todos.map((todo, index) => {

    return (

  • type="checkbox"

    checked={todo.completed}

    onInput={() => toggleTodo(index)}

    />

    {todo.completed ? {todo.text} : todo.text}

    {' '}

    • )

    })}

Completed count: {completedCount.value}

)

}

}

render(, document.body)

We won't discuss which method is good or bad here. You can choose either method using omi.

Auto Import h

vite.config.js:

import { defineConfig } from 'vite'

export default defineConfig({

esbuild: {

jsxInject: "import { h } from 'omi'",

jsxFactory: "h",

jsxFragment: "h.f"

}

})

You can inject code during construction, so you don't have to manually export h.

Define Cross Framework Component

The case of using Omi component in Vue is as follows:

my-counter.tsx:

import { tag, Component, h, bind } from 'omi'

@tag('my-counter')

class MyCounter extends Component {

static props = {

count: {

type: Number,

default: 0,

changed(newValue, oldValue) {

this.state.count = newValue

this.update()

}

}

}

state = {

count: null

}

install() {

this.state.count = this.props.count

}

@bind

sub() {

this.state.count--

this.update()

this.fire('change', this.state.count)

}

@bind

add() {

this.state.count++

this.update()

this.fire('change', this.state.count)

}

render() {

return (

<>

{this.state.count}

)

}

}

Using in Vue3

If you fire the count-change in an Omi component:

this.fire('count-change', this.state.count)

To use the component and listen for events in Vue:

Using in React

import { useState, useRef, useEffect } from 'react'

import useEventListener from '@use-it/event-listener'

import './my-counter'

function App() {

const [count, setCount] = useState(100)

const myCounterRef = useRef(null)

useEffect(() => {

const counter = myCounterRef.current

if (counter) {

const handleChange = (evt) => {

setCount(evt.detail)

}

counter.addEventListener('change', handleChange)

return () => {

counter.removeEventListener('change', handleChange)

}

}

}, [])

return (

<>

Omi + React

)

}

export default App

Contributors

License

MIT © Tencent

About

Web Components Framework - Web组件框架

omijs.org

Topics

javascript

css

html

components

admin

typescript

web

dashboard

webcomponents

jsx

web-components

custom-elements

signal

tsx

shadow-dom

omi

tailwind

tailwindcss

reactive-signal

Resources

Readme

License

View license

Activity

Custom properties

Stars

12.9k

stars

Watchers

342

watching

Forks

1.2k

forks

Report repository

Releases

163

v7.6.6

Latest

Feb 29, 2024

+ 162 releases

Packages

0

No packages published

Used by 203

+ 195

Contributors

91

+ 77 contributors

Languages

TypeScript

81.8%

CSS

12.9%

JavaScript

4.5%

Other

0.8%

Footer

© 2024 GitHub, Inc.

Footer navigation

Terms

Privacy

Security

Status

Docs

Contact

Manage cookies

Do not share my personal information

You can’t perform that action at this time.

yload":{"allShortcutsEnabled":false,"fileTree":{"":{"items":[{"name":"assets","path":"assets","contentType":"directory"},{"name":"packages","path":"packages","contentType":"directory"},{"name":".gitattributes","path":".gitattributes","contentType":"file"},{"name":".gitignore","path":".gitignore","contentType":"file"},{"name":"LICENSE","path":"LICENSE","contentType":"file"},{"name":"README.CN.md","path":"README.CN.md","contentType":"file"},{"name":"README.md","path":"README.md","contentType":"file"}],"totalCount":7}},"fileTreeProcessingTime":2.4214919999999998,"foldersToFetch":[],"repo":{"id":36606437,"defaultBranch":"master","name":"omi","ownerLogin":"Tencent","currentUserCanPush":false,"isFork":false,"isEmpty":false,"createdAt":"2015-05-31T14:24:58.000Z","ownerAvatar":"https://avatars.githubusercontent.com/u/18461506?v=4","public":true,"private":false,"isOrgOwned":true},"symbolsExpanded":false,"treeExpanded":true,"refInfo":{"name":"master","listCacheKey":"v0:1709168027.0","canEdit":false,"refType":"branch","currentOid":"32f64e56c6bf3d5812d256fb4138683d0eab0d88"},"path":"README.CN.md","currentUser":null,"blob":{"rawLines":null,"stylingDirectives":null,"csv":null,"csvError":null,"dependabotInfo":{"showConfigurationBanner":false,"configFilePath":null,"networkDependabotPath":"/Tencent/omi/network/updates","dismissConfigurationNoticePath":"/settings/dismiss-notice/dependabot_configuration_notice","configurationNoticeDismissed":null},"displayName":"README.CN.md","displayUrl":"https://github.com/Tencent/omi/blob/master/README.CN.md?raw=true","headerInfo":{"blobSize":"15.7 KB","deleteTooltip":"You must be signed in to make or propose changes","editTooltip":"You must be signed in to make or propose changes","ghDesktopPath":"https://desktop.github.com","isGitLfs":false,"onBranch":true,"shortPath":"d50f4f5","siteNavLoginPath":"/login?return_to=https%3A%2F%2Fgithub.com%2FTencent%2Fomi%2Fblob%2Fmaster%2FREADME.CN.md","isCSV":false,"isRichtext":true,"toc":[{"level":2,"text":"Omi - Web Components 框架","anchor":"omi---web-components-框架","htmlText":"Omi - Web Components 框架"},{"level":2,"text":"安装","anchor":"安装","htmlText":"安装"},{"level":3,"text":"包","anchor":"包","htmlText":"包"},{"level":2,"text":"使用","anchor":"使用","htmlText":"使用"},{"level":3,"text":"TodoApp 使用响应式函数","anchor":"todoapp-使用响应式函数","htmlText":"TodoApp 使用响应式函数"},{"level":3,"text":"TodoApp 使用信号类 Signal","anchor":"todoapp-使用信号类-signal","htmlText":"TodoApp 使用信号类 Signal"},{"level":2,"text":"自动导入 h","anchor":"自动导入-h","htmlText":"自动导入 h"},{"level":2,"text":"定义跨框架组件","anchor":"定义跨框架组件","htmlText":"定义跨框架组件"},{"level":3,"text":"在 Vue3 中使用","anchor":"在-vue3-中使用","htmlText":"在 Vue3 中使用"},{"level":3,"text":"在 React 中使用","anchor":"在-react-中使用","htmlText":"在 React 中使用"},{"level":2,"text":"贡献者","anchor":"贡献者","htmlText":"贡献者"},{"level":2,"text":"License","anchor":"license","htmlText":"License"}],"lineInfo":{"truncatedLoc":"487","truncatedSloc":"383"},"mode":"file"},"image":false,"isCodeownersFile":null,"isPlain":false,"isValidLegacyIssueTemplate":false,"issueTemplate":null,"discussionTemplate":null,"language":"Markdown","languageID":222,"large":false,"planSupportInfo":{"repoIsFork":null,"repoOwnedByCurrentUser":null,"requestFullPath":"/Tencent/omi/blob/master/README.CN.md","showFreeOrgGatedFeatureMessage":null,"showPlanSupportBanner":null,"upgradeDataAttributes":null,"upgradePath":null},"publishBannersInfo":{"dismissActionNoticePath":"/settings/dismiss-notice/publish_action_from_dockerfile","releasePath":"/Tencent/omi/releases/new?marketplace=true","showPublishActionBanner":false},"rawBlobUrl":"https://github.com/Tencent/omi/raw/master/README.CN.md","renderImageOrRaw":false,"richText":"English | 简体中文\n\nOmi - Web Components 框架\n\n 信号 Signal 驱动的响应式编程，reactive-signal强力驱动\n⚡ 微小的尺寸，极速的性能\n 目标 100+ 模板 & OMI 模板源码\n OMI Form & OMI Form 游乐场 & Lucide Omi 图标\n 你要的一切都有: Web Components, JSX, Function Components, Router, Suspense, Directive, Tailwindcss...\n 面向对象编程(OOP) 和 数据驱动编程(DOP) 两种范式都支持\n 使用 Constructable Stylesheets 轻松管理和共享样式\n\nimport { render, signal, tag, Component, h } from 'omi'\n\nconst count = signal(0)\n\nfunction add() {\n count.value++\n}\n\nfunction sub() {\n count.value--\n}\n\n@tag('counter-demo')\nexport class CounterDemo extends Component {\n static css = 'span { color: red; }'\n\n render() {\n return (\n <>\n \n {count.value}\n \n \n )\n }\n}\n使用该组件:\nimport { h } from 'omi'\nimport './counter-demo'\n\nrender(, document.body)\n\n// 或者\nimport { CounterDemo, Other } from './counter-demo'\n// 当需要导入其他东西的时候，防止被 tree shaking\nrender(, document.body)\n\n// 或者\ndocument.body.appendChild(document.createElement('counter-demo'))\n安装\nnpm i omi\n快速创建 Omi + Vite + TS/JS 项目：\n$ npx omi-cli init my-app # 或者创建js项目: npx omi-cli init-js my-app\n$ cd my-app \n$ npm start # develop\n$ npm run build # release\n快速创建 Omi + Router + Signal + Suspense + Tailwindcss + Vite + TS 项目：\n$ npx omi-cli init-spa my-app \n$ cd my-app \n$ npm start # develop\n$ npm run build # release\n包\n\n核心包\n\nomi - Omi 框架的实现代码。\nomi-form - 强大易用且跨框架的表单解决方案。\nlucide-omi - Lucide 的 Omi 图标集合。\nomiu - 希望打造最好的 web 组件。\nomi-router - 创建单页应用。\nomi-cli - 快速创建 Omi + Vite + TS/JS 项目。\n\n\n入门套件 (未发布到 npm)\n\nomi-elements - 官方推出 Tailwind Omi 套件。\nomi-starter-spa - 快速创建单页应用(SPA)，内置了 Omi + OmiRouter + Tailwindcss + TypeScript + Vite + Prettier。\nomi-starter-ts - 基于 Vite + Omi + TypeScript 的模板。\nomi-starter-tailwind - 基于 Vite + Omi + TypeScript + Tailwindcss 的模板。\nomi-starter-js - 基于 Vite + Omi + JavaScript 的模板。\nomi-vue - Vue SFC + Vite + OMI + OMI-WeUI.\n\n\n组件\n\nomi-weui - Omi 版本的 WeUI。\nomi-auto-animate - Omi 版本的 @formkit/auto-animate。\nomi-suspense - 处理异步依赖。\n\n\n指令\n\nomi-transition - 提供进入和离开动画。\nomi-ripple - 用于为用户界面元素添加涟漪（ripple）效果。当用户与元素交互（例如点击按钮）时，涟漪效果会从交互点开始扩散开来。\n\n\n综合性例子 (未发布到 npm)\n\nsnake-game-2tier - 基于 Omi Signal class 两层架构的贪吃蛇游戏。\nsnake-game-3tier - 基于 Omi 响应是函数三层架构的贪吃蛇游戏。\nomi-tutorial - Omi 官方教程源代码。\n\n\n\n如果你想帮助项目发展，可以先简单地与同行分享!\n\nShare via Dev.to\nShare via Twitter\nShare via Facebook\nShare via LinkedIn\nShare via Pinterest\nShare via Reddit\nShare via StumbleUpon\nShare via Vkontakte\nShare via Weibo\nShare via Hackernews\n\n多谢！\n使用\nTodoApp 使用响应式函数\n\n数据驱动编程\n\n在数据驱动编程中，我们将重点放在数据本身和对数据的操作上，而不是数据所在的对象或数据结构。这种编程范式强调的是数据的变化和流动，以及如何响应这些变化。基于响应式函数的 TodoApp 就是一个很好的例子，它使用了响应式编程的概念，当数据（即待办事项列表）发生变化时，UI 会自动更新以反映这些变化。\nimport { render, signal, computed, tag, Component, h } from 'omi'\n\nconst todos = signal([\n { text: 'Learn OMI', completed: true },\n { text: 'Learn Web Components', completed: false },\n { text: 'Learn JSX', completed: false },\n { text: 'Learn Signal', completed: false }\n])\n\nconst completedCount = computed(() => {\n return todos.value.filter(todo => todo.completed).length\n})\n\nconst newItem = signal('')\n\nfunction addTodo() {\n // api a，不会重新创建数组\n todos.value.push({ text: newItem.value, completed: false })\n todos.update() // 非值类型的数据更新需要手动调用 update 方法\n\n // api b, 和上面的 api a 效果一样，但是会创建新的数组\n // todos.value = [...todos.value, { text: newItem.value, completed: false }]\n\n newItem.value = '' // 值类型的数据更新需会自动 update\n}\n\nfunction removeTodo(index: number) {\n todos.value.splice(index, 1)\n todos.update() // 非值类型的数据更新需要手动调用 update 方法\n}\n\n@tag('todo-list')\nclass TodoList extends Component {\n onInput = (event: Event) => {\n const target = event.target as HTMLInputElement\n newItem.value = target.value\n }\n\n render() {\n return (\n <>\n \n \n
    \n {todos.value.map((todo, index) => {\n return (\n
  • \n \n {' '}\n \n
    • \n )\n })}\n
\n

Completed count: {completedCount.value}

\n \n )\n }\n}\n\nrender(, document.body)\nTodoApp 使用信号类 Signal\n\n面向对象编程\n\n在面向对象编程中，我们将重点放在对象上，对象包含了数据和操作数据的方法。这种编程范式强调的是对象之间的交互和协作，以及如何通过对象的封装、继承和多态性来组织和管理代码。基于响应式函数的 TodoApp 也可以使用面向对象的方式来实现，例如，我们可以创建一个 TodoList 类，这个类包含了待办事项列表的数据和操作这些数据的方法，以及一个 update 方法来更新 UI。\nimport { render, Signal, tag, Component, h, computed } from 'omi'\n\ntype Todo = { text: string, completed: boolean }\n\nclass TodoApp extends Signal<{ todos: Todo[], filter: string, newItem: string }> {\n completedCount: ReturnType\n\n constructor(todos: Todo[] = []) {\n super({ todos, filter: 'all', newItem: '' })\n this.completedCount = computed(() => this.value.todos.filter(todo => todo.completed).length)\n }\n\n addTodo = () => {\n // api a\n this.value.todos.push({ text: this.value.newItem, completed: false })\n this.value.newItem = ''\n this.update()\n\n // api b, same as api a\n // this.update((value) => {\n // value.todos.push({ text: value.newItem, completed: false })\n // value.newItem = ''\n // })\n }\n\n toggleTodo = (index: number) => {\n const todo = this.value.todos[index]\n todo.completed = !todo.completed\n this.update()\n }\n\n removeTodo = (index: number) => {\n this.value.todos.splice(index, 1)\n this.update()\n }\n}\n\nconst todoApp = new TodoApp([\n { text: 'Learn OMI', completed: true },\n { text: 'Learn Web Components', completed: false },\n { text: 'Learn JSX', completed: false },\n { text: 'Learn Signal', completed: false }\n])\n\n@tag('todo-list')\nclass TodoList extends Component {\n onInput = (event: Event) => {\n const target = event.target as HTMLInputElement\n todoApp.value.newItem = target.value\n }\n\n render() {\n const { todos } = todoApp.value\n const { completedCount, toggleTodo, addTodo, removeTodo } = todoApp\n return (\n <>\n \n \n
    \n {todos.map((todo, index) => {\n return (\n
  • \n \n {' '}\n \n
    • \n )\n })}\n
\n

Completed count: {completedCount.value}

\n \n )\n }\n}\n\nrender(, document.body)\n这里不讨论哪种方式(DOP,OOP)的好坏，使用 omi 两种方式都可以任意选择。\n自动导入 h\nvite.config.js:\nimport { defineConfig } from 'vite'\n\nexport default defineConfig({\n esbuild: {\n jsxInject: \"import { h } from 'omi'\",\n jsxFactory: \"h\",\n jsxFragment: \"h.f\"\n }\n})\n你可以在构建时候注入代码，这样就不用手动导出 h。\n定义跨框架组件\n在 Vue 中使用 Omi component 例子如下:\n\nmy-counter.tsx:\nimport { tag, Component, h, bind } from 'omi'\n\n@tag('my-counter')\nclass MyCounter extends Component {\n static props = {\n count: {\n type: Number,\n default: 0,\n changed(newValue, oldValue) {\n this.state.count = newValue\n this.update()\n }\n }\n }\n\n state = {\n count: null\n }\n\n install() {\n this.state.count = this.props.count\n }\n\n @bind\n sub() {\n this.state.count--\n this.update()\n this.fire('change', this.state.count)\n }\n\n @bind\n add() {\n this.state.count++\n this.update()\n this.fire('change', this.state.count)\n }\n\n render() {\n return (\n <>\n \n {this.state.count}\n \n \n )\n }\n}\n在 Vue3 中使用\n\n\n\n如果在 omi 组件中使用:\nthis.fire('count-change', this.state.count)\n在 vue 中使用组件监听事件如下:\n\n在 React 中使用\nimport { useState, useRef, useEffect } from 'react'\nimport useEventListener from '@use-it/event-listener'\nimport './my-counter'\n\nfunction App() {\n const [count, setCount] = useState(100)\n const myCounterRef = useRef(null)\n\n useEffect(() => {\n const counter = myCounterRef.current\n if (counter) {\n const handleChange = (evt) => {\n setCount(evt.detail)\n }\n counter.addEventListener('change', handleChange)\n return () => {\n counter.removeEventListener('change', handleChange)\n }\n }\n }, [])\n\n return (\n <>\n

Omi + React

\n \n
\n \n
\n \n )\n}\n\nexport default App\n贡献者\n\n \n\nLicense\nMIT © Tencent\n \n","renderedFileInfo":null,"shortPath":null,"symbolsEnabled":true,"tabSize":8,"topBannersInfo":{"overridingGlobalFundingFile":false,"globalPreferredFundingPath":null,"showInvalidCitationWarning":false,"citationHelpUrl":"https://docs.github.com/github/creating-cloning-and-archiving-repositories/creating-a-repository-on-github/about-citation-files","actionsOnboardingTip":null},"truncated":false,"viewable":true,"workflowRedirectUrl":null,"symbols":{"timed_out":false,"not_analyzed":false,"symbols":[{"name":"安装","kind":"section_2","ident_start":1822,"ident_end":1828,"extent_start":1819,"extent_end":7345,"fully_qualified_name":"安装","ident_utf16":{"start":{"line_number":59,"utf16_col":3},"end":{"line_number":59,"utf16_col":5}},"extent_utf16":{"start":{"line_number":59,"utf16_col":0},"end":{"line_number":126,"utf16_col":0}}},{"name":"包","kind":"section_3","ident_start":2311,"ident_end":2314,"extent_start":2307,"extent_end":7345,"fully_qualified_name":"包","ident_utf16":{"start":{"line_number":83,"utf16_col":4},"end":{"line_number":83,"utf16_col":5}},"extent_utf16":{"start":{"line_number":83,"utf16_col":0},"end":{"line_number":126,"utf16_col":0}}},{"name":"使用","kind":"section_2","ident_start":7348,"ident_end":7354,"extent_start":7345,"extent_end":12941,"fully_qualified_name":"使用","ident_utf16":{"start":{"line_number":126,"utf16_col":3},"end":{"line_number":126,"utf16_col":5}},"extent_utf16":{"start":{"line_number":126,"utf16_col":0},"end":{"line_number":306,"utf16_col":0}}},{"name":"TodoApp 使用响应式函数","kind":"section_3","ident_start":7360,"ident_end":7389,"extent_start":7356,"extent_end":9936,"fully_qualified_name":"TodoApp 使用响应式函数","ident_utf16":{"start":{"line_number":128,"utf16_col":4},"end":{"line_number":128,"utf16_col":19}},"extent_utf16":{"start":{"line_number":128,"utf16_col":0},"end":{"line_number":210,"utf16_col":0}}},{"name":"TodoApp 使用信号类 Signal","kind":"section_3","ident_start":9940,"ident_end":9970,"extent_start":9936,"extent_end":12941,"fully_qualified_name":"TodoApp 使用信号类 Signal","ident_utf16":{"start":{"line_number":210,"utf16_col":4},"end":{"line_number":210,"utf16_col":24}},"extent_utf16":{"start":{"line_number":210,"utf16_col":0},"end":{"line_number":306,"utf16_col":0}}},{"name":"自动导入 h","kind":"section_2","ident_start":12944,"ident_end":12958,"extent_start":12941,"extent_end":13238,"fully_qualified_name":"自动导入 h","ident_utf16":{"start":{"line_number":306,"utf16_col":3},"end":{"line_number":306,"utf16_col":9}},"extent_utf16":{"start":{"line_number":306,"utf16_col":0},"end":{"line_number":325,"utf16_col":0}}},{"name":"定义跨框架组件","kind":"section_2","ident_start":13241,"ident_end":13262,"extent_start":13238,"extent_end":15714,"fully_qualified_name":"定义跨框架组件","ident_utf16":{"start":{"line_number":325,"utf16_col":3},"end":{"line_number":325,"utf16_col":10}},"extent_utf16":{"start":{"line_number":325,"utf16_col":0},"end":{"line_number":474,"utf16_col":0}}},{"name":"在 Vue3 中使用","kind":"section_3","ident_start":14149,"ident_end":14167,"extent_start":14145,"extent_end":14842,"fully_qualified_name":"在 Vue3 中使用","ident_utf16":{"start":{"line_number":383,"utf16_col":4},"end":{"line_number":383,"utf16_col":14}},"extent_utf16":{"start":{"line_number":383,"utf16_col":0},"end":{"line_number":434,"utf16_col":0}}},{"name":"在 React 中使用","kind":"section_3","ident_start":14846,"ident_end":14865,"extent_start":14842,"extent_end":15714,"fully_qualified_name":"在 React 中使用","ident_utf16":{"start":{"line_number":434,"utf16_col":4},"end":{"line_number":434,"utf16_col":15}},"extent_utf16":{"start":{"line_number":434,"utf16_col":0},"end":{"line_number":474,"utf16_col":0}}},{"name":"贡献者","kind":"section_2","ident_start":15717,"ident_end":15726,"extent_start":15714,"extent_end":15838,"fully_qualified_name":"贡献者","ident_utf16":{"start":{"line_number":474,"utf16_col":3},"end":{"line_number":474,"utf16_col":6}},"extent_utf16":{"start":{"line_number":474,"utf16_col":0},"end":{"line_number":480,"utf16_col":0}}},{"name":"License","kind":"section_2","ident_start":15841,"ident_end":15848,"extent_start":15838,"extent_end":16063,"fully_qualified_name":"License","ident_utf16":{"start":{"line_number":480,"utf16_col":3},"end":{"line_number":480,"utf16_col":10}},"extent_utf16":{"start":{"line_number":480,"utf16_col":0},"end":{"line_number":487,"utf16_col":0}}}]}},"copilotInfo":null,"copilotAccessAllowed":false,"csrf_tokens":{"/Tencent/omi/branches":{"post":"HjaXTCeLlRzlrFxO4qZLalqYOqMEcIp7_8C-0E7ds3iXUcM1z3V5VJyHDWsESqO498VfDeuHUmFj27WtrRF-Og"},"/repos/preferences":{"post":"gu4tM-6d6PE_d2zMVxLc3wga889o2dgYCTZZHI7152PzvH4MCJPy9RKR_LQZQU1cSNntm47eUzTf0pk3g0AfIw"}}},"title":"omi/README.CN.md at master · Tencent/om

如何评价腾讯推出的前端框架Omi? - 知乎

如何评价腾讯推出的前端框架Omi? - 知乎首页知乎知学堂发现等你来答​切换模式登录/注册腾讯前端开发框架和库前端框架虚拟DOM如何评价腾讯推出的前端框架Omi?腾讯发布前端组件框架 Omi，全面拥抱 Web Components Tencent/omi http://www.alloyteam.com/201…显示全部 ​关注者109被浏览18,949关注问题​写回答​邀请回答​好问题 2​添加评论​分享​3 个回答默认排序寸志字节招算法/前端 https://dwz.win/a78S​ 关注破案了：Tencent/omi，一个框架写了3年，与时俱进，赞作者的坚持。发布于 2018-10-29 13:29​赞同 6​​添加评论​分享​收藏​喜欢收起​brandonxiang做编程是体验生活的一部分​ 关注我觉得大家更应该去关注 https://github.com/ionic-team/stencil编辑于 2018-10-21 12:07​赞同 8​​添加评论​分享​收藏​喜欢收起​​写回答1 个回答被折叠（为什

omi: 下一代前端统一框架 - 支持桌面Web、移动 H5和小程序 - Next Front End Framework

omi: 下一代前端统一框架 - 支持桌面Web、移动 H5和小程序 - Next Front End Framework

登录

注册

开源

企业版

高校版

搜索

帮助中心

使用条款

关于我们

开源

企业版

高校版

私有云

Gitee AI

NEW

我知道了

查看详情

登录

注册

代码拉取完成，页面将自动刷新

捐赠

捐赠前请先登录

取消

前往登录

扫描微信二维码支付

取消

支付完成

支付提示

将跳转至支付宝完成支付

确定

取消

Watch

不关注

关注所有动态

仅关注版本发行动态

关注但不提醒动态

1

Star

0

Fork

0

薛严 / omi

代码

Issues

0

Pull Requests

0

Wiki

统计

流水线

服务

Gitee Pages

质量分析

Jenkins for Gitee

腾讯云托管

腾讯云 Serverless

悬镜安全

阿里云 SAE

Codeblitz

我知道了，不再自动展开

加入 Gitee

与超过 1200万 开发者一起发现、参与优秀开源项目，私有仓库也完全免费 ：）

免费加入

已有帐号？

立即登录

返回

master

管理

管理

分支 (6)

标签 (51)

master

add-observe-type

omi-ts-support-png

add-app-ts

update-omi-d-ts

v3

v5.0.20

v5.0.19

v5.0.18

v5.0.17

v5.0.16

v5.0.14

v5.0.13

v5.0.12

v5.0.11

v5.0.10

v5.0.9

v5.0.8

v5.0.7

v5.0.6

v5.0.5

v5.0.4

v5.0.3

v5.0.2

v5.0.1

v5.0.0

克隆/下载

克隆/下载

HTTPS

SSH

SVN

SVN+SSH

下载ZIP

登录提示

该操作需登录 Gitee 帐号，请先登录后再操作。

立即登录

没有帐号，去注册

提示

下载代码请复制以下命令到终端执行

为确保你提交的代码身份被 Gitee 正确识别，请执行以下命令完成配置

git config --global user.name userName

git config --global user.email userEmail

初次使用 SSH 协议进行代码克隆、推送等操作时，需按下述提示完成 SSH 配置

1

生成 RSA 密钥

2

获取 RSA 公钥内容，并配置到 SSH公钥 中

在 Gitee 上使用 SVN，请访问 使用指南

使用 HTTPS 协议时，命令行会出现如下账号密码验证步骤。基于安全考虑，Gitee 建议 配置并使用私人令牌 替代登录密码进行克隆、推送等操作

Username for 'https://gitee.com': userName

Password for 'https://userName@gitee.com':

#

私人令牌

新建文件

新建 Diagram 文件

新建子模块

上传文件

分支 6

标签 51

贡献代码

同步代码

创建 Pull Request

了解更多

对比差异

通过 Pull Request 同步

同步更新到分支

通过 Pull Request 同步

将会在向当前分支创建一个 Pull Request，合入后将完成同步

当耐特

Update README.md

5293ddf

3340 次提交

提交

取消

提示:

由于 Git 不支持空文件夾，创建文件夹后会生成空的 .keep 文件

assets

保存

取消

docs

保存

取消

packages

保存

取消

tutorial

保存

取消

.editorconfig

保存

取消

.eslintrc

保存

取消

.gitignore

保存

取消

CONTRIBUTING.md

保存

取消

LICENSE

保存

取消

README.CN.md

保存

取消

README.EN.md

保存

取消

README.KR.md

保存

取消

README.md

保存

取消

Loading...

README

English | 简体中文 | 한국어

Omi v5.0.23

Omio v1.3.7

Omi - 下一代前端框架，去万物糟粕，合精华为一点点 JS

基于 Web Components 并支持 IE8+(omio) 和 小程序(omip)

Omi 生态

→ Omi 生态学习路线图

项目

描述

omi-docs

Omi 官方文档

omip

直接使用 Omi 开发小程序！！！

omio

兼容老浏览器的 Omi 版本(支持到IE8+和移动端浏览器)。

omiu

Omi 官方 UI。

omix

极小却精巧的小程序框架。

omi-mp

通过微信小程序开发和生成 Web 单页应用(H5 SPA)

md2site

用 markdown 生成静态网站文档.

omi-mvvm

MVVM 王者归来, mappingjs 强力加持。

omi-chart

一个 chart-x 标签搞定报表

mp-mvvm

小程序插上 MVVM 的翅膀, mappingjs 强力加持。

omi-html

Using htm in omi.

omi-30-seconds

30 秒理解一段有用的 Omi 代码片段.

omi-swiper

Omi + Swiper

omi-sprite

Web Components, JSX 和 Canvas 的完美融合

omi-canvas

Web Components, JSX 和 Canvas 的完美融合

omi-router

Omi 官方路由,超级小的尺寸，只有 1KB 的 js。→ DEMO

omi-devtools

谷歌浏览器开发工具扩展

omi-cli

项目脚手架工具，各种模板任你选。

omi-ex

Omi.js 扩展(TypeScript)

omi-transform

Omi 和 css3transform 完美结合. 让 css3 transform 在你的 Omi项目中变得超级简单.

omi-tap

Omi 原生支持 tap 事件（omi v4.0.24+）

omi-finger

Omi 官方手势库

omi-touch

丝般顺滑的触摸运动

omi-native

把 web components 渲染到 native，比如 IOS 、Android

omi-i18n

Omi 国际化解决方案

omi-page

基于 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绑定使用生成独特的className文件名—类名—hash值，如：CSS Modules，Vue)，还有运行时注入scoped atrr 的方式，都是 hack 技术；Shadow DOM Style 是最完美的方案

对比同样开发 TodoApp， Omi 和 React 渲染完的 DOM 结构，Omi 使用 Shadow DOM 隔离样式和语义化结构:

Omi

React

omi-mp

通过微信小程序开发和一键生成 Web 的 H5 SPA (基于 omi + omi-router)

看下官方模板的转换例子：

Index

Logs

因为 Web 里拉取不到用户登录态，更换了用户头像和名称。

必须收藏的资源

你必须收藏 ES6 Spread Operator 技巧

Omio 兼容 IE8 踩坑之路

深入浅出 Shadow Dom

HTM - JSX 的替代品？还是另一种选择？

60FPS Animation In Omi

Render Web Components To Native

Web Components MDN

Web Components Google

Web Components Org

Proxy MDN

CSS Variables

CSS Shadow Parts

Part Theme Explainer

Platform HTML5

使用 requestIdleCallback

A requestIdleCallback polyfill

The Power Of Web Components

ShadowRoot

Developer Tools support for Web Components in Firefox 63

目录

Omi 生态

omi-mp

必须收藏的资源

一个 HTML 完全上手

再花 30 秒完全上手

快速入门

安装

项目模板

Hello Element

TodoApp

Store

Mitt

Observe

生命周期

调试工具

浏览器兼容

React 组件转成 Omi

相关链接

贡献者们

维护者

感谢

License

一个 HTML 完全上手

下面这个页面不需要任何构建工具就可以执行

点击这里看执行结果

Omi.js CDN

Add Omi in One Minute

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

再花 30 秒完全上手

你也可以使用现代化的 JS 语法，快速构建 Omi 项目:

import { render, WeElement, define } from 'omi'

define('my-counter', class extends WeElement {

static observe = true

css () {

return `span{

color: red;

}`

}

data = {

count: 1

}

sub = () => {

this.data.count--

}

add = () => {

this.data.count++

}

render() {

return (

{this.data.count}

)

}

})

render(, 'body')

也可以手动调用 this.update，这样你就可以选择最佳的时机进行更新，而且能够兼容 IE8。

import { render, WeElement, define } from 'omi'

define('my-counter', class extends WeElement {

data = {

count: 1

}

//也可以直接传递字符串

css = `span{

color: red;

}`

sub = () => {

this.data.count--

this.update()

}

add = () => {

this.data.count++

this.update()

}

render() {

return (

{this.data.count}

)

}

})

render(, 'body')

→ counter demo

快速入门

安装

$ npm i omi-cli -g # install cli

$ omi init my-app # init project, you can also exec 'omi init' in an empty folder

$ cd my-app # please ignore this command if you executed 'omi init' in an empty folder

$ 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

"scripts": {

"start": "node scripts/start.js",

"build": "PUBLIC_URL=. node scripts/build.js",

"build-windows": "set PUBLIC_URL=.&& node scripts/build.js",

"fix": "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 里的 alias config 可以切换 omi 和 omio 渲染:

...

"alias": {

"omi": "omio"

}

...

项目模板

Template Type

Command

Describe

基础模板(v3.3.0+)

omi init my-app

基础模板，支持 omi 和 omio(IE8+)

支持预渲染快照骨架的模板

omi init-snap my-app

基础模板，支持 omi 和 omio(IE8+)，内置预渲染

TypeScript Template(omi-cli v3.3.0+)

omi init-ts my-app

使用 TypeScript 的模板

Mobile Template

omi init-weui my-app

使用了 weui 和 omi-router 的移动 web app 模板

omi-mp Template(omi-cli v3.0.13+)

omi init-mp my-app

小程序开发 Web 的模板

MVVM Template(omi-cli v3.0.22+)

omi init-mvvm my-app

MVVM 模板

Cli 自动创建的项目脚手架是基于单页的 create-react-app 改造成多页的，有配置方面的问题可以查看 create-react-app 用户指南。

Hello Element

先创建一个自定义元素:

import { define, WeElement } from 'omi'

define('hello-element', class extends WeElement {

onClick = evt => {

// trigger CustomEvent

this.fire('abc', { name: 'dntzhang', age: 12 })

evt.stopPropagation()

}

css = `

div {

color: red;

cursor: pointer;

}`

}

render(props) {

return (

Hello {props.msg} {props.propFromParent}

Click Me!

)

}

})

使用该元素:

import { define, render, WeElement } from 'omi'

import './hello-element'

define('my-app', class extends WeElement {

data = { abc: 'abc', passToChild: 123 }

// define CustomEvent Handler

onAbc = evt => {

// get evt data by evt.detail

this.data.abc = ' by ' + evt.detail.name

this.data.passToChild = 1234

this.update()

}

css = `

div{

color: green;

}`

}

render(props, data) {

return (

Hello {props.name} {data.abc}

onAbc={this.onAbc}

propFromParent={data.passToChild}

msg="WeElement"

/>

)

}

})

render(, '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, 比如下面配置:

{

test: /[\\|\/]_[\S]*\.css$/,

use: [

'to-string-loader',

'css-loader'

]

}

如果你的 css 文件以 _ 开头, css 会使用 to-string-loader. 如：

import { tag, WeElement render } from 'omi'

define('my-app', class extends WeElement {

css = require('./_index.css')

...

...

...

你也可以忘掉这一对繁琐的配置直接使用 omi-cli，不需要你配置任何东西。

TodoApp

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

import { define, render, WeElement } from 'omi'

define('todo-list', function(props) {

return (

    {props.items.map(item => (

  • {item.text}

    • ))}

)

})

define('todo-app', class extends WeElement {

static observe = true

data = { items: [], text: '' }

render() {

return (

TODO

id="new-todo"

onChange={this.handleChange}

value={this.data.text}

/>

)

}

handleChange = e => {

this.data.text = e.target.value

}

handleSubmit = e => {

e.preventDefault()

if (!this.data.text.trim().length) {

return

}

this.data.items.push({

text: this.data.text,

id: Date.now()

})

this.data.text = ''

}

})

render(, 'body')

Store

Omi 的 Store 体系： 从根组件注入，在所有子组件可以共享。使用起来非常简单：

import { define, render, WeElement } from 'omi'

define('my-hello', class extends WeElement {

render() {

//任意子组件的任意方法都可以使用 this.store 访问注入的 store

return

{this.store.name}

}

})

define('my-app', class extends WeElement {

handleClick = () => {

//任意子组件的任意方法都可以使用 this.store 访问注入的 store

this.store.reverse()

this.update()

}

render() {

return (

)

}

})

const store = {

name: 'abc',

reverse: function() {

this.name = this.name.split("").reverse().join("")

}

}

//通过第三个参数注入

render(, document.body, store)

与全局变量不同的是， 当有多个根节点的时候就可以注入多个 store，而全局变量只有一个。

Mitt

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

cross-component-communication

Observe

Omi Observe

你可以为那些不需要 store 的自定义元素使用 observe 创建响应式视图，比如:

import { define, WeElement } from "omi"

define("my-app", class extends WeElement {

static observe = true

install() {

this.data.name = "omi"

}

onClick = () => {

this.data.name = "Omi V4.0"

}

render(props, data) {

return (

Welcome to {data.name}

)

}

})

生命周期

Lifecycle method

When it gets called

install

before the component gets mounted to the DOM

installed

after the component gets mounted to the DOM

uninstall

prior to removal from the DOM

beforeUpdate

before update

updated

after update

beforeRender

before render()

receiveProps

parent element re-render will trigger it

调试工具

使用 Omi 开发工具 可以非常简单地调试和管理你的 UI。不需要任何配置，你只要安装然后就能调试。

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

React 组件转成 Omi

举个例子，下面是吧 weui react 的 button 转成 weui omi 的 button 的例子 :

Diff Split

Diff Unified

Before

After

浏览器兼容

Omio - 兼容老浏览器的 Omi 版本(支持到IE8+和移动端浏览器)

Omi 4.0+ works in the latest two versions of all major browsers: Safari 10+, IE 11+, and the evergreen Chrome, Firefox, and Edge.

→ polyfills

贡献者们

维护者

@f

@LeeHyungGeun

@dntzhang

@xcatliu

任何 Omi 相关问题欢迎联系我们。也可以加入 Omi QQ 群进行讨论交流。

感谢

preact

JSONPatcherProxy

create-react-app

JSX

License

MIT © Tencent

空文件

Starred

0

Star

0

Fork

0

捐赠

0 人次

举报

举报成功

我们将于2个工作日内通过站内信反馈结果给你！

请认真填写举报原因，尽可能描述详细。

举报类型

请选择举报类型

举报原因

取消

发送

误判申诉

此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。

如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。

取消

提交

简介

下一代前端统一框架 - 支持桌面Web、移动 H5和小程序 - Next Front End Framework

展开

收起

暂无标签

/liuyangong/omi

JavaScript

保存更改

取消

发行版

暂无发行版

贡献者

全部

近期动态

加载更多

不能加载更多了

编辑仓库简介

简介内容

下一代前端统一框架 - 支持桌面Web、移动 H5和小程序 - Next Front End Framework

主页

取消

保存更改

JavaScript

1

https://gitee.com/liuyangong/omi.git

git@gitee.com:liuyangong/omi.git

liuyangong

omi

omi

master

深圳市奥思网络科技有限公司版权所有

Git 大全

Git 命令学习

CopyCat 代码克隆检测

APP与插件下载

Gitee Reward

Gitee 封面人物

GVP 项目

Gitee 博客

Gitee 公益计划

Gitee 持续集成

OpenAPI

帮助文档

在线自助服务

更新日志

关于我们

加入我们

使用条款

意见建议

合作伙伴

售前咨询客服

技术交流QQ群

微信服务号

client#oschina.cn

企业版在线使用：400-606-0201

专业版私有部署：

13670252304

13352947997

开放原子开源基金会

合作代码托管平台

违法和不良信息举报中心

粤ICP备12009483号

简 体

/

繁 體

/

English

点此查找更多帮助

搜索帮助

Git 命令在线学习

如何在 Gitee 导入 GitHub 仓库

Git 仓库基础操作

企业版和社区版功能对比

SSH 公钥设置

如何处理代码冲突

仓库体积过大，如何减小？

如何找回被删除的仓库数据

Gitee 产品配额说明

GitHub仓库快速导入Gitee及同步更新

什么是 Release（发行版）

将 PHP 项目自动发布到 packagist.org

评论

仓库举报

回到顶部

登录提示

该操作需登录 Gitee 帐号，请先登录后再操作。

立即登录

没有帐号，去注册

探探创始人转战东南亚，竟又推出一个爆款 - 知乎

探探创始人转战东南亚，竟又推出一个爆款 - 知乎切换模式写文章登录/注册探探创始人转战东南亚，竟又推出一个爆款刘武华​​福州扬帆出海网络科技有限公司 法定代表人灵魂匹配搭档情绪风格测试，更对东南亚的胃口对东南亚地区社交产品情况非常熟悉的朋友可能了解过Omi，作为一款音频社交约会类App，Omi将重点放在港澳台地区和东南亚地区，并先后在香港、马来西亚、泰国等地登上分类总榜Top 1的宝座，并进入了双端总榜Top 5。根据官方提供信息显示，鼎对科技由联合创始人王宇创立，王宇正是2014 年创立探探的CEO，后续探探做到了将近4亿的流水。2018年，探探团队被陌陌科技以7.8 亿美元全资收购，王宇团队依旧独立管理运营探探团队。2021 年，王宇离开探探，重启创业之路，分别创立了鼎对科技和牵手未来科技两家公司，前者做出了面向海外的产品Omi，后者则推出了面向国内的牵手App。同时，探探前COO潘滢也同样于这两家公司任职。告别探探，承载其基因的Omi更加注重优化匹配效果，结合上匿名匹配的走心设计和“云村”风格的爱情人格测试，有趣的化学反应出现了。东南亚更注重灵魂配对？上面我们已经提到了Omi是一款音频社交App，虽然在匹配方式上，它依然应用了经典的“右滑喜欢，左滑删除”的经典匹配功能，但在细节上，Omi做出了些微改进，试图避免大家“在错误的人身上浪费时间”。首先，改变发生在基础资料的设定中，注册者除了需要给出身高、体重、生日等基本信息以及个人形象照片之外，增加了更加个性化的选择，试图摆脱社交约会应用“纯纯看脸”的刻板印象。比如你可以根据个人形象/旅游/兴趣爱好三个方面分别提供一些照片，在问题描述 中补充个人的生活习惯（有没有打疫苗），力求在个人资料卡上看到更为真切的形象。在匹配上，Omi也做了些轻微的调整。比如在匹配之前，用户可以在设置中自主设定匹配好友的范围/性别/年龄，拒绝异地恋的朋友就可以把距离限定在附近，这个功能其实一般都会被应用作为会员权益的一部分，这么看Omi还是对免费用户友好一些。当你终于通过滑卡找到心仪的人时，也不能直接开启聊天。在你们的对话窗口中会弹出一个系统给出的问题，这些问题围绕着生活中的各个方面展开，比如“你最喜欢的季节”、“最爱的美食”，用于“检验三观”或是“破冰”。你需要在聊天之前回答这个问题，而对方会看到你做出的选择，并决定接下来“是否还有继续聊天的必要”。如果你的答案被另一方认可，才能开启接下来的对话。Omi可以免费使用，它的变现方式还是靠订阅会员实现。作为会员，每天拥有5次发送Crush的机会，对你的心仪用户使用，让对方看到你的喜欢。同时，会员权益中包含“已读查看”、“看到喜欢你的人”、“撤回喜欢”等9个权益。最有趣的要数“隐私保护”，会员可以将Omi的应用图标更改成“计算器”等系统程序图标，避免被身边人发现。拒绝看脸 试试匿名语音社交如果说左滑右滑的社交方式是基于个人形象的“看脸”社交，那么以Soul为代表的应用在乎的则是外表下的那颗灵魂是否闪闪发亮。Omi在“发现”功能页中提供的就是匿名状态下实现的匹配。在正式开始前，用户可以自主选择系统提供的虚拟形象，当你在这里和对方搭线成功时，对方看见的也只会是这个形象。而这里一共提供三个功能：仅限十次的语音速配、恋爱铃和恋人卡。恋爱铃大家都比较熟悉了，其实是基于地理位置来匹配“附近的人”。这个设定我想大概是出自韩国漫画《恋爱铃》，原著设定了一个神奇的App“恋爱铃”，安装应用的人可以在10Km的范围内感知到周围喜欢自己的人，靠近后铃声会响起来，提醒暗恋者的出现。当然，现实中的“恋爱铃”功能实现倒没有那么复杂，只要察觉到附近范围内的用户，在星座、性格等方面适合匹配的用户，系统会以铃声提示配对成功，将接下来的聊天自由交给用户。而“恋爱卡”的设计更加细致一些。在正式匹配之前，应用会给出一个类似我们上文提到的问题，用户做出自己的选择，只有答案相同，两位用户才能匹配在一起。简单检验“三观合拍”的同时，为接下来的聊天准备了一个可以破冰的话题。比如你拿到这样一个问题：当你的男朋友和你的闺蜜背叛你在一起，你会选择？A. 离开男朋友，但仍然拥有这段友情。B. 离开闺蜜，给男朋友一个改过的机会。C. 全部离开，谴责他们的行为。D. 全部离开，但是对此保持沉默。匿名匹配功能之外，这个应用也用上了最近很火的MBTI测试，以此改编了“爱情人格测试”，邀请用户参与答题。Omi给出12道测试题目，并将最终结果分为十六种人格。它会给出你的性格关键词、恋爱风格、恋爱闪光点和最适合你的几种性格。测试结果可以分享给其他朋友，迎合上最近MBTI火上热搜的热度，不失为一个分享裂变的好方式。而你的人格也可以作为信息展示在资料卡中，后续用户在滑卡界面中，可以看到其他用户的“爱情人格”，并显示和该用户的匹配百分比。顺带一提，这次你在手机上收到的“通讯录中的XXX是暗恋你的人”式短信可能不是“错觉”了。Omi在设置中做了一个“匿名表白”的功能，同步通讯录、选择Ta，Omi就会代发一条短信告知这份喜欢。进入市场前期：做好品牌宣传从2019年正式进入市场至今，已经过去了3年的时间。在此期间，Omi曾杀入部分地区的总榜第一，但也难免在部分地区出现回落的趋势。不过，在2022年的上半年期间，Omi的排名在多个地区出现了回升的迹象。这和Omi近半年来加大了宣传营销力度相关。根据广大大数据显示，Omi投放的Top3地区为中国台湾（50%）、泰国（20%）和马来西亚（11%），这也都是Omi过往看重的重点市场，在拿到过最佳回馈的地区进行长线运营，是Omi现阶段的策略。综合Omi在社交媒体平台上投放的多类广告来看，Omi的广告走的也是“品效结合”的路子，尝试了广铺素材、网红营销和电视营销多种渠道。宣传内容方面，则照顾到了颜值党和谨慎恋爱者的喜好，试图覆盖更多潜在用户。比如2019年，Omi App发布了“喜欢高颜值没错”的主题广告，将高质量、好看的配对者作为应用宣传点。网红营销是Omi很常用的方式之一，在进入香港市场的初阶段，Omi已经和当地机构达成合作，邀请了3位香港知名的Youtube网红制作宣传视频。就风格来看，大多是博主的使用体验分享加上恋爱话题的讨论，分享陌生人初次聊天的破冰方式、什么话题更能引起共鸣。结果显示，Omi的这三条视频拿到了60万的Youtube视频浏览量，3万+Youtube参与互动。同时，这种方式也被Omi应用到泰国、印尼等多个地区中，均邀请了当地的KOL制作分享视频。同时，Omi还邀请当地知名度较高的明星网红参与到应用中，在Omi的应用中发起线上直播，滑动对应的星座卡片即可进入直播中，这也为应用吸引了一批用户的加入。小结虽然Omi主要的匹配方式依然是“左滑右滑”，但无论从产品设计还是从营销角度来看，Omi正在尝试赋予用户更能展现个性化的方式，试图帮助用户快速了解屏幕那端的陌生人，从而提升用户的配对效率。在重视好看外表的同时，也希望吸引到渴望“灵魂交友”的部分用户。从成绩上来看，现在的Omi稳坐东南亚部分地区分类Top 5的位置，未来，Omi的更新或许还会带给市场更多惊喜。发布于 2022-06-21 18:17爆款爆款打造探探​赞同​​添加评论​分享​喜欢​收藏​申请