Create a gist now

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Weex Vanilla demo

不用 Vue 语法怎么写 Weex


Weex Native DOM API 介绍


关于我

  • ChenYong(题叶)
  • 架构机动组
  • FP 语言

Weex 是什么

一套构建高性能, 可扩展的原生应用跨平台开发方案.

用 Web 技术在 Native 平台写轻量的快速迭代的页面. 官方推荐使用 Vue 语法.


需要 Vue 比更多的框架

  • 平台需要生态多样性
  • 为了调试等等的方便, 需要有更底层的 API
  • React 用户数量也很多

Weex 怎样工作

架构图 http://weex.apache.org/images/flow.png

事件 http://wx4.sinaimg.cn/large/62752320ly1fbnuhuh6zmj20zk0qodko.jpg


JS Framework

// { "framework": "Vue" }

// { "framework": "Rax" }

// { "framework": "Legacy" }

// { "framework": "Vanilla" }

默认 Legacy 模式


Framework

打包在 Weex SDK 当中的框架:

  • Vue
  • Rax(React)
  • Legacy(.we)
  • Vanilla

Vanilla Framework

没有框架, 类似 jQuery

https://github.com/alibaba/weex/blob/dev/examples/vanilla/index.js

https://github.com/yong-chen04/minimal-weex


Native DOM API

http://weex.apache.org/cn/references/native-dom-api.html


Document 方法:

createElement(tagName: string, props: Object?): Element

createComment(text: string): Comment

createBody(tagName: string, props: Object?): Element

fireEvent(el: Element, type: string, e: Object?, domChanges: Object?)

destroy()

Element

new Element(type: string, props: Object?)

appendChild(node: Node)

insertBefore(node: Node, before: Node?)

insertAfter(node: Node, after: Node?)

removeChild(node: Node, preserved: boolean?)
clear()

DOM 属性

setAttr(key: string, value: string, silent: boolean?)

setStyle(key: string, value: string, silent: boolean?)

addEvent(type: string, handler: Function)

removeEvent(type: string)

fireEvent(type: string, e: any)

全局变量

  • document
  • weex(没有更新)

由 Weex runtime 进行初始化.


DOM 操作~


Todolist 示例

https://segmentfault.com/a/1190000008726905


展望

  • 类库的开发和调试, 最小重现案例
  • 对于特殊的操作, 可以通过 DOM 操作来自己完成
  • 必要的情况下自行开发框架

Thanks.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment