破界!Omi生態omi-mp釋出,用小程式開發生成Web

騰訊開源發表於2019-03-02

破界!Omi生態omi-mp釋出,用小程式開發生成Web

omi-mp 是什麼

圖片

Omi 框架是微信支付線研發部和 AlloyTeam 開源的通用 Web 元件化框架,基於 Web Components,用來開發 PC、手機瀏覽器或者微信、手Q webview 的 Web 頁面。自今年5月開源以來,該專案共獲得 Star 數 5000+,擁有貢獻者29人。經過 Omi 原始開發團隊和社群貢獻者的共同努力,Omi 的生態發展非常迅速,包括:

破界!Omi生態omi-mp釋出,用小程式開發生成Web圖片

其中,

Omi 近期釋出 omi-mp,旨在打破小程式和 Web 的邊界,讓“

小程式設計師

”能夠

使用小程式技術棧開發

Web HTML5 的單頁應用(SPA), 也可讓已有小程式生成 Web 頁面。一次開發,多處執行。比如小程式官方模板生成的 Web 頁面:

破界!Omi生態omi-mp釋出,用小程式開發生成Web圖片

微信小程式生態

11月7日,馬化騰在第五屆世界網際網路大會上透露了一組數字:目前,已經有150 萬開發者加入到了小程式的開發,小程式應用數量超過100萬,已覆蓋200多個細分行業,日活使用者達到2億。近10個月的時間,小程式的數量幾乎翻了一番,開發者數量增長了50萬,小程式日活增長了3000萬。

破界!Omi生態omi-mp釋出,用小程式開發生成Web圖片

據統計,開發小程式用的最多的技術棧是使用小程式提供的語法和工具,騰訊也在加大小程式基礎能力和平臺生態的建設。在可以遇見的未來,微信小程式將不僅僅擁抱Web Components,還會更好的支援NPM、小程式雲、視覺化程式設計、分包。小程式的視覺化佈局體系,能夠讓開發者拖拖拽拽搭積木一樣快速搭建小程式。

微信小程式和

Omi

微信小程式和

Omi 框架都是使用 Web Components(CustomElements 和ShadowDom)

渲染
元件,以搭積木的方式搭建

Web 頁面,小程式在定製的 WebView 中渲染元件,Omi 在 PC、Mobile、TV 等現代瀏覽器環境渲染元件,Omi 使用 JSX 作為 UI 表示式,小程式使用模板引擎,JSX 是圖靈完備,可以表達一切模板引擎。比如舉個99乘法表的例子:

破界!Omi生態omi-mp釋出,用小程式開發生成Web圖片

編譯成

javascript 之後:

破界!Omi生態omi-mp釋出,用小程式開發生成Web圖片

小程式支援

rpx佈局,Omi也增強了CSS, 支援基於750螢幕寬度,支援rpx 佈局。比如定義一個半屏寬度的 div:

破界!Omi生態omi-mp釋出,用小程式開發生成Web圖片

小程式和

Omi 有很多共性,自然而然地可以打通

二者
之間的邊界
讓小程式在更多的平臺上體現其價值,節約公司人力成本,一次開發,多處執行。

破界!Omi生態omi-mp釋出,用小程式開發生成Web圖片

這次公開測試的

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生態omi-mp釋出,用小程式開發生成Web圖片

omi-mp 是一次全新的、突破性的挑戰,在使用過程中,對 omi-mp 有任何意見或建議都可以提出 issues,我們會第一時間反饋,你也可以提交 Pull Request,我們會第一時間 review 併合並進去。希望通過開源社群的合力開發能夠讓 omi-mp 越來越好,讓小程式價值越來越大。

小程式開發生成

Web 示例

下面是豆瓣電影小程式

DEMO 和生成的 Web頁面的對比:

破界!Omi生態omi-mp釋出,用小程式開發生成Web破界!Omi生態omi-mp釋出,用小程式開發生成Web

破界!Omi生態omi-mp釋出,用小程式開發生成Web

破界!Omi生態omi-mp釋出,用小程式開發生成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生態omi-mp釋出,用小程式開發生成Web破界!Omi生態omi-mp釋出,用小程式開發生成Web

Omi Conf

最後有一個好訊息要告訴大家!

Omi Conf 前端開發者大會預計年底會在深圳舉行,目前我們收集廣大使用者和貢獻者的意見,具體這裡可以留言反饋參會意見建議:
https://github.com/Tencent/omi/issues/62

相關文章