Omi 框架是微信支付線研發(fā)部和 AlloyTeam 開(kāi)源的通用 Web 組件化框架，基于 Web Components，用來(lái)開(kāi)發(fā) PC、手機(jī)瀏覽器或者微信、手 Q webview 的 Web 頁(yè)面。自今年 5 月開(kāi)源以來(lái)，該項(xiàng)目共獲得 Star 數(shù) 5000+，擁有貢獻(xiàn)者 29 人。經(jīng)過(guò) Omi 原始開(kāi)發(fā)團(tuán)隊(duì)和社區(qū)貢獻(xiàn)者的共同努力，Omi 的生態(tài)發(fā)展非常迅速，包括：

　　其中，Omi 近期發(fā)布 omi-mp，旨在打破小程序和 Web 的邊界，讓“小程序員”能夠使用小程序技術(shù)棧開(kāi)發(fā) Web HTML5 的單頁(yè)應(yīng)用（SPA）， 也可讓已有小程序生成 Web 頁(yè)面。一次開(kāi)發(fā)，多處運(yùn)行。比如小程序官方模板生成的 Web 頁(yè)面：

　　微信小程序生態(tài)

　　11 月 7 日，馬化騰在第五屆世界互聯(lián)網(wǎng)大會(huì)上透露了一組數(shù)字：目前，已經(jīng)有 150 萬(wàn)開(kāi)發(fā)者加入到了小程序的開(kāi)發(fā)，小程序應(yīng)用數(shù)量超過(guò) 100 萬(wàn)，已覆蓋 200 多個(gè)細(xì)分行業(yè)，日活用戶達(dá)到 2 億。近 10 個(gè)月的時(shí)間，小程序的數(shù)量幾乎翻了一番，開(kāi)發(fā)者數(shù)量增長(zhǎng)了 50 萬(wàn)，小程序日活增長(zhǎng)了 3000 萬(wàn)。

[[249410]]

　　據(jù)統(tǒng)計(jì)，開(kāi)發(fā)小程序用的最多的技術(shù)棧是使用小程序提供的語(yǔ)法和工具， 騰訊也在加大小程序基礎(chǔ)能力和平臺(tái)生態(tài)的建設(shè)。在可以遇見(jiàn)的未來(lái)，微信小程序?qū)⒉粌H僅擁抱 Web Components，還會(huì)更好的支持 NPM、小程序云、可視化編程、分包。小程序的可視化布局體系，能夠讓開(kāi)發(fā)者拖拖拽拽搭積木一樣快速搭建小程序。

　　微信小程序和 Omi

　　微信小程序和 Omi 框架都是使用 Web Components（CustomElements 和 ShadowDom）渲染組件，以搭積木的方式搭建 Web 頁(yè)面，小程序在定制的 WebView 中渲染組件，Omi 在 PC、Mobile、TV 等現(xiàn)代瀏覽器環(huán)境渲染組件，Omi 使用 JSX 作為 UI 表達(dá)式，小程序使用模板引擎，JSX 是圖靈完備，可以表達(dá)一切模板引擎。比如舉個(gè) 99 乘法表的例子：

　　編譯成 javascript 之后:

　　小程序支持 rpx 布局，Omi 也增強(qiáng)了 CSS,支持基于 750 屏幕寬度，支持 rpx 布局。比如定義一個(gè)半屏寬度的 div：

　　小程序和 Omi 有很多共性，自然而然地可以打通二者之間的邊界，讓小程序在更多的平臺(tái)上體現(xiàn)其價(jià)值，節(jié)約公司人力成本，一次開(kāi)發(fā)，多處運(yùn)行。

　　這次公開(kāi)測(cè)試的 omi-mp 旨在挖掘小程序的平臺(tái)潛力和優(yōu)勢(shì)，讓開(kāi)發(fā)者使用現(xiàn)有的小程序快速生成基于 Web Components 的 HTML5 單頁(yè)應(yīng)用，基于 Omi 和 omi-router 的前端項(xiàng)目，讓小程序不僅僅可以運(yùn)行在微信里，也可以運(yùn)行在微信內(nèi)置的瀏覽器、手Q內(nèi)置的瀏覽器、QQ 瀏覽器以及 PC、Mobile、TV 等等的其他瀏覽器里。你可以同時(shí)使用 OMI 開(kāi)發(fā)這工具或者微信開(kāi)發(fā)者工具調(diào)試，既然 Omi 使用了 Web Components 和 Shadow-DOM, 所以不需要像 React 一樣安裝其他元素面板，只需要使用 Chrome 自帶的 Elements' sidebar 便可，它和 React 開(kāi)發(fā)者工具一樣強(qiáng)大。

　　omi-mp 是一次全新的、突破性的挑戰(zhàn)，希望通過(guò)開(kāi)源社區(qū)的合力開(kāi)發(fā)能夠讓 omi-mp 越來(lái)越好，讓小程序發(fā)揮更大的價(jià)值。