腾讯团队开源前端跨框架跨平台框架Omi

最新推荐文章于 2025-06-16 17:48:49 发布
最新推荐文章于 2025-06-16 17:48:49 发布
阅读量4.5k 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： 程序员 编程语言 编程
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/okmjsayu/article/details/96633808
Omi 是一个由腾讯团队开源的前端框架，它基于 Web Components 并兼容 IE8+、小程序和各种前端框架。Omi 提供桌面、移动和小程序的解决方案，具有轻量级、高性能和框架无关的特点。它支持 TypeScript，具备响应式数据绑定，并拥有跨框架 UI 组件库 omim。此外，Omi 还结合了 Shadow DOM 和 Virtual DOM 的优点，采用 Path Updating 的 store 系统实现高效的数据更新。要开始使用 Omi，开发者可以直接运行无需构建工具的示例代码。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

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

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

Github star 9.2K+， MIT协议。

腾讯团队开源前端跨框架跨平台框架Omi

特性

  • 框架无关，任何框架可以使用 Omi 自定义元素
  • 提供桌面、移动和小程序整体解决方案
  • 超快的更新和渲染
  • 小巧的尺寸
  • 拥有官方跨框架 UI 组件库 – omim
  • 使用 omio 可以兼容到 IE8
  • 真正的 MVVM, 拥有 mappingjs 强力支持
  • 支持 TypeScript
  • 响应式数据绑定
  • 增强了 CSS, 支持 rpx 单位，基于 750 屏幕宽度
  • 原生支持 tap 事件
  • 基于 Shadow Dom 设计
  • 利用Chrome 开发工具扩展 轻松调试，从 Chrome 应用商店安装
  • 符合浏览器的发展趋势以及API设计理念
  • Web Components + JSX + HTM 融合为一个框架 Omi
  • Web Components 也可以数据驱动视图, UI = fn(data)
  • JSX 是开发体验最棒(智能提示)、语法噪音最少、图灵完备的 UI 表达式，模板引擎不完备，模板字符串完备但是语法噪音太大
  • 看看Facebook React 和 Web Components对比优势，Omi 融合了各自的优点，而且给开发者自由的选择喜爱的方式
  • Shadow DOM 与 Virtual DOM 融合，Omi 既使用了虚拟 DOM，也是使用真实 Shadow DOM，让视图更新更准
最低0.47元/天 解锁文章

