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">
          <img
            src={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">
          <img
            src={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

本次接觸到這裡結束，下次是摸索 事件的東西