weex监听android返回键,weex使用手册

Native DOM APIsUpdated time: 14/06/2017

Weex 在 JS 引擎中,为每个页面都提供了一套 Native DOM APIs,这套接口和 HTML DOM APIs 非常接近,利用这套接口我们可以通过 JavaScript 控制 native 的渲染逻辑。而且 Weex 上层的 Vue 2.0 也是基于这套接口进行适配的。

绝大多数情况下 JS 框架会把 Native DOM APIs 都封装好,开发者不需要直接对 Native DOM 进行操作。

Document 类,整个页面文档。

Node 类,结点的基础类。

Element 类,元素结点,继承自 Node,单个视图单元。

Comment 类,注释结点,继承自 Node,无实际意义,通常用作占位符。

每个 Weex 页面都有一个 weex.document 对象,该对象就是一个 Document 类的实例,也是下面所有接口调用的起点。

接下来详细介绍它们的用法:

Document 类

每个 Document 实例在创建的时候都会自动拥有一个 documentElement 属性,表示文档结点。该文档结点可以拥有一个 body,即文档的主体结点。

注意事项: 文档的主体结点只接受

、 或 三种类型的元素结点。

构造函数

new Document(id: string, url: string?)

成员方法

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

创建一个特定类型 tagName 的 Element 实例,即一个元素结点。props 可以包含 attr 对象和 style 对象。比如 createBody('div', {style: {backgroundColor:

'#ffffff'}})。

createComment(text: string): Comment

创建一个 Comment 的实例,即一个注释结点,并设置一段文本描述。

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

创建文档主体结点,并自动挂载到 documentElement 下。

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

触发一个特定类型的事件,并附带一个事件对象 e。当该事件在产生过程中修改了 DOM 的特性或样式,则第四个参数用来描述这些改变,参数格式和上面 createElement 方法的格式相同。

destroy()

销毁当前文档。一旦销毁之后文档将不会再工作。

只读成员变量

**id: string

每个 Document 实例都有一个唯一的 id。这同时也是每个 Weex 页面唯一拥有的 id。

URL: string?

如果当前 Weex 页面有 JS bundle URL 的话,这里则会返回 这个 URL。

body: Element

文档的主体结点,概念类似 HTML DOM 里的 document.body。

documentElement: Element

文档的对应结点,概念类似 HTML DOM 里的 document.documentElement。

body 和 documentElement 的关系是:documentElement 是 body 的父结点。

getRef(id): Node

根据结点 id 获取结点。

Node 类

构造函数

new Node()

成员

destroy()

只读成员变量或方法

ref: string

每个 Node 实例都有各自的在整个 Document 实例中唯一的 ref 值。

nextSibling: Node?

previousSibling: Node?

parentNode: Node?

上述三个接口和 HTML DOM 的定义吻合。

children: Node[]

该结点拥有的所有子结点的数组。

pureChildren: Node[]

该结点拥有的所有子元素的数组。和 children 的区别是,pureChildren 只包含了 Element 实例而不包含 Comment 实例。

Element 类 继承自 Node

构造函数

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

创建一个特定类型 type 的元素结点,参数 props 可以包含 attr 对象或 style 对象。

DOM 树操作

appendChild(node: Node)

insertBefore(node: Node, before: Node?)

上述两个接口类似 HTML DOM。

insertAfter(node: Node, after: Node?)

在一个子结点之前插入新结点 after。

removeChild(node: Node, preserved: boolean?)

删除子结点 node,参数 preserved 表示立刻从内存中删除还是暂时保留。

clear()

清除所有的子结点。

DOM 属性本身操作

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

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

上述两个接口中,当 silent 为真的时候,结点仅更新自己,不会传递命令给客户端渲染层。该参数用来处理用户事件在发生时已经改变结点相关属性的情况下,不会在 Native DOM 也改变之后重复发送命令给客户端。

addEvent(type: string, handler: Function)

removeEvent(type: string)

fireEvent(type: string, e: any)

绑定事件、解绑定事件、触发事件。

特定组件类型的组件方法

特殊的:不同组件类型可以拥有自己特有的方法,比如 组件支持 refresh 方法,详见各组件的描述,在此情况下,我们会产生特定组件类型的 class,比如 WebElement,它继承自 Element。

如:

WebElement 继承自 Element

