内容简介: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 就可以了 进入 开发模式 复制代码
运行后看到即可
我们先看看项目结构
/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
本次接触到这里结束,下次是摸索 事件的东西
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- TensorFlow XLA初步接触
- 测试自动化框架全接触
- Git之旅(4):第一次亲密接触
- 与Android热更新方案Amigo的再次接触
- 刚接触一个 Laravel 项目,你可以从这些地方入手
- 游戏制作之路(20)角色跳动之后怎么样检测接触地面
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。