Omi 入坑指南 The second floor 初步接觸

Omi 已經出了 5.0 版本，由於新手，我們還是使用官方提供的 Cli 去安裝，安裝完畢後你會發現還是Omi 4.0的那個版本

$: cnpm install -g omi-cli //安裝全域性 omi-cli$: omi -v //列印出來的是 3.0.25 版本複製程式碼

在Cli中提供了4中開發的專案模板

模板	Command
基礎模板	omi init my-app
使用 TypeScript 的模板	omi init-ts my-app
使用 SPA 模板	omi init-ts my-app
使用 omi-router 單頁應用的模板	omi init-spa my-app
小程式開發 Web 的模板	omi init-mp my-app
MVVM 模板	omi init-mvvm my-app

PS：由於Omi 使用了Shadow Dom 所以你使用小程式開發的時候會有種很熟悉的感覺，一說小程式就有種想揍打微信團隊的衝動，做的微信開發者工具簡稱要人命，體驗不是一般的差。

本次入坑的是基礎模板，不過也可以選擇SPA和MVVM的模板，反正已經使用了webpack，你不是寫單頁寫什麼？？

omi init omi-demo//看到 npm  在執行的時候 你可以 關掉程式//進入資料夾後 再用yarn 安裝速度不是一般的快然後 start 就可以了 進入 開發模式 複製程式碼

執行後看到即可

我們先看看專案結構

/src/index.jsimport { 
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.jsexport 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.jsimport { 
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 StoreStore如果你沒有在頁面中引入其他的Store，那麼預設使用是入口檔案的Store

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

來源：https://juejin.im/post/5bfe03956fb9a049ab0d4f99

Omi 入坑指南 The second floor 初步接觸

相關文章