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开发者工具一样强大。

omi-mp 是一次全新的、突破性的挑战,在使用过程中,对 omi-mp 有任何意见或建议都可以提出 issues,我们会第一时间反馈,你也可以提交 Pull Request,我们会第一时间 review 并合并进去。希望通过开源社区的合力开发能够让 omi-mp 越来越好,让小程序价值越来越大。

小程序开发生成 Web 示例
下面是豆瓣电影小程序 DEMO 和生成的 Web页面的对比:

社区化发展,欢迎加入并贡献社区
目前 Omi 的贡献者遍布国内外各大公司(中国、韩国、美国、土耳其),Omi 共接受了29名贡献者的文档和代码提交,核心贡献者共 11 名。在腾讯内部,Omi 主要是微信支付线研发部和 AlloyTeam 部分成员在维护。欢迎有想法有能力有激情的开发者加入贡献者行列并最终能够进入 Omi Team。

你可以从这几个方面贡献:
1.  翻译文档,目前有中文、英文和韩文,欢迎其他语言版本的翻译加入
2.  提交补丁代码优化 Omi
3.  积极参与 Issue 的讨论,如答疑解惑、提供想法或报告无法解决的错误
4.  贡献案例,可以是管理后台、PC 网站、移动端 H5等等
5.  完善文档,可以反复修正文档,让其更易懂,上手更快
6.  扩展 Omi 生态,编写 omi 自定义组件
7.  分享与 Omi 的故事,优秀的会挂在 Omi 首页 readme 里
8.  写 Omi 相关的 blog,优秀的会挂在 Omi 首页 readme 里
我们非常欢迎开发者们为腾讯开源贡献一份力量,相应也将给予贡献者激励以表认可与感谢。参见腾讯贡献者激励计划

Omi 交流群
欢迎加入Omi交流群,群聊号码:256426170,也可扫码加入:

Omi Conf
最后有一个好消息要告诉大家!Omi Conf 前端开发者大会预计年底会在深圳举行,目前我们收集广大用户和贡献者的意见,具体这里可以留言反馈参会意见建议:
https://github.com/Tencent/om...

破界!Omi生态omi-mp发布,用小程序开发生成Web的更多相关文章

  1. 微信小程序详细图文教程-10分钟完成微信小程序开发部署发布

    很多朋友都认为微信小程序申请.部署.发布很难,需要很长时间. 实际上,微信和腾讯云同是腾讯产品,已经提供了10分钟(根据准备资源情况,已完成小程序申请认证)完成小程序开发.部署.发布的方式.当然,实现 ...

  2. 发布微信小程序体验版

    小程序这么火,一直没有做过.因为公司有个业务需要做小程序就顺带学习了一把. 1)本次是采用<微信开发者工具 Stable v1.02.1904090>进行的开发: 2)前端使用的是微信官方 ...

  3. 微信小程序开发实战视频教程发布

    昨日(9月23),腾讯终于发布了没有APPid,无需申请也可以进行微信小程序开发的视频教程了,我在在第一时间尝试并发布了这7个小视频教程,入门足够了.... 各位免费拿去,慢慢享用: 链接: http ...

  4. QQ小程序开发与发布小教程

    QQ小程序QQApp,和微信小程序类似,可以直接在手机QQ中直接打开,应用内应用,省去了安装手机APP,非常方便.官方的介绍:QQ小程序为QQ体系下的应用开放平台,可为不同类型的产品提供框架,并在QQ ...

  5. 【Gamma】“北航社团帮”发布说明——小程序v3.0

    目录 Gamma版本新功能 小程序v3.0新功能 新功能列表 新功能展示 这一版修复的缺陷 Gamma版本的已知问题和限制 小程序端 网页端 运行.安装与发布 运行环境的要求 安装与发布 小程序 网页 ...

  6. 微信小程序开发 -- 01

    微信小程序开发基础 -- 开发前的准备 缘由 1月9日张小龙微信小程序正式上线,因为微信,所以小程序从诞生开始就头戴巨大的光环,很多的团队,公司以及开发的个体都眼巴巴的盯着这个小程序.而那个时候我却在 ...

  7. mpvue体验微信小程序开发

    微信小程序 https://developers.weixin.qq.com/miniprogram/introduction/index.html?t=18082114 微信小程序是一种全新的连接用 ...

  8. 零基础入门微信小程序开发

    注:本文来源于:<零基础入门微信小程序开发> 课程介绍 本达人课是一个系列入门教程,目标是从 0 开始带领读者上手实战,课程以微信小程序的核心概念作为主线,介绍配置文件.页面样式文件.Ja ...

  9. 记一次基于 mpvue 的小程序开发及上线实战

    小程序名称:一起打车吧 项目地址: 客户端:https://github.com/jrainlau/taxi-together-client 服务端:https://github.com/jrainl ...

随机推荐

  1. JZ-029-最小的 K 个数

    标题 最小的 K 个数 输入n个整数,找出其中最小的K个数.例如输入4,5,1,6,2,7,3,8这8个数字,则最小的4个数字是1,2,3,4. 题目链接: 最小的 K 个数 代码 import ja ...

  2. 如何从头到脚彻底解决一个MySQL Bug

    摘要:为了保障华为云GaussDB产品的可靠性,每一款产品发布前都要通过多轮严苛的测试用例. 说明:本文中的MySQL,如果不做特殊说明,指的是开源社区版MySQL. 华为云数据库新版本在发布之前,会 ...

  3. Spark ML源码分析之三 分类器

            前面跟大家扯了这么多废话,终于到具体的机器学习模型了.大部分机器学习的教程,总要从监督学习开始讲起,而监督学习的众多算法当中,又以分类算法最为基础,原因在于分类问题非常的单纯直接,几乎 ...

  4. social network 中Clustering Coefficient 相关笔记2

    breath_first search 改变了原图的连接情况.

  5. 2022年官网下安装DBever最全版与官网查阅方法

    目录 安装部署DBeaver 一.官网下载安装 1.百度搜索DBeaver. 2.进入主页,点击DownLoad下载. 3.查看列表,选择windows的exe版本下载. 4.找到位置,双击打开,弹出 ...

  6. Python入门随记(3)

    1.len() 长度或规模函数 2.Unicode转为单字符用chr() 单字符转为Unicode用ord() 3.关于字符的操作函数 函数 作用 lower() 变为小写 upper() 变为大写 ...

  7. TypeError: put() missing 1 required positional argument: 'item'问题分析

    今天博主在练习带参数线程池的时候与到了如下问题: 翻译过来,就是缺少位置参数. 一.错误1 如果此时你的代码高亮是这样: 解决办法:在init魔法方法下的Queue没有加括号,即 self.q = Q ...

  8. calcite物化视图详解

    概述 物化视图和视图类似,反映的是某个查询的结果,但是和视图仅保存SQL定义不同,物化视图本身会存储数据,因此是物化了的视图. 当用户查询的时候,原先创建的物化视图会注册到优化器中,用户的查询命中物化 ...

  9. java8中CompletableFuture的使用介绍

    既然CompletableFuture类实现了CompletionStage接口,首先我们需要理解这个接口的契约.它代表了一个特定的计算的阶段,可以同步或者异步的被完成.你可以把它看成一个计算流水线上 ...

  10. spinlock 设计的初衷,当只有单核时是否还需要锁

    自旋锁,的设计初衷是什么,是为了解决什么问题.如果只有一个cpu,并且是单核,那是否还需要用到自旋锁.