Weex

        Weex 是使用流行的 Web 开发体验来开发高性能原生应用的框架。Weex 的目标就是使用开发者基于一份代码,编写出可以运行在 iOS,Android 和 Web 上的应用,并最大化地提高开发效率和简化测试、构建、发布流程。

DOM(Document Object Model),即文档对象模型,是 HTML 和 XML 文档的编程接口,是 Web 中的概念。Weex 的运行环境以原生应用为主,在 Android 和 iOS 环境中渲染出来的是原生的组件,不是 DOM Element。原生环境中不支持 Web API,没有 Element 、Event 、File 等对象,详细列表可以参考 Web APIs on MDN。不支持选中元素如 document.getElementById 、 document.querySelector 等;当然也不支持基于 DOM API 的程序库(如 jQuery)。

BOM(Browser Object Model),即浏览器对象模型,是浏览器环境为 javascript 提供的接口。Weex 在原生端并不基于浏览器运行,不支持浏览器提供的 BOM 接口。Weex 中并未提供浏览器中的 window 和 screen 对象,不支持使用全局变量。没有 document 对象,没有 history 、location 、navigator 对象

内置组件

1、<a> 组件用于实现页面间的跳转。(不可以在标签内部直接添加文本,需要使用 <text>标签来显示文本。)

2、<div> 是通用容器。(不要在 <div> 中直接添加文本,而要使用 <text> 组件。在 Weex 中,<div> 不可滚动。要控制 <div> 的层级,建议不要超过14层,否则会很影响页面性能。)

3、<image> 用于在界面中显示单个图片。

4、<list> 组件是提供垂直列表功能的核心组件,拥有平滑的滚动和高效的内存管理,非常适合用于长列表的展示。最简单的使用方法是在 <list> 标签内使用一组由简单数组循环生成的 <cell> 标签填充。(不允许相同方向的 <list> 或者 <scroller> 互相嵌套,换句话说就是嵌套的 <list> / <scroller> 必须是不同的方向。<list> 需要显式的设置其宽高,可使用 position: absolute; 定位或 width、height 设置其宽高值)

5、Cell 必须以一级子组件的形式存在于 list recycler waterfall 中。(Cell 支持添加任意类型的组件作为自己的子组件,但是请不要再内部添加滚动容器了。不要指定 <cell> 的 flex 值。Cell 的宽度是由它的父容器决定的,你也不需要指定它的高度。Cell 的排版的位置是由父容器控制的,所以一般不要为其指定 margin 样式。)

6、<loading> 为容器提供上拉加载功能。(<loading> 是 <scroller>、<list>、<waterfall> 的子组件,只能在被它们包含时才能被正确渲染。)

7、<refresh> 为容器提供下拉刷新功能。(<refresh> 是 <scroller>、<list>、<waterfall> 的子组件,只能在被它们包含时才能被正确渲染。)

8、<recycle-list> 是一个新的支持竖向或横向的列表容器,具有回收和复用的能力,可以大幅优化内存占用和渲染性能。(<recycle-list> 只能使用 <cell-slot> 作为其直接子节点,使用其他节点无效。)

9、<scroller> 是一个容纳子组件进行横向或竖向滚动的容器组件。如果你的组件需要进行滚动,可以将 <scroller> 当作根元素或者父元素使用,否则页面无法滚动( <list> 组件除外, <list> 默认可以滚动,不允许相同方向的 <list> 或者 <scroller> 互相嵌套,换句话说就是嵌套的 <list> / <scroller> 必须是不同的方向。<scroller> 需要显式的设置其宽高,可使用 position: absolute; 定位或 width、height 设置其宽高值。)

10、Slider 组件用于在一个页面中展示多个图片,在前端这种效果被称为轮播图。默认的轮播间隔为3秒。

11、indicator 只能在 slider 中使用。

