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

栏目: CSS · 发布时间: 6年前

内容简介:Omi 已经出了 5.0 版本,由于新手,我们还是使用官方提供的 Cli 去安装,安装完毕后你会发现还是Omi 4.0的那个版本在PS:由于Omi 使用了Shadow Dom 所以你使用小程序开发的时候会有种很熟悉的感觉,一说小程序就有种想揍打微信团队的冲动,做的微信开发者工具简称要人命,体验不是一般的差。

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 就可以了 进入 开发模式
 
复制代码
Omi 入坑指南 The second floor 初步接触

运行后看到即可

我们先看看项目结构

Omi 入坑指南 The second floor 初步接触
/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 入坑指南 The second floor 初步接触

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

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

我们稍微修改一下

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

可以看到效果还是一模一样

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

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

这东西看到就会想起小程序中的各种大坑,(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

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

看来是只能用AMD模式了

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

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

这个方法相当于React中的this.state,只不过他这了一个静态方法来实现

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

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


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Algorithms on Strings, Trees and Sequences

Algorithms on Strings, Trees and Sequences

Dan Gusfield / Cambridge University Press / 1997-5-28 / USD 99.99

String algorithms are a traditional area of study in computer science. In recent years their importance has grown dramatically with the huge increase of electronically stored text and of molecular seq......一起来看看 《Algorithms on Strings, Trees and Sequences》 这本书的介绍吧!

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具