腾讯 Omi 生态发布

栏目: CSS · 发布时间: 7个月前

来源: juejin.im

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

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

腾讯 Omi 生态发布

工具由于 土耳其大神 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 用户指南

感谢 xcatliuuxu 为 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 生态发布》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

为你推荐:

相关软件推荐:

标签: omi

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

腾讯传

腾讯传

吴晓波 / 浙江大学出版社 / 2017-1-1 / 58.00元

腾讯官方唯一授权的权威传记 著名财经作家吴晓波倾力之作 当市值最高的中国互联网公司,遇上中国财经界最冷静的一双眼睛 读懂腾讯,读懂中国互联网 . 内容简介 本书全景式地记录了腾讯崛起的经历,并以互联网的视角重新诠释了中国在融入全球化进程中的曲折与独特性。 从1998年开始创业到成为世界级互联网巨头,腾讯以即时通信工具起步,逐渐进入社交网络、互动娱乐、网络媒......一起来看看 《腾讯传》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

MD5 加密
MD5 加密

MD5 加密工具

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具