omi： 腾讯出品的多端开发框架

2025年09月25日 21:42:52
47577
多端开发框架 跨端开发

项目结构

📌 omi Tencent/omi

Web Components Framework - Web组件框架

项目大小
涉及语言 TypeScript 83.80% CSS 10.14% JavaScript 5.21% HTML 0.55% Vue 0.29% SCSS 0.00%
许可协议 Other
Gitee Github

English | 简体中文

omi

Omi - Web Components 框架

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
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 (
      <>
        <button onClick={sub}>-button>
        <span>{count.value}span>
        <button onClick={add}>+button>
      </>
    )
  }
}

使用该组件:

1
2
3
4
5
6
7
8
9
10
11
12
import { h } from 'omi'
import './counter-demo'
 
render(<counter-demo />, document.body)
 
// 或者
import { CounterDemo, Other } from './counter-demo'
// 当需要导入其他东西的时候，防止被 tree shaking
render(<CounterDemo />, document.body)
 
// 或者
document.body.appendChild(document.createElement('counter-demo'))

安装

1
npm i omi

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

1
2
3
4
$ 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 项目：

1
2
3
4
$ 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-transition - 提供进入和离开动画。
    • omi-ripple - 用于为用户界面元素添加涟漪（ripple）效果。当用户与元素交互（例如点击按钮）时，涟漪效果会从交互点开始扩散开来。
  • 综合性例子 (未发布到 npm)

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

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

Tailwind Element Omi UI KIT> 💯https://omi.cdn-go.cn/elements/latest/)

多谢！

使用

TodoApp 使用响应式函数

数据驱动编程

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
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 (
      <>
        <input type="text" />
        <button onClick={addTodo}>Addbutton>
        <ul>
          {todos.value.map((todo, index) => {
            return (
              <li>
                <label>
                  <input type="checkbox" checked="{todo.completed}"> {
                      todo.completed = !todo.completed
                      todos.update()
                    }}
                  />
                  {todo.completed ? <s>{todo.text}s> : todo.text}
                label>
                {' '}
                <button onClick={() => removeTodo(index)}>❌button>
              li>
            )
          })}
        ul>
        <p>Completed count: {completedCount.value}p>
      </>
    )
  }
}
 
render(<todo-list />, document.body)

自动导入 h

vite.config.js:

1
2
3
4
5
6
7
8
9
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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
import { tag, Component, h, bind } from 'omi'
 
@tag('my-counter')
class MyCounter extends Component<{ count: number }> {
  static props = {
    count: {
      type: Number,
      default: 0,
      changed(newValue, oldValue) {
        this.setState({ count: newValue })
      }
    }
  }
 
  state = {
    count: 1
  }
 
  @bind
  sub() {
    this.setState({ count: this.state.count - 1 })
    this.fire('change', this.state.count)
  }
 
  @bind
  add() {
    this.setState({ count: this.state.count + 1 })
    this.fire('change', this.state.count)
  }
 
  render() {
    return (
      <>
        <button onClick={this.sub}>-button>
        <span>{this.state.count}span>
        <button onClick={this.add}>+button>
      </>
    )
  }
}

在 Vue3 中使用

1
2
3
4
5
6
7
8
9
10
11
12
13
{{ msg }}
 
 
 
  【Omi】 
 
 
 
  count is {{ count }}
   
   【Vue】 
  

如果在 omi 组件中使用:

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

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

1
<my-counter @count-change="change" :count="count" />

在 React 中使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
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 (
    <>
      <h1>Omi + Reacth1>
      <my-counter count={count} ref={myCounterRef}>my-counter>
      <div>
        <button onClick={() => setCount((count) => count + 1)}>
          count is {count}
        button>
      div>
    </>
  )
}
 
export default App

贡献者

License

MIT © Tencent

免责声明 © 2025 - 虚宝阁

本站部分源码来源于网络，版权归属原开发者，用户仅获得使用权。依据《计算机软件保护条例》第十六条，禁止：

  • 逆向工程破解技术保护措施
  • 未经许可的分发行为
  • 去除源码中的原始版权标识

※ 本站源码仅用于学习和研究，禁止用于商业用途。如有侵权, 请及时联系我们进行处理。

侵权举报请提供： 侵权页面URL | 权属证明模板

响应时效：收到完整材料后48小时内处理

相关推荐

fastapi： Python web api 框架

