Weex 代码由 <template>
、<style>
、<script>
三个部分构成。
<template>
:必须的,使用 HTML 语法描述页面结构,内容由多个标签组成,不同的标签代表不同的组件。<style>
:可选的,使用 CSS 语法描述页面的具体展现形式。<script>
:可选的,使用 JavaScript 描述页面中的数据和页面的行为,Weex 中的数据定义也在 <script>
中进行。<template> <!-- (required) the structure of page --> </template> <style> /* (optional) stylesheet */ </style> <script> /* (optional) the definition of data, methods and life-circle */ </script>
这是一个典型的 M-V-VM 架构:通过 ViewModel 把 Model 和 View 建立更直接有效的关系,ViewModel 的实现以 <script>
的内容为主。
<template>
模板<template>
中的标签组织类似如下代码:
<template> <div> <image style="width: 200; height: 200;" src="https://gtms02.alicdn.com/tps/i2/TB1QHKjMXXXXXadXVXX20ySQVXX-512-512.png"></image> <text>Alibaba Weex Team</text> </div> </template>
<div>
标签是一个根节点,里面包含描述图片的 <image>
标签和描述文字的 <text>
标签。
和 HTML 类似,不同标签代表的组件有各自的特性 (attribute),部分组件可以拥有自己的子组件。
延伸阅读:内置组件列表
根节点:每个 Weex 页面最顶层的节点,我们称为根节点。下面是目前我们支持的三种根节点:
<div>
:普通根节点,有确定的尺寸,不可滚动。<scroller>
:可滚动根节点,适用于需要全页滚动的场景。<list>
:列表根节点,适用于其中包含重复的子元素的列表场景。目前 Weex 仅支持以上三种根节点。
注意事项:<template>
只支持一个根节点,多个根节点将无法被 Weex 正常的识别和处理。
<style>
样式我们可以把 Weex 中的样式语法理解为 CSS 的一个子集,两者有一些细微的区别
第一种写法是,你能在标签上,直接通过内联 style
特性编写样式. 第二种写法,通过标签中的 class
特性与 <style>
标签中定义的样式建立对应关系,让 <style>
标签中定义的样式作用于特定标签之上。以下是例子:
<template> <div> <text style="font-size: 64;">Alibaba</text> <text class="large">Weex Team</text> </div> </template> <style> .large {font-size: 64;} </style>
上面的两个 <text>
组件都被设置了同样的字体大小,但分别用了两种不同的方式。
延伸阅读:Weex 通用样式
注意:Weex 遵循 HTML 特性 命名规范,所以特性命名时请不要使用陀峰格式 (CamelCase),采用以“-”分割的 long-name 形式。
<script>
脚本<script>
描述页面中的数据和页面的行为,代码遵循 JavaScript (ES5) 语法 (目前 iOS 端和浏览器端取决于内置 JavaScript 引擎对 ES 版本的支持情况,安卓端能够完整支持 ES5,但不原生支持 ES6,需要用类似 babel 的工具对源代码进行转换)。下面是一个例子:
<template> <div> <text>The time is {{datetime}}</text> <text>{{title}}</text> <text>{{getTitle()}}</text> </div> </template> <script> module.exports = { data: { title: 'Alibaba', datetime: null }, methods: { getTitle: function () { return 'Weex Team' } }, created: function() { this.datetime = new Date().toLocaleString() } } </script>
上面 <script>
标签中定义了被赋值给 module.exports
的对象,这个对象其实就是一个 ViewModel 选项,让三个 <text>
标签显示当前时间、“Alibaba”字样和“Weex Team”字样。
选项中的 data
用于存储数据,这些数据可以通过数据绑定机制和 <template>
标签中的内容绑定起来。当这些数据变更时,被绑定的模板内容也会自动更新。这些数据在 <script>
中的各个方法中可以通过类似 this.x
的方式进行读写操作。
而选项中的 methods
里则列出了当前上下文可执行的各种函数,比如 getTitle()
。
选项中最后的 created
是生命周期函数,会在数据初始化之后、界面被绑定数据并渲染之前执行。类似的生命周期函数还有 init
、ready
等,在这个例子中,datetime
会在界面渲染之前被更新为当前的时间。
延伸阅读:ViewModel 选项
接下来,我们来详细介绍数据绑定的相关知识。