破界！Omi生态omi-mp发布，用小程序开发生成Web

2023-02-26

web 小程序 omi

 omi-mp是什么Omi框架是微信支付线研发部和AlloyTeam开源的通用Web组件化框架，基于WebComponents，用来开发PC、手机浏览器或者微信、手Qwebview的Web页面。自今年5月开源以来，该项目共获得Star数5000+，拥有贡献者29人。经过Omi原始开发团队和

omi-mp 是什么

　　Omi 框架是微信支付线研发部和 AlloyTeam 开源的通用 Web 组件化框架，基于 Web Components，用来开发 PC、手机浏览器或者微信、手 Q webview 的 Web 页面。自今年 5 月开源以来，该项目共获得 Star 数 5000+，拥有贡献者 29 人。经过 Omi 原始开发团队和社区贡献者的共同努力，Omi 的生态发展非常迅速，包括：

　　其中，Omi 近期发布 omi-mp，旨在打破小程序和 Web 的边界，让“小程序员”能够使用小程序技术栈开发 Web HTML5 的单页应用（SPA），也可让已有小程序生成 Web 页面。一次开发，多处运行。比如小程序官方模板生成的 Web 页面：

　　微信小程序生态

　　11 月 7 日，马化腾在第五届世界互联网大会上透露了一组数字：目前，已经有 150 万开发者加入到了小程序的开发，小程序应用数量超过 100 万，已覆盖 200 多个细分行业，日活用户达到 2 亿。近 10 个月的时间，小程序的数量几乎翻了一番，开发者数量增长了 50 万，小程序日活增长了 3000 万。

　　据统计，开发小程序用的最多的技术栈是使用小程序提供的语法和工具，腾讯也在加大小程序基础能力和平台生态的建设。在可以遇见的未来，微信小程序将不仅仅拥抱 Web Components，还会更好的支持 NPM、小程序云、可视化编程、分包。小程序的可视化布局体系，能够让开发者拖拖拽拽搭积木一样快速搭建小程序。

　　微信小程序和 Omi

　　微信小程序和 Omi 框架都是使用 Web Components（CustomElements 和 ShadowDom）渲染组件，以搭积木的方式搭建 Web 页面，小程序在定制的 WebView 中渲染组件，Omi 在 PC、Mobile、TV 等现代浏览器环境渲染组件，Omi 使用 JSX 作为 UI 表达式，小程序使用模板引擎，JSX 是图灵完备，可以表达一切模板引擎。比如举个 99 乘法表的例子：

　　编译成 javascript 之后:

　　小程序支持 rpx 布局，Omi 也增强了 CSS,支持基于 750 屏幕宽度，支持 rpx 布局。比如定义一个半屏宽度的 div：

　　小程序和 Omi 有很多共性，自然而然地可以打通二者之间的边界，让小程序在更多的平台上体现其价值，节约公司人力成本，一次开发，多处运行。

　　这次公开测试的 omi-mp 旨在挖掘小程序的平台潜力和优势，让开发者使用现有的小程序快速生成基于 Web Components 的 HTML5 单页应用，基于 Omi 和 omi-router 的前端项目，让小程序不仅仅可以运行在微信里，也可以运行在微信内置的浏览器、手Q内置的浏览器、QQ 浏览器以及 PC、Mobile、TV 等等的其他浏览器里。你可以同时使用 OMI 开发这工具或者微信开发者工具调试，既然 Omi 使用了 Web Components 和 Shadow-DOM, 所以不需要像 React 一样安装其他元素面板，只需要使用 Chrome 自带的 Elements' sidebar 便可，它和 React 开发者工具一样强大。