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

CSS 小程式開發 · 發表 2018-11-28 11:15:28

摘要： Omi 已經出了 5.0 版本，由於新手，我們還是使用官方提供的 Cli 去安裝，安裝完畢後你會發現還是Omi 4.0的那個版本 $: cnpm install -g omi-cli //安裝全域性 omi-cli $: omi -v //打印出來的是 3.0.25 版本複製程式碼 ...

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.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

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

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

您可能也會喜歡…