表示在 Weex 页面中嵌入一个 webview

refresh(): 刷新当前 webview

只读成员变量或方法

ref, nextSibling, previousSibling, parentNode

继承自 Node。

nodeType: number

永远是数字 1。

type: string

和构造函数里的 type 一致。

attr: Object

当前结点的所有特性的键值对。推荐通过 setAttr() 方法进行修改,而不要直接修改这里的对象。

style: Object

当前结点的所有样式的键值对。推荐通过 setStyle() 方法进行修改,而不要直接修改这里的对象。

event: Object

当前结点的所有事件绑定。每个事件类型对应一个事件句柄方法。推荐通过 addEvent() / removeEvent() 方法进行修改,而不要直接修改这里的对象。

toJSON(): Object

返回描述该元素结点的一段 JSON 对象,形如:{ref: string, type: string, attr: Object, style: Object, event: Array(string), children:

Array}。

Comment 类 继承自 Node

构造函数

new Comment(value: string)

只读成员变量或方法

**`ref, nextSibling, previousSibling, parentNode

继承自 Node。

nodeType: number

永远是数字 8。

type: string

永远是字符串 'comment'

value: string

和构造函数里的 value 一致。

toJSON(): Object

返回描述该注释结点的一段 JSON 对象,形如:。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/566396.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

lean软件Android有吗,leanchat-android

LeanChat Android 客户端简介LeanChat 是 LeanCloud 实时通信 组件的 Demo,通过该应用你可以学习和了解 LeanCloud 实时通信功能。效果截图Leanchat 项目构成如果你从 github clone 速度很慢,可以从 这里 下载项目源码压缩包。部署创建应用注册并登录 Le…

华为系统10.0是鸿蒙吗,暂时忘记鸿蒙!华为EMUI 10.0发布时间确认:这才是主角...

原标题:暂时忘记鸿蒙!华为EMUI 10.0发布时间确认:这才是主角华为鸿蒙系统由于顶着“自研”的光环,自曝光以来便受到科技圈的追捧,虽并未推出但已经有“众星捧月”的迹象。媒体追逐鸿蒙系统自然是为了热度和流量&#x…

a4纸在html的像素,打印常识:A4纸张在显示器上应该要多少像素?

A4纸的尺寸是210mm*297mm,也就是21.0cm*29.7cm,而1英寸2.54cm,如果屏幕DPI分辨率为72像素/英寸,换算一下:相当于1cm可呈现 (72px/2.54cm) 28.34px下面是一些常用分辨率下A4纸在屏幕上的像素尺寸:分辨率是7…

用HTML编写教学评估系统,在线教学质量评价系统的设计与实现

《在线教学质量评价系统的设计与实现.doc》由会员分享,可免费在线阅读全文,更多与《在线教学质量评价系统的设计与实现》相关文档资源请在帮帮文库(www.woc88.com)数亿文档库存里搜索。1、MWEAVERMA入门与提高[M]清华大学出版社,[]李国涛SQLS…

微型计算机方面的论文,微型计算机论文.doc

计算机指令系统与中国CPU的发展本学期我们大致了解了一些微型计算机的基本原理,包括微机处理器、微型计算机和微型计算机系统的定义、微处理器的发展概况,以及微机处理器的分类。其中我们比较全面的学习了指令系统一 计算机指令系统1 计算机指令系统的发…

辩论计算机未来不能取代书本的问题,电脑不能取代书本辩论会材料.doc

辩论会材料NO.1资料收集:沉默可以 注意文明:要多点开花,引用一些名言等,千万不要胡搅蛮缠,揪住一个小点不放,这会给评委不好的印象!资料准备一定要充分,最好直接反驳对方,不行就坚持…

计算机通信事业单位专业知识点,事业单位计算机专业知识招考大纲

事业单位计算机专业知识招考大纲对照复习事半功倍(一)计算机类计算机科学技术基础第一章计算机基础知识一、计算机的特点、分类及其应用二、信息编码与数据表示;数制及其转换;算术运算和逻辑运算三、计算机硬件系统的组成及其基本工作原理四、计算机软件…

自学计算机软件及应用,[计算机软件及应用]JavaEE自学材料.pdf

[计算机软件及应用]JavaEE自学材料目录隔行变色表格——jQuery 实现 2隔行变色表格——javascript 实现4提示框HelloWorld——jQuery 实现5改变文字背景的颜色——jQuery 实现 6jQuery-添加元素7jQuery-页面信息隐藏及显示 10jQuery-导航菜单 11jQuery-全选&反选 13利用ser…

wether.html5.qq.com,人教版英语九年级全一册Unit 1单元测试卷及参考答案解析(含听力...

UNIT 1 达标测试卷时间:120分钟 满分:150分第一卷 听力部分(30分)一、关键词语选择(共5小题;每小题1分,满分5分)1. A. note B.nose C. notice2. A. repair B. report C.repeat3. A. widely B. quickly C.wisely4.A. screen B.s…

世界上覆盖范围最广的计算机网络是 ( ),世界上覆盖范围最广的计算机网络是()。...

摘要:部会天翼自动格将俱乐取消员资客户,世界上覆下列情况哪些出现时。围最包单包工总承责任单位对分安全程的承担位和分包生产。计算机网包分政基作业工分建筑础设程施为(劳务和市)和房屋分包施工。...部会天翼自动格将俱乐取消员资客户,世界…

vb.net提取html网址,如何提取网页代码中指定内容

怎么提取网页代码中指定内容?某数据库网页结构如下:html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">2015年9月6日 17:18农业药械: 瞬时流量:175.30 m3/h 累计…

CAM是利用计算机,利用DroidCam将手机摄像头打造成计算机摄像头

利用DroidCam将手机摄像头打造成电脑摄像头1.目的现在许多同学的电脑上没有摄像头,但是随着智能手机的普及,大多数同学都有带摄像头的手机。而智能手机的摄像头比电脑的usb摄像头的效果好很多。那可不可以把手机摄像头用在电脑上来网络聊天呢&#xff0c…

电大计算机应用技术基础视频,电大形成性测评-计算机应用技术基础01

电大形成性测评-计算机应用技术基础01 (7页)本资源提供全文预览,点击全文预览即可全文预览,如果喜欢文档就下载吧,查找使用更方便哦!15.9 积分01任务-在线作业试卷总分:100 测试时间:-- 单项选择题 …

计算机在科技英语翻译中起的作用,浅谈科技英语翻译中英语词语的正确理解与表达...

作者:苏雷江摘要:在科技英语翻译中,如何正确的理解与表达英语词语对整个翻译过程起着至关重要的作用。本篇文章从词义的选择和词义的引申两个方面来具体阐述如何做到正确的理解与表达科技英语翻译中的英语词语。关键词:科技英语翻…

北大计算机博进高校,他是北大第一位博士,留校任教却连做三件“傻事”,博导都没评上...

自北大1898年创办至今,早已度过了风雨百年,一路发展、创造辉煌,令人慨叹不已。身为我国名校的门面招牌之一,北大底蕴深厚、实力强劲,校园环境优美、师资力量雄厚,不知是多少学子可望而不可及的理想学府。在…

计算机组成原理AB什么运算,计算机组成原理运算器实验.doc

文档介绍:计算机组成原理运算器实验————————————————————————————————作者:————————————————————————————————日期: 成绩: 计算机原理实验室实验报告课程:计算机组成原理姓名:袁通专业:软件工程学…

奥格斯堡大学计算机系,奥格斯堡大学七大科系设置简介

奥格斯堡大学七大科系设置简介学校名称:德国奥格斯堡大学 Universit?t Augsburg所在位置:德国,Augsburg创建时间:1970年学历:本科 研究生 语言学校性质: 奥格斯堡大学是位于德国境内拜仁州奥格斯堡市的一所…

软件测试中语句覆盖的优点,软件测试中各种覆盖法的优缺点

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼语句覆盖 程序中每个语句至少都能被执行一次。判定覆盖 程序中的每一个分支至少都通过一次(每个判定都取过真值假值)也叫分支覆盖。条件覆盖 使得判定中的每个条件获得各种可能的结果(真值假值)。判定/条件覆盖 分支中每个条件取到…

计算机打印过的文件在哪找到,请问如何在电脑里查找已经打印过的文件

满意答案苏mmkk2013.07.06采纳率:45% 等级:11已帮助:20600人如果你的系统是XP 的话查找电脑名称:在桌面“我的电脑”上点右键。第二个选项卡上有“计算机名”上面显示的有完整的计算机名,如果想更改的话&#xff0c…