200万优质内容无限畅学
为人三会
关注
【腾讯犀牛鸟开源人才培养计划】萌新的开源心得之Omi框架
weixin_49318392的博客
06-25 734
【腾讯犀牛鸟开源人才培养计划】萌新的开源心得之Omi框架 一. 前景概要 （1).自我介绍： 我在一些机缘巧合下了解到了前端这个领域，是一个在经过一段时间对js、html、css以及一些前端框架的学习后终于对前端领域有了那么 些许了解的萌新。然后又碰巧了解到了腾讯犀牛鸟开源人才培养计划，进而接触到了Omi前端框架。 （2). 对开源的认识： 什么是开源？它有什么作用？ （1） 开源，对于软件开发而言，可能就是软件的代码是公开的，任何人都可以去修改和 维护。它的最权威的解释请参考：开源 （2） 开源的作用，开
【腾讯犀牛鸟开源人才培养计划】开源人才培养计划活动参与指南
wxy201008的博客
06-11 1318
什么是腾讯犀牛鸟开源人才培养计划 为响应国家十四五规划的开源战略,腾讯于2021年5月发布“首届腾讯犀牛鸟开源人才培养计划”,联合学界力量,打造面向高校学生的开源课程和开源实践培养方案,培育开源人才,普及开源文化,助力开源人才生态的发展。 培养方案分为开源基础培训、开源进阶研学、开源项目实战三个环节,项目涉及云原生、微服务、容器、AI、大数据、前端、物联网/边绿计算等多项技术热点。报名即可参加线上开源系列课程,其中入选开源项目实战的学生将在导师的一对一指导下,利用暑假开展编程实践。 我们能收获到什么 相信.
腾讯开源的手机前端开发调试利器 vConsole.zip
07-19
1 前言我们在开发手机版网页的时候，常常会出现下面的情景： (1) 开发时，在自己电脑上运行得好好的，在手机上打开就挂了，但是手机上又看不到error log；  (2) 上线后，某用户表示页面失灵，但我们自己又重现不出来，看不到用户侧的出错信息。如果说(1)还可以通过电脑连接手机以查看log来解决，那(2)在没有完善的前端上报体系时就非常被动了。作为开发者，我们的诉求很简单：有没有快捷的方法在手机前端页面看到log日志？2 vConsole前端调试面板莫慌，抱紧vConsole！vConsole是一款由微信公众平台前端团队打造的前端调试面板，专治手机端看log难题。目前vConsole自带有2个面板，默认为“日志”面板，负责展示log。细心的同学可能会发现上面的log颜色各有不同。与电脑端的Developer Tools一样，开发者可以通过调用不同的方法来打出不同的颜色，以便快速区分日志类型：console.log('foo'); // 白底黑字   console.info('bar'); // 白底紫字   console.debug('oh'); // 白底黄字  console.warn('foo'); // 黄底黄字  console.error('bar'); // 红底红字第二个是“系统”面板，vConsole会自动将一些基础信息（如系统版本）打印出来，方便开发者定位问题。若页面是在微信内置浏览器中打开的，vConsole还会打印出微信版本号、当前网络类型等额外信息。默认情况下，vConsole的面板是隐藏起来的。我们可以点击右下角的“面板”悬浮按钮来显示vConsole面板。3 使用方法Talk is cheap, show me the code.首先，在需要展示日志的页面引入vConsole模块。我们建议在<head>中而非<body>底部引入，方便后续的新版本vConsole在页面初始化时预埋各种debug钩子。引入后，会自动生成window.vConsole对象实例。<head>  [removed][removed]  </head>对于更通常的情况，我们只需在调试模式下才启用vConsole，平时用户无需看到调试面板。这时候就需要开发者自行判断引入模块的时机。以PHP为例，通过判断URL中有无 dev_mode参数来选择性加载vConsole：<?php if($_GET['dev_mode'=='1'){?>  [removed][removed]   <?php}?>如果项目中用到了CommonJS或SeaJS这种AMD/CMD规范的模块加载方式，可以在module中使用require()引入vConsole：var vConsole =require('path/to/vconsole.min.js');好了，怎么打印log呢？与电脑端一致，可以直接使用console.log()等方法来打印日志，目前支持的方法有：console.log('foo');  console.info('bar');  console.debug('oh');  console.warn('foo'); console.error('bar');若页面未加载vConsole模块，console.log()会直接输出到原生控制台中；加载模块后，日志则会输出到原生控制台 前端面板。因此不必担心兼容性问题。引入模块后，vConsole会有一小段时间用于初始化工作，在渲染出面板HTML之前将无法立即打印log。因此，若要在引入模块后立即打印log，应使用vConsole.ready()方法：vConsole.ready(function() { console.log('Hello World');  });4 在线demo微信扫描以下二维码（或微信内长按图片识别二维码），即可体验vConsole面板。目前vConsole已开源到WeChatFE的Github中。 标签：腾讯  前端工具
深入解析三大跨平台开发框架：Flutter、React Native 和 uniapp
热门推荐
weixin_37600397的博客
06-28 1万+
开发者可以编写自定义原生组件或模块，扩展 Weex 的功能。这些自定义组件可以使用 Java 或 Kotlin 编写（对于 Android），或者使用 Objective-C 或 Swift 编写（对于 iOS），然后通过 Weex 的接口将其暴露给 JavaScript 层。Flutter：适合需要高性能和一致性 UI 表现的应用，尤其是在高度自定义和复杂的 UI 场景中。：适合需要快速开发和良好社区支持的项目，能够在一定程度上平衡开发效率和性能。
跨平台框架混合开发：原生组件与跨端框架协同方案
最新发布
2501_92440887的博客
06-16 959
建议开发"混合开发加速器"（Hybrid Dev Accelerator），集成：1）可视化组件库（Visual Component Library）；华为2023年发布的DevOps平台集成：1）AI代码检测（AI Code Audit），自动识别性能瓶颈（如内存泄漏）；例如，LinkedIn在混合开发中，将核心算法模块（如推荐引擎）转为原生实现，使启动速度提升300%。以京东"秒杀"功能为例，其核心交易逻辑（支付、库存）采用原生组件，外围交互（商品列表、弹窗）使用React Native。
浅谈前端跨平台框架
BradenHan的专栏
07-27 778
前端跨端实践是指在开发过程中，使用统一的代码库或框架来实现在不同平台上运行的应用程序。这种实践旨在减少重复开发和维护成本，并提高开发效率和用户体验。以下是一些前端跨端实践的方法和技术：响应式设计（Responsive Design）：通过使用CSS媒体查询和弹性布局等技术，可以根据设备的屏幕大小和分辨率来自适应地调整页面布局和样式，从而在不同的终端上提供良好的用户体验。
探秘Hippy：腾讯开源的跨平台移动应用框架
gitblog_00100的博客
04-25 961
探秘Hippy：腾讯开源的跨平台移动应用框架 HippyHippy is designed to easily build cross-platform dynamic apps. ????项目地址:https://gitcode.com/gh_mirrors/hi/Hippy 是腾讯推出的一款高效、高性能的跨平台移动应用开发框架，旨在帮助开发者构建接近原生体验的移动应用，同时支持Android和iO...
腾讯 Omi 生态发布
weixin_33739523的博客
10-29 501
写在前面 Omi 4.0 发布至今，收到了大量的意见和建议以及真刀真枪的 PR，虽然现在接受 Omi 都是外国友人，但是随着 IE 市场份额的慢慢消失，可以遇见的未来，国人也会慢慢拥抱 Omi。Omi Team 经过一个星期的努力，终于完成了核心的生态的构建，用来服务海量的开发者，当然这只是一个起点，欢迎有任何需求给我们开 Issues, 我们对待你提的 issues 处理的速度会令你感到惊讶。 ...
2021年底跨平台技术比较和选型指南（也许是最全的）
Charlie Zzo 's Blog
11-08 1469
2021年马上就结束了，回看这一年。 年初的时候，跨平台你说是伪需求吧，其实也有用，你说是硬需求吧，其实有点伪。 年末再来总结一下，大项目不缺原生程序员，不需要跨平台，小项目人手不够为了占领多平台才是硬需求。 我觉得国内最大的跨平台需求在小程序，毕竟那么多相差不大的平台，实在不应该写那么多套代码。 如有错误请指出，我核实后改正。如果抬杠就是你说的对。说别人项目是 KPI 项目的时候，请你也发布一个 KPI 项目。 企业的技术在不断迭代，新技术成熟以后放弃旧框架维护是人之常情，没有人会用大量时间维护和自己完全
开源项目介绍 ｜ ncnn-神经网络推理框架
腾讯开源
06-21 6801
2021腾讯犀牛鸟开源人才培养计划开源项目介绍滑至文末报名&提交项目Proposalncnn项目介绍ncnn是一个为手机端极致优化的高性能神经网络前向计算框架。基于 ncnn，开发...
细数腾讯开源的前端项目及实践
ur home
03-31 647
感谢Tencent提供如此丰富的前端开源项目 1.TSW-Tencent Server Web 官方GitHub地址 中文文档 Tencent Server Web(TSW) 是一套面向 WEB 前端开发者，以提升问题定位效率为初衷，提供染色抓包、全息日志和异常发现的 Node.js 基础设施。TSW 关注业务的运维监控能力，适用于 http、websocket 协议的业务场景，可无缝与现有应用（Koa、Express）进行整合。 ...
使用Vuejs开发跨平台应用的前端框架
08-12
开发者通过编写 Vue.js 代码，uni-app 将其编译到 iOS、Android、微信小程序、H5等多个平台，保证其正确运行并达到优秀体验。
移动跨平台APP开发框架比较
02-24
整理目前流行的跨平台WebApp开发技术的特点，仅供参考。
腾讯最热门的 10 款前端开源项目
wshyb0314的博客
04-10 1995
作为国内知名的互联网公司，腾讯在前端领域做出了很多开源贡献。本文就来盘点腾讯最热门的 10 款前端开源项目！
一款简单、好用的跨平台WEB前端开发框架
qq_45791012的博客
03-17 1530
控件提供使用统一的类定义接口 _$klass 来定义一个类，通过此接口定义的类才具备以下的继承、初始化等特性// 定义一个类// TODOreturn _p;});所有的控件均继承自 util/event 模块的 _$$EventTarget 类var _pro;// 定义控件// 继承_$$EventTarget// TODOreturn _p;});
腾讯开源新一代跨端开发框架！
Java和Android架构
10-28 427
Hippy 跨端开发框架介绍Hippy 是一个新生的跨端开发框架，目标是使开发者可以只写一套代码就直接运行于三个平台（iOS、Android 和 Web）。Hippy 的设计是面向传统 ...
腾讯php开源web框架,腾讯开源前端web框架QMUI
weixin_28860509的博客
03-17 555
QMUI 是一个开源的 Web UI 框架，由腾讯 QMUI 团队开发设计， QMUI Web 包含了超过70个 Sass mixin/function/extend，涉及布局、外观、动画、设备适配、数值计算以及 Sass 原生能力增强等多个方面，提升开发效率,同时保持了项目的高可维护性与稳健。功能特性基础配置与组件通过内置的公共组件和对应的 SASS 配置表，只需修改简单的配置即可快速实现所需...
掘金 AMA：腾讯 Omi 框架作者--dntzhang 聊前端开发、谈学习路径和技术进阶
weixin_34356555的博客
04-03 758
第二十期 AMA 掘金团队腾讯 Omi 框架 ( github.com/Tencent/omi ) 和 Cax 渲染引擎作者，AlloyTeam 开源负责人之一 dntzhang(张磊)做了为期三天的 Ask Me Anything (AMA) 活动（活动已结束）。 我们在此精选了一些来自用户的提问及 dntzhang 的回答。 关于 dntzhang 腾讯 Omi 框架(github.com/...
跨平台框架选择
乌龟赛跑
12-30 345
目标：找到一个快速上手的，能支持android、ios、H5、微信小程序、支付宝小程序、钉钉的开发框架。 框架 android ios H5 微信小程序 支付宝小程序 钉钉 跨平台兼容性 上手难度 React Native √ √ × × × × 一般 Flutter √ √ × × × × 一般 较高 PhoneGap √ √ × × × × 一般 较低 Taro √ √ √ √ √ √ 较好 较高 uni-app √ √ √ √ √ √ 好 较低 从快速开发，跨平台
omi框架
04-01
### Omi Framework简介 Omi 是一个轻量级的前端框架，专注于构建高性能、模块化的 Web 应用程序[^1]。它由阿里巴巴团队开发并维护，旨在提供一种简单而强大的方式来管理复杂的用户界面逻辑。Omi 的核心设计理念是以组件为中心，通过声明式的语法简化视图层的开发。 #### 特性概述 Omi 提供了许多特性以支持现代 Web 开发需求： - **小型化设计**：Omi 的体积非常小巧，这使得它可以快速加载并在各种设备上高效运行[^2]。 - **跨平台兼容**：除了传统的浏览器环境外，Omi 还可以与其他技术栈集成，比如 Weex 和小程序生态体系[^3]。 - **虚拟 DOM 支持**：利用高效的 Virtual DOM 实现机制优化渲染性能，减少不必要的重绘操作[^4]。 - **插件扩展能力**：开发者可以通过丰富的官方或社区贡献的插件增强功能集，例如状态管理工具 `omi-store` 或者样式解决方案 `omi-taro`[^5]。 以下是创建基本 Omi 组件的一个例子： ```javascript import { Component } from 'omi'; class MyComponent extends Component { static tagName = 'my-component'; // 定义自定义标签名称 render() { return ( <div> Hello, world! </div> ); } } // 注册组件到全局作用域中以便于使用 customElements.define(MyComponent.tagName, MyComponent); ``` 此代码片段展示了如何继承基类 `Component` 来定义新的 UI 元素，并指定其对应的 HTML 标记名以及实现简单的模板结构[^6]。 ### 文档与教程资源链接建议 对于希望深入学习 Omi 框架的人士来说，可以从以下几个方面入手获取更多资料： - 访问官方网站查阅最新版次的功能说明和技术博客文章； - 阅读 GitHub 上开源项目的 README 文件及其附带的例子项目源码； - 参加线上/线下活动交流经验心得或者关注相关社交媒体账号动态更新消息等内容[^7]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值