一个基于 Python 3.6+ 版本的异步 WEB 应用框架，使用 Python 类型注解构建 web API 。主要特点有: 高性能：与 Node JS 和 Go 相当。 编码快：将开发功能的速度提高 2~3 倍。 Bug少：减少大约 40% 的由开发人员导致的错误。 直观：强大的编辑器支持，可智能感知和补全代码。 简单：易于学习和使用，减少文档阅读时间。 简短：尽量减少代码重复。 健壮：获得可用于生产的代码，具有自动交互文档。 基于标准：基于 OpenAPI 和 JSON Schema 。

90539 2025-09-16

refine： 企业级React后台框架

这是一个专为构建 CRUD（增删改查）应用设计的 Web 框架，只需一行命令即可生成项目骨架，内置登录、列表、详情、编辑页面等功能。业务逻辑与 UI、路由完全解耦，可灵活集成 Ant Design、Material-UI 等设计系统，适用于快速开发管理后台、仪表盘、内部工具和 B2B 应用。

32865 2025-09-13

NBlog： 开源博客系统

一个前后端分离的开源博客系统，基于 Spring Boot + Vue 技术栈开发，界面清新简洁，拥有多个丰富的博客组件，自带管理后台。

2636 2025-09-16

Claudable：基于 Next.js 框架的网站生成器

把你用自然语言描述的应用想法，直接变成可以运行的网站代码。Claudable 背后依赖强大的 AI 编程助手，主要是 Claude Code，也支持 Cursor CLI 来理解你的需求并生成代码。你不需要懂复杂的 API 设置、数据库配置或者部署流程：用简单的语言告诉 Claudable 你想要什么应用。

2525 2025-09-15

OpenIsle- 轻量级的Java开源社区系统

这是一个基于 Spring Boot 和 Vue3 构建的开源自由社区系统，定位为轻量级的 Discourse。它完全开源、可二次开发，支持白名单邀请、自定义标签、实时通知等功能。

393 2025-09-13

drawnix

开源白板工具（SaaS），一体化白板，包含思维导图、流程图、自由画等。All in one open-source whiteboard tool with mind, flowchart, freehand and etc.

11913 2025-08-28

Retrieval-based-Voice-Conversion-WebUI

Retrieval-based-Voice-Conversion-WebUI是基于VITS的易用变声框架。底模用开源VCTK数据集训练，无版权问题。有训练推理和实时变声界面，具备很多优点。

32357 2025-09-06

langchainjs： 用语言模型构建模块化AI应用

帮助你用大型语言模型（如 GPT）构建模块化智能应用。 想做 AI 代理？做会读 PDF 的问答机器人？轻松搞定。 简直是生成式 AI 的乐高积木。

15824 2025-10-01

weui

WeUI 是一套与微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信 Web 开发量身设计，包含 button、cell 等多种元素。其提供说明文档、视觉标准参考，还有不同版本如小程序版、企业微信版等，采用 MIT 许可协议，鼓励开源贡献。

27360 2025-09-21

langchain LLM应用的胶水框架

把大模型和数据库、API、知识库结合起来的胶水框架！它像“乐高积木”一样，把各种AI组件拼起来，让你轻松开发聊天机器人、问答系统、智能助手，不用从零写代码。

116885 2025-09-13

开源3D俄罗斯方块-react版

🎮 3D Tetris game「俄罗斯方块」,将经典的俄罗斯方块游戏以三维立体的形式在网页浏览器中呈现出来。该项目采用了 React 作为前端框架来构建用户界面和游戏逻辑组织。为了实现 3D 渲染效果，它深度集入了 Three.js 库用于在网页上创建和展示复杂的 3D 图形。

505 2025-09-09

热 榜

scira： AI 驱动搜索引擎

51018

image-compressor： 前端图片压缩库

21018

squish： 基于浏览器的图像压缩工具

9908

AirBattery： 隔空查看苹果设备电量的 Mac 工具

36031

Seelen-UI： 高度可定制的 Windows 桌面美化工具

17024

pyscript： 直接在浏览器中用 Python 创建应用程序

22267

pydoll： 无需 WebDriver 的浏览器自动化 Python 库

14772

pdfplumber： 轻松提取 PDF 文本和表格的 Python 库

24967

暂无数据

友情链接

Github-最大的开源仓库
Github
Gitee-国内开源仓库, github国内镜像仓库
Gitee