docs: update readme
This commit is contained in:
dntzhang
parent
4352de70fb
commit
05b58d6cd7
|
|
@ -54,7 +54,6 @@ render(<my-counter />, 'body', new Store)
|
|||
| ------------------------------- | ----------------------------------- |
|
||||
| [omi-docs](https://tencent.github.io/omi/site/docs/cn.html) 和 [例子](https://codepen.io/collection/DrMYgV/) 和 [wcd demos](https://webcomponents.dev/demos/omi)| Omi 官方文档 |
|
||||
| [omim](https://github.com/Tencent/omi/tree/master/packages/omim)| Omi 打造的跨框架 Material Design UI 组件库, 任意框架可以使用,([DOCS & REPL](https://tencent.github.io/omi/packages/omim/docs/build/cn.html) && [加入我们](https://github.com/Tencent/omi/tree/master/packages/omim#contribution)!)|
|
||||
| [omis ](https://github.com/Tencent/omi/tree/master/packages/omis) 和 [例子](https://codepen.io/collection/XjLaRo/) 和 [文档](https://tencent.github.io/omi/site/omis/cn.html)| Functional Component + Store + Scoped Style + Web Components in tiny size|
|
||||
| [omi-kbone ](https://github.com/Tencent/omi/tree/master/packages/omi-kbone)| 直接使用 Omis 开发小程序或 Web，基于 [kbone](https://github.com/wechat-miniprogram/kbone)|
|
||||
| [omio](https://github.com/Tencent/omi/tree/master/packages/omio)| 兼容老浏览器的 Omi 版本(支持到 IE8+) |
|
||||
| [omi-ssr](https://github.com/Tencent/omi/tree/master/packages/omi-ssr)| 服务端同构渲染解决方案(目前只能用 omio) |
|
||||
|
|
|
|||
|
|
@ -53,7 +53,6 @@ render(<my-counter />, 'body', new Store)
|
|||
| ------------------------------- | ----------------------------------- |
|
||||
| [omi-docs](https://tencent.github.io/omi/site/docs/index.html) and [codepen](https://codepen.io/collection/DrMYgV/) and [wcd demos](https://webcomponents.dev/demos/omi)| Omi official documents |
|
||||
| [omim](https://github.com/Tencent/omi/tree/master/packages/omim)| Cross **frameworks** and **themes** components.([DOCS & REPL](https://tencent.github.io/omi/packages/omim/docs/build/index.html) && [JOIN US!](https://github.com/Tencent/omi/tree/master/packages/omim#contribution))|
|
||||
| [omis ](https://github.com/Tencent/omi/tree/master/packages/omis) and [codepen](https://codepen.io/collection/XjLaRo/) and [docs](https://tencent.github.io/omi/site/omis/index.html)| Functional Component + Store + Scoped Style + Web Components in tiny size|
|
||||
| [omi-kbone ](https://github.com/Tencent/omi/tree/master/packages/omi-kbone)| 直接使用 Omis 开发小程序或 Web，基于 [kbone](https://github.com/wechat-miniprogram/kbone)|
|
||||
| [omio](https://github.com/Tencent/omi/tree/master/packages/omio)| Omi for old browsers with same api(IE8+)|
|
||||
| [omi-ssr](https://github.com/Tencent/omi/tree/master/packages/omi-ssr)| Server-side rendering(support omio only)|
|
||||
|
|
|
|||
10
index.html
10
index.html
|
|
@ -230,15 +230,7 @@
|
|||
</svg>
|
||||
<span>Omim Docs</span>
|
||||
</a>
|
||||
<a class="button" style='color: #dede23;' href="https://tencent.github.io/omi/site/omis/index.html"
|
||||
target="_blank">
|
||||
<svg viewBox="0 0 180 60">
|
||||
<path
|
||||
d="M10,10 C10,10 50,9.98999977 90,9.98999977 C130,9.98999977 170,10 170,10 C170,10 170.009995,20 170.009995,30 C170.009995,40 170,50 170,50 C170,50 130,50.0099983 90,50.0099983 C50,50.0099983 10,50 10,50 C10,50 9.98999977,40 9.98999977,30 C9.98999977,20 10,10 10,10 Z">
|
||||
</path>
|
||||
</svg>
|
||||
<span>Omis Docs</span>
|
||||
</a>
|
||||
|
||||
<a class="button blue" href="https://github.com/Tencent/omi" target="_blank">
|
||||
<svg viewBox="0 0 180 60">
|
||||
<path
|
||||
|
|
|
|||
|
|
@ -5,54 +5,30 @@
|
|||
## 一套语法多端运行
|
||||
|
||||
```jsx
|
||||
import { h } from 'omis'
|
||||
import './index.css'
|
||||
import { define, h, rpx } from 'omio'
|
||||
import '../game'
|
||||
import './_index.css'
|
||||
|
||||
const Counter = (props, store) => {
|
||||
return (
|
||||
<div>
|
||||
<button onClick={store.sub}>-</button>
|
||||
<span>{store.count}</span>
|
||||
<button onClick={store.add}>+</button>
|
||||
define('my-index', ['paused'], ({ store }) => (
|
||||
<div class="container">
|
||||
<h1>OMI SNAKE</h1>
|
||||
|
||||
<div onClick={store.clickHandle}>跳转</div>
|
||||
<my-game></my-game>
|
||||
|
||||
<div class="ctrl">
|
||||
<div class="btn cm-btn cm-btn-dir up" onClick={store.turnUp}><i></i><em></em><span>Up</span></div>
|
||||
<div class="btn cm-btn cm-btn-dir down" onClick={store.turnDown}><i></i><em></em><span>Down</span></div>
|
||||
<div class="btn cm-btn cm-btn-dir left" onClick={store.turnLeft}><i></i><em></em><span >Left</span></div>
|
||||
<div class="btn cm-btn cm-btn-dir right" onClick={store.turnRight}><i></i><em></em><span >Right</span></div>
|
||||
<div class="btn cm-btn space" onClick={store.toggleSpeed}><i></i><span >加速/减速</span></div>
|
||||
<div class="btn reset small" onClick={store.reset}><i ></i><span >Reset</span></div>
|
||||
<div class="btn pp small" onClick={store.pauseOrPlay}><i></i><span >{store.data.paused ? 'Play' : 'Pause'}</span></div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
|
||||
Counter.store = _ => {
|
||||
return {
|
||||
count: 1,
|
||||
add() {
|
||||
this.count++
|
||||
_.update()
|
||||
},
|
||||
sub() {
|
||||
this.count--
|
||||
_.update()
|
||||
},
|
||||
clickHandle() {
|
||||
if ("undefined" != typeof wx && wx.getSystemInfoSync) {
|
||||
wx.navigateTo({
|
||||
url: '../log/index?id=1'
|
||||
})
|
||||
} else {
|
||||
location.href = 'log.html'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default Counter
|
||||
), "undefined" != typeof wx && wx.getSystemInfoSync || rpx(require('./_index.css')))
|
||||
```
|
||||
|
||||
注意这里 css 在小程序和web里都是全局作用，小程序没法做到 scoped style，在 web 里是可以做到 scoped，只需要这样：
|
||||
|
||||
```js
|
||||
Counter.css = require('./_index.css')
|
||||
```
|
||||
|
||||
使用下划线前缀并且赋值便可。
|
||||
|
||||
## 快速开始
|
||||
|
||||
|
|
@ -102,7 +78,7 @@ npm run build //发布 web
|
|||
|
||||
* 不要使用 bindtap，使用 onClick
|
||||
* 图片请使用 cdn 地址或者 base64
|
||||
* 如果要兼容 web，请用 HTML 和 CSS 标签，比如用 div，不用 view，不用 rpx 单位等
|
||||
* 如果要兼容 web，请用 HTML 和 CSS 标签，比如用 div，不用 view 等
|
||||
|
||||
## Todo
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue