破界!Omi生態omi-mp發佈,用小程序開發生成Web

omi-mp 是什麼javascript

clipboard.png

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

clipboard.png

其中,Omi 近期發佈 omi-mp,旨在打破小程序和 Web 的邊界,讓「小程序員」可以使用小程序技術棧開發 Web HTML5 的單頁應用(SPA), 也可以讓已有小程序生成 Web 頁面。一次開發,多處運行。好比小程序官方模板生成的 Web 頁面:java

clipboard.png

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

clipboard.png

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

微信小程序和 Omi
微信小程序和 Omi 框架都是使用 Web Components(CustomElements 和ShadowDom)渲染組件,以搭積木的方式搭建 Web 頁面,小程序在定製的 WebView 中渲染組件,Omi 在 PC、Mobile、TV 等現代瀏覽器環境渲染組件,Omi 使用 JSX 做爲 UI 表達式,小程序使用模板引擎,JSX 是圖靈完備,能夠表達一切模板引擎。好比舉個99乘法表的例子:github

clipboard.png

編譯成 javascript 以後:web

clipboard.png

小程序支持rpx佈局,Omi也加強了CSS, 支持基於750屏幕寬度,支持 rpx 佈局。好比定義一個半屏寬度的 div:編程

clipboard.png

小程序和 Omi 有不少共性,天然而然地能夠打通兩者之間的邊界,讓小程序在更多的平臺上體現其價值,節約公司人力成本,一次開發,多處運行。小程序

clipboard.png

此次公開測試的 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 愈來愈好,讓小程序價值愈來愈大。

clipboard.png

小程序開發生成 Web 示例
下面是豆瓣電影小程序 DEMO 和生成的 Web頁面的對比:

clipboard.png

clipboard.png

社區化發展,歡迎加入並貢獻社區
目前 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,也可掃碼加入:

clipboard.png

Omi Conf
最後有一個好消息要告訴你們!Omi Conf 前端開發者大會預計年末會在深圳舉行,目前咱們收集廣大用戶和貢獻者的意見,具體這裏能夠留言反饋參會意見建議:
https://github.com/Tencent/om...

相關文章
相關標籤/搜索