騰訊 Omi 生態發佈

寫在前面

Omi 4.0 發佈至今，收到了大量的意見和建議以及真刀真槍的 PR，雖然如今接受 Omi 都是外國友人，可是隨着 IE 市場份額的慢慢消失，能夠碰見的將來，國人也會慢慢擁抱 Omi。Omi Team 通過一個星期的努力，終於完成了核心的生態的構建，用來服務海量的開發者，固然這只是一個起點，歡迎有任何需求給咱們開 Issues, 咱們對待你提的 issues 處理的速度會令你感到驚訝。 下面鄭重介紹下最近一個星期咱們的工做:

項目	描述
omi-docs	Omi 官方文檔
omi-devtools	谷歌瀏覽器開發工具擴展
omi-cli	項目腳手架工具，支持 Javascript 和 Typescript
omi-i18n	Omi 國際化解決方案
omi-transform	Omi 和 css3transform 完美結合. 讓 css3 transform 在你的 Omi項目中變得超級簡單.
omi-page	基於 page.js 的 Omi 路由
omi-tap	讓 Omi 項目輕鬆支持 tap 事件
omi-finger	Omi 官方手勢庫
omi-mobx	Omi Mobx 適配器
omi element ui(working)	Omi 版本的 element-ui
westore	小程序解決方案 westore，與 Omi 互相啓發
omi 周邊	T恤、衣服、手機殼、包包等

文檔國際化

咱們如今擁有了三個語言版本的開發文檔:

語言	快速入門	主要概念
英語	English	English
中文	簡體中文	簡體中文
韓文	한국어	한국어

土耳其版本和日語版本的相關文檔也正在緊急補齊當中。

開發者工具

使用 Omi 開發工具 能夠很是簡單地調試和管理你的 UI。不須要任何配置，你只要安裝而後就能調試。

既然 Omi 使用了 Web Components 和 Shadow-DOM, 因此不須要像 React 和 Vue 同樣安裝其餘元素面板，只須要使用 Chrome 自帶的 Elements' sidebar 即可，它和 React and Vue 開發者工具同樣強大。

工具由土耳其大神 F 親自操刀打造。你能夠 從 Chrome 應用商店安裝。

omi-cli

安裝

$ npm i omi-cli -g               # install cli
$ omi init your_project_name     # init project, you can also exec 'omi init' in an empty folder
$ cd your_project_name           # please ignore this command if you executed 'omi init' in an empty folder
$ npm start                      # develop
$ npm run build                  # release
複製代碼

目錄說明:

├─ config
├─ public
├─ scripts
├─ src
│  ├─ assets
│  ├─ elements    //存放全部 custom elements
│  ├─ store       //存放全部頁面的 store
│  ├─ admin.js    //入口文件，會 build 成  admin.html
│  └─ index.js    //入口文件，會 build 成  index.html
複製代碼

使用 TypeScript 模板(omi-cli v3.0.3+):

$ npm i omi-cli -g                  # install cli
$ omi init-ts your_project_name     # init project, you can also exec 'omi init-ts' in an empty folder
$ cd your_project_name              # please ignore this command if you executed 'omi init' in an empty folder
$ npm start                         # develop
$ npm run build                     # release
複製代碼

Cli 自動建立的項目腳手架是基於單頁的 create-react-app 改形成多頁的，有配置方面的問題能夠查看 create-react-app 用戶指南。

感謝 xcatliu 和 uxu 爲 omi-cli 作出的貢獻。

omi-i18n

你能夠經過 omi-i18n 開速開發國際化的 Omi 項目:

import { tag, WeElement } from "omi";
import { t } from "omi-i18n";

const catalog = {
  welcome: "Welcome to {{name}} using omi-i18n"
};

@tag("my-app")
class MyApp extends WeElement {
  render(props, data) {
    return (
      <i18n-provider locale="en" catalog={catalog}>
        <p slot="loading">
          <spinner-element />
        </p>
        <h1 class="app-title">{t("welcome", { name: data.name })}</h1>
      </i18n-provider>
    );
  }
}
複製代碼

omi-transform

若是你使用過 css3transform, 就知道製做頁面動效是多麼地愜意。如今，你再 Omi 項目裏也可使用上 css3transform 的優秀的特性而且擁有一樣高效的性能:

import { render, WeElement, tag, observe } from "omi";
import "omi-transform";

@observe
@tag("my-app")
class MyApp extends WeElement {
  install() {
    this.data.rotateZ = 30
    this.linkRef = (e) => {
      this.animDiv = e
    }
  }


  installed() {
    setInterval(() => {
      // 慢，由於直接改變 data 會觸發 update -> render -> diff -> apply diff
      // this.data.rotateZ += 2

      //快，由於直接操做 dom
      this.animDiv.rotateZ += 2
      //同步 transform 給 data 防止任何 update
      this.data.rotateZ = this.animDiv.rotateZ
    }, 16)


  }
  render(props, data) {
    return (
      <css3-transform rotateZ={data.rotateZ} translateX={0} perspective={0} >
        <div ref={this.linkRef}>
          omi-transform
          </div>
      </css3-transform>
    )
  }
}

