Omi 已经出了 5.0 版本，由于新手，我们还是使用官方提供的 Cli 去安装，安装完毕后你会发现还是Omi 4.0的那个版本

$: cnpm install -g omi-cli //安装全局 omi-cli$: omi -v //打印出来的是 3.0.25 版本
复制代码

在Cli中提供了4中开发的项目模板

PS：由于Omi 使用了Shadow Dom 所以你使用小程序开发的时候会有种很熟悉的感觉，一说小程序就有种想揍打微信团队的冲动，做的微信开发者工具简称要人命，体验不是一般的差。

本次入坑的是 基础模板，不过也可以选择SPA和MVVM的模板，反正已经使用了webpack，你不是写单页写什么？？

omi init omi-demo//看到 npm  在运行的时候 你可以 关掉程序
//进入文件夹后 再用yarn 安装速度不是一般的快然后 start 就可以了 进入 开发模式复制代码

运行后看到即可

我们先看看项目结构

/src/index.js
import { render } from 'omi'
import './assets/index.css'
import './elements/app'
import registerServiceWorker from './assets/register-service-worker'
import store from './store/app-store'render(<my-app />, '#root', store)
registerServiceWorker()复制代码

很多同学看到 <my-app>会突然懵逼，这是什么，这是干嘛，这是怎么来的

当我们查看elements/app/index.js

import { define, WeElement } from 'omi'
import logo from './logo.svg'
import style from './_index.css'
import '../app-intro'define('my-app', class extends WeElement {static get data() {return { name: '' }}clickHandler = () => {this.store.rename('Omi V4.0')}css() {return style}render(props, data, store) {return (<div class="app"><header class="app-header"><imgsrc={logo}onClick={this.clickHandler}class="app-logo"alt="logo"/><h1 class="app-title">Welcome to {store.data.name}</h1></header><app-intro /></div>)}
})复制代码

就会很明白的知道 之前的 my-app 是怎么来的。就是 define (string,xxx)中定义的string。这很AMD模式。。。 如果要跟着作者的写法的话，我是建议把文件夹名字和“便签”名称保持一致方便日后的管理 如图

在omi里面 他写css的方式和 React 有所不同，React中你要写css 就必须是一种对象的形式，而Omi 而是用了css的函数去编译你的css 字符串。 所以你会看到有一个

...
css(){}
...
复制代码

我们稍微修改一下

然后在看看浏览器看到的东西

这东西看到就会想起小程序中的各种大坑，(2333 摸刀中)

在omi中需要注意的是css的命名规则，如有不慎，可能会影响到某些css的样式问题

既然作者所是支持 Jsx 的写法，我是比较喜欢 import xxx from 的写法，我再一次改造

//my-app/index.js
export default class MyApp extends WeElement {render(props, data, store) {return (<div class="app"><header class="app-header"><imgsrc={logo}onClick={this.clickHandler}class="app-logo"alt="logo"/><h1 class="app-title">Welcome to {store.data.name}</h1></header><app-intro /></div>)}
}复制代码

//index.js
import { render } from 'omi'
import './assets/index.css'
import MyApp from './elements/my-app'
import registerServiceWorker from './assets/register-service-worker'
import store from './store/app-store'
console.log(MyApp);
render(<MyApp />, '#root', store)
registerServiceWorker()复制代码

结果发现，2333333333

看来是只能用AMD模式了

在Omi里面会发现还有一个方法

 static get data() {return { name: '' }}
复制代码

这个方法相当于React中的this.state,只不过它定义的是一个静态方法来实现

在Omi中的render里面才有三个参数 分别是 Props State Store Store如果你没有在页面中引入其他的Store，那么默认使用是入口文件的Store

本次接触到这里结束，下次是摸索 事件的东西