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

最新推荐文章于 2025-06-16 17:48:49 发布
原创 最新推荐文章于 2025-06-16 17:48:49 发布 · 4.5k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#程序员 #编程语言 #编程

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 961
建议开发"混合开发加速器"（Hybrid Dev Accelerator），集成：1）可视化组件库（Visual Component Library）；华为2023年发布的DevOps平台集成：1）AI代码检测（AI Code Audit），自动识别性能瓶颈（如内存泄漏）；例如，LinkedIn在混合开发中，将核心算法模块（如推荐引擎）转为原生实现，使启动速度提升300%。以京东"秒杀"功能为例，其核心交易逻辑（支付、库存）采用原生组件，外围交互（商品列表、弹窗）使用React Native。
浅谈前端跨平台框架
BradenHan的专栏
07-27 779
前端跨端实践是指在开发过程中，使用统一的代码库或框架来实现在不同平台上运行的应用程序。这种实践旨在减少重复开发和维护成本，并提高开发效率和用户体验。以下是一些前端跨端实践的方法和技术：响应式设计（Responsive Design）：通过使用CSS媒体查询和弹性布局等技术，可以根据设备的屏幕大小和分辨率来自适应地调整页面布局和样式，从而在不同的终端上提供良好的用户体验。
探秘Hippy：腾讯开源的跨平台移动应用框架
gitblog_00100的博客
04-25 962
探秘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 1532
控件提供使用统一的类定义接口 _$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 还可以与其他技术栈集成，比如 Weex 和小程序生态体系[^3]。 - **虚拟 DOM 支持**：利用高效的 Virtual DOM 实现机制优化渲染性能，减少不必要的重绘操作[^4]。 - **...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值