Omi初探

官网 https://github.com/Tencent/omi

新概念

1. 深入浅出 Shadow Dom
2. HTM - JSX ？(why take react so close, but not vue)
3. css3transform（我们反应快，我们经过了海量项目洗礼，虽然还是css3，但我们是鹅厂的，so）
4. Native 方案（看，h5、小程序、原生app我全包了）
5. css变量
6. 我们用了requestIdleCallback
7. ...

Let's Coding

$ npm i omi-cli -g   # 全局安装脚手架
$ omi init my-app    # 初始化项目
$ cd my-app 
$ npm start          # 不用npm install

自动启动3000端口

项目目录结构
package.json：很多babel配置项、eslint配置项，webpack用的4.x，呃，等...
官网给出的目录说明

├─ config
├─ public
├─ scripts
├─ src
│  ├─ assets
│  ├─ elements    //存放所有 custom elements
│  ├─ store       //存放所有页面的 store
│  ├─ admin.js    //入口文件，会 build 成  admin.html
│  └─ index.js    //入口文件，会 build 成  index.html

嗯，没有路由，但有两个入口文件，看来它是一个多入口框架？
我讨厌过年我讨厌过年我讨厌过年，凭什么凭什么为什么
在index.js下面新添加一个usercenter.js文件，在elements中添加usercenter文件夹 -> index.js

## usercenter.js
import { render } from 'omi'
import './elements/usercenter'
import store from './store/admin-store'

render(<hello-element />, '#root', store)



## elements/usercenter/index.js
import { define, WeElement } from 'omi'

define('hello-element', class extends WeElement {
  render(props, data) {
    return (
      <div class="hello">
        <h1>个人中心 - {this.store.name}</h1>
        <div> これは嫌な世界です.</div>
      </div>
    )
  }
})

重启服务后（怎么还要手动重启），访问http://localhost:3000/usercenter.html渲染出了个人中心

组件间传值

Cli 自动创建的项目脚手架是基于单页的 create-react-app 改造成多页的（能不能改为成vue呢，还要熟悉react语法）

import { define, render, WeElement } from 'omi'

define('hello', function(props) {
  onClick = evt => {
    // trigger CustomEvent
    this.fire('say', { name: 'dntzhang', age: 12 })  ## 触发父组件事件
    evt.stopPropagation()
  }

  render(props) {
    return (
      <div onClick={this.onClick}>
        Hello {props.msg} {props.propFromParent}   ## 父组件传来的值
        <div>Click Me!</div>
      </div>
    )
  }
})


define('my-app', class extends WeElement {
  data = { abc: 'abc', passToChild: 123 }

  // define CustomEvent Handler
  onSay = evt => {
    // get evt data by evt.detail
    this.data.abc = ' by ' + evt.detail.name + ', he is ' + evt.detail.age
    this.data.passToChild = 1234
    this.update()
  }

  handleChange = e => {
    this.data.val = e.target.value
  }
  handleSubmit = e => {
    this.data.items.push({id: this.data.items.length + 1, text: this.data.val})
    this.update()    ## 不加这句页面不刷新渲染
  }

  render(data) {
    return (
      <div>
        Hello {data.abc}
        <hello-demo
          onSay={this.onSay}                  ## 由子组件触发的事件
          propFromParent={data.passToChild}   ## 传递给子组件
          msg="WeElement "                    ## 传递给子组件
        />


        <h3> -- TODO -- </h3>
        <ul>
          {data.items.map(item => (      ## map
            <li key={item.id}>{item.text}</li>
          ))}
        </ul>
        <input
          id="new-todo"
          onChange={this.handleChange}
          value={this.data.text}
        />
        <button onClick={this.handleSubmit}>Add NO.{this.data.items.length + 1}</button>
         
      </div>
    )
  }
})

再来看OMI的store

## store/admin-store.js
export default {
  name: 'I am admin page',
  rename(name) {
    this.name = name
  }
}

## index.js
render(<hello-element />, '#root', store)   //  根部注入，其后的子组件可this.store调用

由于omi是多入口，所以store中的状态不可在页面间共用

Omi Observe

你可以为那些不需要 store 的自定义元素使用 observe 创建响应式视图：
install、installed、uninstall、beforeUpdate、updated、beforeRender、receiveProps

define("my-app", class extends WeElement {
  static observe = true  ## 启用 Omi Observe

  install() {
    this.data.name = "omi"
  }
  ...

这是什么意思，不启用生命周期钩子就不能用？启用了就不能用store？？？

调试工具

Omi 使用了 Web Components 和 Shadow-DOM，所以可以用Chrome 自带调试工具开发，不用再安装插件

我在自己的电脑上没有找到官方给的图上的面板（Omi.js），只在Properties中看到了组件的data、store、props，但由于属性太多，很混乱，不知道是不是我Chrome版本问题（71.0.3578.98 正式版本 64位）