不用 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)
全局变量
documentweex(没有更新)
由 Weex runtime 进行初始化.
DOM 操作~
Todolist 示例
https://segmentfault.com/a/1190000008726905
展望
- 类库的开发和调试, 最小重现案例
- 对于特殊的操作, 可以通过 DOM 操作来自己完成
- 必要的情况下自行开发框架