12、textarea> 与 <input>组件类似,可用于接受用户输入数据。<textarea> 支持多行文本输入。 <textarea> 支持 <input> 支持的所有的属性、样式和事件。除了支持 input 支持的所有属性外,textarea 还支持 rows 属性,用于指定输入的行数。

13、Weex 内置的 <input> 组件用来创建接收用户输入字符的输入组件。 <input> 组件的工作方式因 type 属性的值而异,比如 text, password,url,email,tel 等。(此组件不支持 click 事件。请监听 input 或 change 来代替 click 事件。)

14、<waterfall> 组件是提供瀑布流布局的核心组件。瀑布流,又称瀑布流式布局是比较流行的一种页面布局,视觉表现为参差不齐的多栏布局。随着页面滚动条向下滚动,这种布局还可以不断加载数据块并附加至当前尾部。(<waterfall> 只支持 Android 和 iOS,不支持 Web)

15、Video 组件用于在页面中嵌入视频内容。

16、<web> 用于在 WEEX 页面中显示由 src 属性指定的网页内容。

内置模块

1、animation 模块可以用来在组件上执行动画。JS-Animation可以对组件执行一系列简单的变换 (位置、大小、旋转角度、背景颜色和不透明度)。

2、clipboard用于获取、设置剪切板内容,目前只支持字符串类型

3、dom用于对 weex 页面里的组件节点进行一部分特定操作。(scrollToElement 将 list 的某个子节点滚动到当前视口,getComponentRect 获取某个组件的 bounding rect 布局信息,addRule 添加 font-face rule,getLayoutDirection0.20.0+ 获取某个组件的布局方向(rtl、lrt、inherit))

4、globalEvent 用于监听持久性事件,例如定位信息,陀螺仪等的变化。全局事件是需要额外 APIs 处理的次要 API

5、meta 模块可用于声明单个页面的元信息,通常是一些页面级别的配置,如容器的显示宽度 (viewport) 等。默认情况下,应用无需修改此配置。

6、modal 模块提供了以下展示消息框的 API:toast、alert、confirm 和 prompt。(toast() 会在一个小浮层里展示关于某个操作的简单反馈。例如,在邮件发送前离开邮件编辑界面,可以触发一个“草稿已保存”的 toast,告知用户以后可以继续编辑。toast 会在显示一段时间之后自动消失。alert()警告框经常用于确保用户可以得到某些信息。当警告框出现后,用户需要点击确定按钮才能继续进行操作。confirm()确认框用于使用户可以验证或者接受某些信息。当确认框出现后,用户需要点击确定或者取消按钮才能继续进行操作。prompt()提示框经常用于提示用户在进入页面前输入某个值。当提示框出现后,用户需要输入某个值,然后点击确认或取消按钮才能继续操作。)

7、navigator通过前进或者回退按钮来切换页面,允许我们指定在切换页面的时候是否应用动画效果

8、picker用于数据选择,日期选择,时间选择。

9、stream 模块提供了基本的网络请求能力,例如 GET 请求、POST 请求等,用于在组件的生命周期内与服务端进行交互。

10、webview 模块提供了一系列的 <web>组件操作接口,例如 goBack、goForward 和 reload,一般与 <web> 组件一起使用,在 Weex 页面内渲染 web 页面。

11、webSockets 是一种创建持久性的连接,并进行双向数据传输的 HTTP 通信协议。Weex 提供了 webSockets 模块方便用户在 H5/iOS/Android 环境下与服务端创建 webSockets 链接进行通信。

12、deviceInfo模块可用来获取设备的基本信息并进行设置,如fullScreenHeight(全面屏高度)。适配全面屏时建议使用该模块。

13、console-log用于强制将 Weex 日志输出到控制台

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,193评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,306评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,130评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,110评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,118评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,085评论 1 295
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,007评论 3 417
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,844评论 0 273
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,283评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,508评论 2 332
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,667评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,395评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,985评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,630评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,797评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,653评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,553评论 2 352

推荐阅读更多精彩内容