написать впереди
С момента выпуска Omi 4.0 я получил много мнений и предложений, а также реальных PR.Хотя Omi теперь воспринимается как иностранный друг, но с постепенным исчезновением доли рынка IE, будущее, которое можно встретить , китайцы также будут медленно обнимать Оми. После недели напряженной работы команда Omi наконец завершила создание основной экосистемы для обслуживания большого количества разработчиков.Конечно, это только отправная точка.Мы приветствуем любые потребности.Открытые вопросы, вы будете удивлены тем, как быстро мы решаем ваши проблемы. Следующее торжественно представляет нашу работу на прошлой неделе:
| проект | описывать |
|---|---|
| omi-docs | Официальная документация Оми |
| omi-devtools | Расширение инструментов разработчика Google Chrome |
| omi-cli | Инструмент для создания каркаса проекта, поддерживает Javascript и Typescript |
| omi-i18n | Решения Omi для интернационализации |
| omi-transform | Оми иcss3transformИдеальное сочетание. Преобразование css3 в ваши проекты Omi очень простое. |
| omi-page | на основеpage.jsМаршрутизация Оми |
| omi-tap | Упростите для проектов Omi поддержку событий касания |
| omi-finger | Официальная библиотека жестов Оми |
| omi-mobx | Адаптер Omi Mobx |
| omi element ui(working) | Omi версия element-ui |
| westore | Апплет Решение Westore, вдохновляет друг друга и Оми |
| Оми вокруг | Футболки, одежда, чехлы для мобильных телефонов, сумки и т. д. |
интернационализация документа
Теперь у нас есть документация по разработке на трех языках:
| язык | Быстрый старт | основная концепция |
|---|---|---|
| английский | English | English |
| китайский язык | Упрощенный китайский | Упрощенный китайский |
| корейский язык | 한국어 | 한국어 |
Также в срочном порядке оформляются соответствующие документы для турецкой и японской версий.
инструменты разработчика
Отладка пользовательского интерфейса и управление им очень просто с инструментами разработки Omi. Никакой настройки не требуется, вы просто устанавливаете и отлаживаете.
Поскольку Omi использует веб-компоненты и Shadow-DOM, нет необходимости устанавливать другие панели элементов, такие как React и Vue, просто используйте собственную боковую панель Chrome Elements, которая так же мощна, как инструменты разработчика React и Vue.
инструменттурецкий бог фПострой его сам. Ты сможешьУстановите из магазина 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-реагировать в многостраничное, можно просмотреть проблемы с конфигурацией.Руководство пользователя приложения create-реагировать.
благодарный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, вы узнаете, как удобно делать анимацию страниц. Теперь вы также можете использовать отличные функции css3transform в проектах Omi и иметь такую же эффективную производительность:
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Маршрутизация Оми.
использовать:
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')
Если вы знаете экспресс, page.js полностью вдохновлен экспрессом. Если вы знаете экспресс, вы определенно сможете быстро начать работу с omi-page.
omi-tap
Omi может не только разрабатывать веб-сайты для ПК, мы используем его для разработки веб-страниц WeChat и QQ для мобильных устройств, также называемых страницами H5. Таким образом, omi-tap предназначен для привязки события касания, чтобы решить проблему задержки клика в 300 мс на мобильном терминале.Метод использования также чрезвычайно прост:
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:
использовать:
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 реализуется через прокси. Если вы хотите быть совместимым с 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:
- Великий Бог Турции F
- Ли ХёнГын из Кореи
- Корейские валидации
- Xcatliu от Tencent
- воршень Tencent
- Уксу от Tencent
- Призрак Tencent
- Чжэнбао Tencent
- китайский 1921622004
- Бенджамингр из Израиля
- и я днтжан
и другие, которые вносят свой вклад в Оми....
Мы тоже проведем его в конце этого годаКонференция разработчиков Omi Conf, билеты, скорее всего, будут бесплатными или примерно равны бесплатными для фильтрации недействительных заявителей.
→ Используйте веб-компоненты прямо сейчас и присоединяйтесь к Omi