render(<my-app />, "body");
複製代碼

你能夠經過上面展現的簡單小技巧直接操做 DOM 獲取高效的運動性能而且也能應對任何形式的組件更新而不丟失狀態。

omi-page

基於 page.js 的 Omi 路由。

→ demo

使用:

import { render, tag, WeElement } from 'omi'
import page from 'omi-page'

@tag('my-app')
class MyApp extends WeElement {
    installed() {
        page('/', this.index)
        page('/about', this.about)
        page('/contact', this.contact)
        page('/contact/:contactName', this.contact)
        page('*', this.notfound)
        page()
    }

    render() {
        return (
            <div> <ul> <li><a href="/">/</a></li> <li><a href="/about">/about</a></li> <li><a href="/contact">/contact</a></li> <li><a href="/contact/me">/contact/me</a></li> <li><a href="/contact/me?a=b">/contact/me?a=b</a></li> <li><a href="/not-found?foo=bar">/not-found</a></li> </ul> <p> {this.data.path} </p> </div>
        )
    }

    index = (ctx) => {
        this.data.path = ctx.path
        this.update()
    }

    about = (ctx) => {
        this.data.path = ctx.path
        this.update()
    }

    contact = (ctx) => {
        this.data.path = ctx.path
        this.update()
    }

    notfound = (ctx) => {
        this.data.path = ctx.path
        this.update()
    }
}

render(<my-app></my-app>, 'body') 複製代碼

若是你知道 express，page.js 徹底受 express 啓發。瞭解 express 你就確定可以快速上手 omi-page。

omi-tap

Omi 不只能夠開發 PC 網站，咱們拿來開發微信和手機 QQ 的 Web 頁面，也叫 H5 頁面。因此提供了 omi-tap 綁定 tap 事件來解決移動端 click 300ms 延遲的問題，使用方式也是極其簡便：

import { render, WeElement, tag } from "omi"
import "omi-tap"

@tag("my-app")
class MyApp extends WeElement {
  onTap = () => {
    console.log('tap')
  }

  render() {
    return (
      <omi-tap onTap={this.onTap} >
        <div>Tap Me!</div>
      </omi-tap>
    )
  }
}

render(<my-app />, "body");
複製代碼

omi-finger

針對移動端，負責的手勢交互，咱們也提供了 omi-finger 手勢交互庫。你能夠移動端打開這個頁面看看 omi-finger 的能力:

→ omi-finger demo

使用：

import { render, tag, WeElement, observe } from 'omi'
import 'omi-finger'

@observe
@tag('my-app')
class MyApp extends WeElement {
  install() {
    this.data.wording = 'Tap or Swipe Me!'
  }

  handleTap = (evt) => {
    this.data.wording += '\r\nTap'
  }

  handleSwipe = (evt) => {
    this.data.wording += '\r\nSwipe-' + evt.direction
  }

  render() {
    return (
      <div>
        <omi-finger onTap={this.handleTap} abc={{a:1}} onSwipe={this.handleSwipe}>
          <div class="touchArea" >
            {this.data.wording}
          </div>
        </omi-finger>
      </div>
    )
  }
}

render(<my-app></my-app>, 'body')
複製代碼

支持手勢列表:

手勢
onTap
onMultipointStart
onLongTap
onSwipe
onPinch
onRotate
onPressMove
onMultipointEnd
onDoubleTap

omi-mobx

Omi 內置的 observe 是經過 proxy 實現的，若是你想要兼容 IE11, 你可使用 omi-mobx 去實現響應式視圖:

import { tag, WeElement } from "omi"
import { observe } from "omi-mobx"

@observe
@tag("my-app")
class MyApp extends WeElement {
  install() {
    this.data.name = "omi"
  }

  onClick = () => {
    this.data.name = "Omi V4.0"
  }

  render(props, data) {
    return (
      <div onClick={this.onClick}> <h1>Welcome to {data.name}</h1> </div>
    )
  }
}
複製代碼

omi-element-ui

Omi 版本的 element-ui, omi 版本的 weui 也在同步進行當中，期待一下。

你也能夠→ 加入進來。

omi 周邊

感謝

很是感謝各位爲 Omi 生態的貢獻:

• 土耳其的大神 F
• 韓國的 LeeHyungGeun
• 韓國的 validalias
• 騰訊的 xcatliu
• 騰訊的 vorshen
• 騰訊的 uxu
• 騰訊的 ghostzhang
• 騰訊的 zhengbao
• 中國的 1921622004
• 以色列的 benjamingr
• 還有我 dntzhang

以及其餘正在爲 Omi 貢獻的人....

咱們也會在今年年末舉辦 Omi Conf 開發者大會，門票大機率免費，或者約等於免費用來過濾無效報名者。

→ 馬上擁抱 Web Components ，加入 Omi