<a>

Updated time: 14/06/2017

<a> 组件定义了指向某个页面的一个超链接. 此组件的作用和用法与HTML5中的 <a> 非常类似，区别在于 Weex 的 <a>
组件不能直接在里面添加文本（字符串），如果要展示文本，应该添加 <text> 组件。

子组件

此组件支持除了自己外的所有 Weex 组件作为子组件。

特性

• href {string}：定义了超链接的 URL。

样式

<a> 支持所有通用样式。

• 盒模型
• flexbox 布局
• position
• opacity
• background-color

查看 组件通用样式。

事件

<a> 支持所有通用事件。

• click
  注意：我们不能保证 click 事件和 href 跳转的执行顺序。建议不要使用 click 事件来处理 href 跳转前的逻辑处理。
• longpress
• appear
• disappear

查看 通用事件。

约束

• 不能直接在 <a> 中添加文本。

• 请不要为 <a> 添加 click 事件。我们不能确保 click 事件和 href 跳转的执行顺序。

示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

<template>
  <div class="wrapper">
    <a class="button" href="http://dotwe.org/raw/dist/3e0e40f9ddad79f98cd236753965ffd8.js">
      <text class="text">Jump</text>
    </a>
  </div>
</template>
<style scoped>
  .wrapper {
    flex-direction: column;
    justify-content: center;
  }
  .button {
    width: 450px;
    margin-top: 30px;
    margin-left: 150px;
    padding-top: 20px;
    padding-bottom: 20px;
    border-width: 2px;
    border-style: solid;
    border-color: #DDDDDD;
    background-color: #F5F5F5
  }
  .text {
    font-size: 60px;
    color: #666666;
    text-align: center;
  }
</style>

Try it

内建组件

Updated time: 14/06/2017

• <a>
• <indicator>
• <switch>
• <text>
• <textarea>
• <video>
• <web>
• <div>
• <image>
• <input>
• <list>
• <cell>
• <refresh> & <loading>
• <scroller>
• <slider>

语法使用手册

1. 列表:

1
2
3
4
5
6
7
8
9

有序号:
1. 第一点
2. 第二点
3. 第三点

无序号:
* 星号列表
+ 加号列表
- 减号列表

效果:

1. 第一点
2. 第二点
3. 第三点

• 星号列表

• 加号列表

• 减号列表

2. 块注释

1
2
3
4
5
6
7
8
9
10
11
12

> 区块引用
下一行

或者:
{% blockquote %}
普通的引用
下一行
{% endblockquote %}

嵌套引用
> 一层
>> 两层

效果:

区块引用
下一行

普通的引用
下一行

一层

两层

3. 分割线

1
2
3
4

虚线:
***
或者(实线)
---

效果:

虚线

实线

4. 链接

1
2

[这是一个绝对路径的链接](https://hexo.io/zh-cn/docs/writing.html)
[这是一个相对路径的链接](/2017/08/07/hello-world/)

这是一个绝对路径的链接
这是一个相对路径的链接

5. 加粗

1
2

**双星加粗**
__双下划线加粗__

双星加粗
双下划线加粗

6. 斜体

1
2

*星号斜体*
_下划线斜体_

星号斜体
下划线斜体

7. 删除线

   1

   ~~删除线~~

删除线

8. 图片

1
2
3
4
5

![图1. 我最爱的炮兵](/assert/img.jpg "Title")

{% img [class names] /path/to/image [width] [height] [title text [alt text]] %}

{% img [box-model] http://weex.apache.org/cn/references/images/css-boxmodel.png 377 340 weex 盒模型 %}

9. 代码

1
2
3

多行代码块使用三个`
单行代码使用一个`
console.log('hello world!')

10. 标题

1
2
3
4
5
6
7
8
9
10
11
12
13

方法1: - 和 = (任何数量等效)
一级标题
===
二级标题
---

方法2: #
# 一级 H1
## 二级 H2
### 三级 H3
#### 四级 H4
##### 五级 H5
###### 六级 H6

方法1: - 和 =

一级标题

二级标题

方法2: #

一级

二级

三级

四级

五级

六级

11. jsfiddle

    1 2 3

    {% jsfiddle shorttag [tabs] [skin] [width] [height] %} {% jsfiddle stardew/ffnm6Lsd/1/ %} 点击左上角fiddles

12. iframe

    1 2 3

    {% iframe url [width] [height] %} {% iframe https://www.baidu.com/ 500 300 %}

13. link

    1 2 3

    {% link text url [external] [title] %} 你好,我是{% link 百度 https://www.baidu.com/ 搜索 度娘 %}.

你好,我是百度.

14. 表格

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

左中右对齐


dog | bird | cat
--- | ---- | ---
foo | foo  | foo
bar | bar  | bar
baz | baz  | baz

dog | bird | cat
:---- | :---- | :----
foo | foo  | foo
bar | bar  | bar
baz | baz  | baz

dog | bird | cat
:----: | :----: | :----:
foo | foo  | foo
bar | bar  | bar
baz | baz  | baz

dog | bird | cat
----: | ----: | ----:
foo | foo  | foo
bar | bar  | bar
baz | baz  | baz

15. 原生代码

1
2
3
4
5
6
7
8

{% raw %}
content
{% endraw %}

或者直接
content

<span class="color-box" style="background:#FF00FF;color:#FF00FF"> yy </span> #FF00FF

yy #FF00FF

16. 转义

Path (英) v0.9+

Updated time: 14/06/2017

本文将介绍 Weex 中 uri(url) 的用法。包括使用图像、字体等资源，处理相对路径以及如何访问本地及打包的资源文件。

Schemes

• 本地资源

Weex SDK 提供 local scheme 来访问打包在应用程序中的资源，此 scheme 无法在 H5 环境下使用。目前，开发者可以在 image 组件和字体文件中使用本地资源。

• 在 iOS 中，Weex 会在 bundle resources 中查找。例如，image 组件的 src 属性为 local:///app_icon'， Weex 会加载 bundle resouce 中名为 app_icon
  的图像资源，而字体文件也以相同的方式工作。

• 在 Android 中，image 组件将从 drawable 资源文件夹加载，如 res/drawable-xxx。但加载字体文件是不同的，Android 框架无法从 res 加载字体文件，因此 SDK 将从
  asserts 文件夹加载它。

• HTTP/HTTPS

它的工作方式与 web 相同，Weex 一直支持这种方式。

• File

使用 file scheme 访问本地磁盘文件。这个方案有其局限性：你不应该在源页面中硬编码文件 url。因为不管它是否在不同的平台（iOS，Android）上运行，内容将在另一个设备上完全不同，这取决于具体的设备。

所以一种可行的方案是在运行时动态获取文件 url，你可以使用它来显示本地磁盘的图像，或者稍后上传它。

相对路径

与我们在 HTML 中的用法类似，Weex 以相同的方式处理相对路径。以/、.、..、// 开头的相对 URI 将相对于 bunle url 解析。

这意味着， 一个以 / 开头的路径将是相对于 JS Bundle 文件的根文件夹。. 则是当前文件夹，.. 是父文件夹。 // 则被解析为与 JS Bundle 相同的 scheme。

URI Adapter

以上所有是默认实现，开发者可以通过提供一个 URI Adapter 来扩展或覆盖默认实现。与其他 Adapter 相同，应在 Weex SDK 初始化之前设置自定义 Adapter。

手势

Updated time: 14/06/2017

注：该功能属于实验性功能

Weex 封装了原生的触摸事件以提供手势系统。使用手势类似于在 Weex 中使用事件，只需在节点上设置 on 特性来监听手势即可。

手势类型

目前，仅支持以下四种手势类型：

• Touch：当触摸到一个点，移动或从触摸面移开时触发 touch 手势。触摸手势很精准，它会返回所有详细的事件信息。所以，监听 touch 手势可能很慢，即使只移动一丁点也需要处理大量事件。有三种类型的 touch 手势：

  • touchstart 将在触摸到触摸面上时触发。
  • touchmove 将在触摸点在触摸面移动时被触发。
  • touchend 将在从触摸面离开时被触发。

• Pan：pan 手势也会返回触摸点在触摸面的移动信息，有点类似于 touch 手势。但是 pan 手势只会采样收集部分事件信息因此比 touch 事件要快得多，当然精准性差于 touch。pan
  也有三中类型的手势，这些手势的意义与 touch 完全一样：

  • panstart
  • panmove
  • panend
  • horizontalpan v0.10+：手势的 start/move/end 状态保存在 state 特性中。目前该手势在 Android 下会与 click 事件冲突。
  • verticalpan v0.10+：势的 start/move/end 状态保存在 state 特性中。目前该手势在 Android 下会与 click 事件冲突。
• Swipe：swipe 将会在用户在屏幕上滑动时触发，一次连续的滑动只会触发一次 swiper 手势。
• LongPress：LongPress 将会在触摸点连续保持 500 ms以上时触发。

touch 和 pan 非常接近，它们的特点可以总结成这样：

• Touch：完整信息，精准、很慢
• Pan：抽样信息，很快，不够精准

开发者可以根据自己的情况选择合适的手势。

属性

以下属性可以在手势的回调中使用：

• direction：仅在 swipe 手势中存在，返回滑动方向，返回值可能为 up, left, bottom, right。
• changedTouches：一个数组，包含了当前手势的触摸点的运动轨迹

changedTouches

changedTouches 是一个数组，其子元素中包含以下属性：

• identifier：触摸点的唯一标识符。
• pageX：触摸点相对于文档左侧边缘的 X 轴坐标。
• pageY：触摸点相对于文档顶部边缘的 Y 轴坐标。
• screenX：触摸点相对于屏幕左侧边缘的 X 轴坐标。
• screenY：触摸点相对于屏幕顶部边缘的 Y 轴坐标。

约束

目前，由于会触发大量事件冲突，Weex Android 还不支持在滚动类型的元素上监听手势，例如 scroller, list 和 webview 这三个组件。

颜色名称列表

Updated time: 14/06/2017

基础颜色关键词:

扩展颜色关键词:

文本样式 v0.5+

Updated time: 14/06/2017

文本类组件共享一些通用样式, 这类组件目前包括 <text> 和 <input>。

属性

• color {color}：文字颜色。

可选值为色值，支持 RGB（ rgb(255, 0, 0) ）；RGBA（ rgba(255, 0, 0, 0.5) ）；十六进制（ #ff0000 ）；精简写法的十六进制（ #f00 ）；色值关键字（red）。

• lines {number}: 指定文本行数。仅在 <text> 组件中支持。默认值是 0 代表不限制行数。

• font-size {number}：文字大小。

• font-style {string}：字体类别。可选值 normal | italic，默认为 normal。

• font-weight {string} v0.9+：字体粗细程度

  • 可选值: normal, bold, 100, 200, 300, 400, 500, 600, 700, 800, 900
  • normal 等同于 400, bold 等同于 700；
  • 默认值: normal；
  • iOS 支持 9 种 font-weight值；Android 仅支持 400 和 700, 其他值会设为 400 或 700
  • 类似 lighter, bolder 这样的值暂时不支持

• text-decoration {string}：字体装饰，可选值 none | underline | line-through，默认值为 none。

• text-align {string}：对齐方式。可选值 left | center | right，默认值为 left。目前暂不支持 justify, justify-all。

• font-family {string}：设置字体。

这个设置 不保证 在不同平台，设备间的一致性。如所选设置在平台上不可用，将会降级到平台默认字体。

• text-overflow {string}：设置内容超长时的省略样式。可选值 clip | ellipsis

其它参考

• 颜色关键字列表。

通用样式

Updated time: 23/08/2017

所有 Weex 组件都支持以下通用样式规则。

盒模型

Weex 盒模型基于 CSS 盒模型，每个 Weex 元素都可视作一个盒子。我们一般在讨论设计或布局时，会提到「盒模型」这个概念。

盒模型描述了一个元素所占用的空间。每一个盒子有四条边界：外边距边界 margin edge, 边框边界 border edge, 内边距边界 padding edge 与内容边界 content edge。这四层边界，形成一层层的盒子包裹起来，这就是盒模型大体上的含义。

注意：

Weex 对于长度值目前只支持像素值，不支持相对单位（em、rem）。

• width {length}：，默认值 0
• height {length}：，默认值 0

• padding {length}：内边距，内容和边框之间的距离。默认值 0

  可有如下写法：

  • padding-left {length}：，默认值 0
  • padding-right {length}：，默认值 0
  • padding-top {length}：，默认值 0
  • padding-bottom {length}：，默认值 0

• margin：

  外边距，元素和元素之间的空白距离。值类型为 length，默认值 0

  可有如下写法：

  • margin-left {length}：，默认值 0
  • margin-right {length}：，默认值 0
  • margin-top {length}：，默认值 0
  • margin-bottom {length}：，默认值 0

• border：

  设定边框，border 目前不支持类似这样 border: 1 solid #ff0000; 的组合写法。

  可有如下写法：

  • border-style：

    设定边框样式，值类型为 string，可选值为 solid | dashed | dotted，默认值 solid

    可有如下写法：

    • border-left-style {string}：可选值为 solid | dashed | dotted，默认值 solid
    • border-top-style {string}：可选值为 solid | dashed | dotted，默认值 solid
    • border-right-style {string}：可选值为 solid | dashed | dotted，默认值 solid
    • border-bottom-style {string}：可选值为 solid | dashed | dotted，默认值 solid

  • border-width {length}：

    设定边框宽度，非负值, 默认值 0

    可有如下写法：

    • border-left-width {length}：，非负值, 默认值 0
    • border-top-width {length}：，非负值, 默认值 0
    • border-right-width {length}：，非负值, 默认值 0
    • border-bottom-width {length}：，非负值, 默认值 0

  • border-color {color}：

    设定边框颜色，默认值 #000000

    可有如下写法：

    • border-left-color {color}：，默认值 #000000
    • border-top-color {color}：，默认值 #000000
    • border-right-color {color}：，默认值 #000000
    • border-bottom-color {color}：，默认值 #000000

  • border-radius {length}：

    设定圆角，默认值 0

    可有如下写法：

    • border-bottom-left-radius {length}：，非负值, 默认值 0
    • border-bottom-right-radius {length}：，非负值, 默认值 0
    • border-top-left-radius {length}：，非负值, 默认值 0
    • border-top-right-radius {length}：，非负值, 默认值 0

注意：

Weex 盒模型的 box-sizing 默认为 border-box，即盒子的宽高包含内容、内边距和边框的宽度，不包含外边距的宽度。

目前在 <image> 组件上尚无法只定义一个或几个角的 border-radius。比如你无法在这两个组件上使用 border-top-left-radius。该约束只对 iOS 生效，Android 并不受此限制。

尽管 overflow:hidden 在 Android 上是默认行为，但只有下列条件都满足时，一个父 view 才会去 clip 它的子 view。这个限制只对 Android 生效，iOS 不受影响。

父view是div, a, cell, refresh 或 loading。
系统版本是 Android 4.3 或更高。
系统版本不是 Andorid 7.0。
父 view 没有 background-image 属性或系统版本是 Android 5.0 或更高。

示例：

1
2
3
4
5

<template>
  <div>
    <image  style="width: 400px; height: 200px; margin-left: 20px;" src="https://g.alicdn.com/mtb/lab-zikuan/0.0.18/weex/weex_logo_blue@3x.png"></image>
  </div>
</template>

Flexbox

Weex 布局模型基于 CSS Flexbox，以便所有页面元素的排版能够一致可预测，同时页面布局能适应各种设备或者屏幕尺寸。

Flexbox 包含 flex 容器和 flex 成员项。如果一个 Weex 元素可以容纳其他元素，那么它就成为 flex 容器。需要注意的是，flexbox 的老版规范相较新版有些出入，比如是否能支持 wrapping。这些都描述在 W3C 的工作草案中了，你需要注意下新老版本之间的不同。另外，老版本只在安卓 4.4 版以下得到支持。

Flex 容器

在 Weex 中，Flexbox 是默认且唯一的布局模型，所以你不需要手动为元素添加 display: flex; 属性。

• flex-direction：

  定义了 flex 容器中 flex 成员项的排列方向。可选值为 row | column，默认值为 column

  • column：从上到下排列。
  • row：从左到右排列。

• justify-content：

  定义了 flex 容器中 flex 成员项在主轴方向上如何排列以处理空白部分。可选值为 flex-start | flex-end | center | space-between，默认值为 flex-start。

  flex-start：是默认值，所有的 flex 成员项都排列在容器的前部；
  flex-end：则意味着成员项排列在容器的后部；
  center：即中间对齐，成员项排列在容器中间、两边留白；
  space-between：表示两端对齐，空白均匀地填充到 flex 成员项之间。

  

• align-items：

  定义了 flex 容器中 flex 成员项在纵轴方向上如何排列以处理空白部分。可选值为 stretch | flex-start | center | flex-end，默认值为 stretch。

  • stretch 是默认值，即拉伸高度至 flex 容器的大小；
  • flex-start 则是上对齐，所有的成员项排列在容器顶部；
  • flex-end 是下对齐，所有的成员项排列在容器底部；
  • center 是中间对齐，所有成员项都垂直地居中显示。

Flex 成员项

flex 属性定义了 flex 成员项可以占用容器中剩余空间的大小。如果所有的成员项设置相同的值 flex: 1，它们将平均分配剩余空间. 如果一个成员项设置的值为 flex: 2，其它的成员项设置的值为 flex: 1，那么这个成员项所占用的剩余空间是其它成员项的2倍。

• flex {number}：值为 number 类型。

示例

一个简单的网格布局。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

<template>
  <div>
    <div v-for="(v, i) in list" class="row">
      <div v-for="(text, k) in v" class="item">
        <div>
          <text>{{text}}</text>
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped>
  .item{
    flex:1;
    justify-content: center;
    align-items:center;
    border-width:1;
  }
  .row{
    flex-direction: row;
    height:80px;
  }
</style>
<script>
  module.exports = {
    data: function () {
      return {
        list:[
          ['A', 'B', 'C'],
          ['D', 'E', 'F'],
          ['G', 'H', 'I']
        ]
      }
    }
  }
</script>

一个在相对于屏幕水平居中，全屏居中的 <div>。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<template>
  <div class="wrapper">
    <div class="box">
    </div>
  </div>
</template>
<style scoped>
  .wrapper {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #cccccc;
    justify-content: center;
    align-items: center;
  }
  .box {
    width: 200px;
    height: 200px;
    background-color: #fc0000;
  }
</style>

定位

Weex 支持 position 定位，用法与 CSS position 类似。为元素设置 position 后，可通过 top、right、bottom、left 四个属性设置元素坐标。

• position {string}`：

  设置定位类型。可选值为 relative | absolute | fixed | sticky，默认值为 relative。

  • relative 是默认值，指的是相对定位；
  • absolute 是绝对定位，以元素的容器作为参考系；
  • fixed 保证元素在页面窗口中的对应位置显示；
  • sticky 指的是仅当元素滚动到页面之外时，元素会固定在页面窗口的顶部。
• top {number}：距离上方的偏移量，默认为 0。
• bottom {number}：距离下方的偏移量，默认为 0。
• left {number}：距离左方的偏移量，默认为 0。
• right {number}：距离右方的偏移量，默认为 0。

注意：

1. Weex 目前不支持 z-index 设置元素层级关系，但靠后的元素层级更高，因此，对于层级高的元素，可将其排列在后面。

2. 如果定位元素超过容器边界，在 Android 下，超出部分将不可见，原因在于 Android 端元素 overflow 默认值为 hidden，但目前 Android 暂不支持设置 overflow: visible。

示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

<template scoped>
  <div class="wrapper">
    <div class="box box1">
    </div>
    <div class="box box2">
    </div>
    <div class="box box3">
    </div>
  </div>
</template>
<style>
  .wrapper {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #cccccc;
  }
  .box {
    width: 400px;
    height: 400px;
    position: absolute;
  }
  .box1 {
    top: 0;
    left: 0;
    background-color: #ff0000;
  }
  .box2 {
    top: 150px;
    left: 150px;
    background-color: #0055dd;
  }
  .box3 {
    top: 300px;
    left: 300px;
    background-color: #00ff49;
  }
</style>

transform

transform 属性向元素应用 2D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

目前支持的 transform 声明格式:

• translate( [, ]?)
• translateX( )
• translateY( )
• scale( )
• scaleX( )
• scaleY( )
• rotate( )
• transform-origin: number/percentage/keyword(top/left/right/bottom)

示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<template>
  <div class="wrapper">
    <div class="transform">
     <text class="title">Transformed element</text>
    </div>
  </div>
</template>
<style>
  .transform {
    align-items: center;
    transform: translate(150px,200px) rotate(20deg);
    transform-origin: 0 -250px;
    border-color:red;
    border-width:2px;
  }
  .title {font-size: 48px;}
</style>

transition v0.16.0+

现在您可以在CSS中使用transition属性来提升您应用的交互性与视觉感受，transition中包括布局动画，即LayoutAnimation，现在布局产生变化的同时也能使用transition带来的流畅动画。transition允许CSS的属性值在一定的时间区间内平滑地过渡。

参数

• transition-property:允许过渡动画的属性名，设置不同样式transition效果的键值对，默认值为空，表示不执行任何transition，下表列出了所有合法的参数属性：

• transition-duration:指定transition过渡的持续时间 (单位是毫秒)，默认值是 0，表示没有动画效果。

• transition-delay:指定请求transition过渡操作到执行transition过渡之间的时间间隔 (单位是毫秒或者秒)，默认值是 0，表示没有延迟，在请求后立即执行transition过渡。

• transition-timing-function:描述transition过渡执行的速度曲线，用于使transition过渡更为平滑。默认值是 ease。下表列出了所有合法的属性：

示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<style scoped>
    .panel {
        margin: 10px;
        top:10px;
        align-items: center;
        justify-content: center;
        border: solid;
        border-radius: 10px;

        transition-property: width,height,backgroundColor;
        transition-duration: 0.3s;
        transition-delay: 0s;
        transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1.0);
    }
</style>

伪类 v0.9.5+

Weex 支持四种伪类：active, focus, disabled, enabled

所有组件都支持 active, 但只有 input 组件和 textarea 组件支持 focus, enabled, disabled。

规则

• 同时生效的时候，优先级高覆盖优先级低

  • 例如：input:active:enabled 和 input:active 同时生效，前者覆盖后者

• 互联规则如下所示

  

示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

<template>
  <div class="wrapper">
    <image :src="logoUrl" class="logo"></image>
  </div>
</template>
<style scoped>
  .wrapper {
    align-items: center;
    margin-top: 120px;
  }
  .title {
    font-size: 48px;
  }
  .logo {
    width: 360px;
    height: 82px;
    background-color: red;
  }
  .logo:active {
    width: 180px;
    height: 82px;
    background-color: green;
  }
</style>
<script>
  export default {
    props: {
      logoUrl: {
        default: 'https://alibaba.github.io/weex/img/weex_logo_blue@3x.png'
      },
      target: {
        default: 'World'
      }
    },
    methods: {
      update (e) {
        this.target = 'Weex';
      }
    }
  };
</script>

Try it

线性渐变 v0.10+

Weex 支持线性渐变背景，具体介绍可参考 W3C description of the gradient。

所有组件均支持线性渐变。

使用

你可以通过 background-image 属性创建线性渐变。

1

background-image: linear-gradient(to top,#a80077,#66ff00);

目前暂不支持 radial-gradient（径向渐变）。

Weex 目前只支持两种颜色的渐变，渐变方向如下：

• to right
  从左向右渐变
• to left
  从右向左渐变
• to bottom
  从上到下渐变
• to top
  从下到上渐变
• to bottom right
  从左上角到右下角
• to top left
  从右下角到左上角

Note

background-image 优先级高于 background-color，这意味着同时设置 background-image 和 background-color，background-color 被覆盖。
不要使用 background 简写.

示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

<template>
  <scroller style="background-color: #3a3a3a">
    <div class="container1" style="background-image:linear-gradient(to right,#a80077,#66ff00);">
      <text class="direction">to right</text>
    </div>
    <div class="container1" style="background-image:linear-gradient(to left,#a80077,#66ff00);">
      <text class="direction">to left</text>
    </div>
    <div class="container1" style="background-image:linear-gradient(to bottom,#a80077,#66ff00);">
      <text class="direction">to bottom</text>
    </div>
    <div class="container1" style="background-image:linear-gradient(to top,#a80077,#66ff00);">
      <text class="direction">to top</text>
    </div>
    <div style="flex-direction: row;align-items: center;justify-content: center">
      <div class="container2" style="background-image:linear-gradient(to bottom right,#a80077,#66ff00);">
        <text class="direction">to bottom right</text>
      </div>
      <div class="container2" style="background-image:linear-gradient(to top left,#a80077,#66ff00);">
        <text class="direction">to top left</text>
      </div>
    </div>
  </scroller>
</template>
<style>
  .container1 {
    margin: 10px;
    width: 730px;
    height: 200px;
    align-items: center;
    justify-content: center;
    border: solid;
    border-radius: 10px;
  }
  .container2 {
    margin: 10px;
    width: 300px;
    height: 300px;
    align-items: center;
    justify-content: center;
    border: solid;
    border-radius: 10px;
  }
  .direction {
    font-size: 40px;
    color: white;
  }
</style>

阴影(box-shadow) v0.11+

Weex 支持阴影属性：active, focus, disabled, enabled inset(可选),offset-x,offset-y, blur-radius,color

注意

• box-shadow仅仅支持iOS

示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

<template>
  <div class="wrapper">
    <div style="width:400px; height:60px;background-color: #FFE4C4; box-shadow:20px  10px rgb(255, 69, 0);">
      <text class="title" style="text-align: center">Hello {{target}}</text>
    </div>
    <div style="margin-top: 80px;width:400px; height:60px;background-color: #FFE4C4; box-shadow: 20px  10px 5px rgba(255, 69, 0, 0.8);">
      <text class="title" style="text-align: center">Hello {{target}}</text>
    </div>
    <div style="margin-top: 80px;width:400px; height:60px;background-color: #FFE4C4; box-shadow:inset 20px  10px 5px rgba(255, 69, 0, 0.8);">
      <text class="title" style="text-align: center">Hello {{target}}</text>
    </div>
    <div style="margin-top: 80px;width:400px; height:60px;background-color: #FFE4C4; box-shadow:inset 20px  10px 5px rgb(255, 69, 0);">
      <text class="title" style="text-align: center">Hello {{target}}</text>
    </div>
    <div style="margin-top: 80px;width:400px; height:60px;background-color: #FFE4C4; box-shadow:20px  10px 5px black;">
      <text class="title" style="text-align: center">Hello {{target}}</text>
    </div>
    <div style="margin-top: 80px;width:400px; height:60px;background-color: #FFE4C4; box-shadow:20px  10px 5px #008B00;">
      <text class="title" style="text-align: center">Hello {{target}}</text>
    </div>
  </div>
</template>
<style scoped>
  .wrapper {align-items: center; margin-top: 120px;}
  .title {font-size: 48px;}
</style>
<script>
  module.exports = {
    data: function () {
      return {
        logoUrl: 'https://alibaba.github.io/weex/img/weex_logo_blue@3x.png',
        target: 'World'
      };
    }
  };
</script>

其他基本样式

• opacity {number}：取值范围为 [0, 1] 区间。默认值是 1，即完全不透明；0 是完全透明；0.5 是 50% 的透明度。
• background-color {color}：设定元素的背景色，可选值为色值，支持RGB（ rgb(255, 0, 0)` ）；RGBA（ rgba(255, 0, 0, 0.5) ）；十六进制（ #ff0000
  ）；精简写法的十六进制（ #f00 ）；色值关键字（red），默认值是 transparent 。
  注意： 色值的关键字列表。

上手样式

如果对于样式写法需要更多上手参考，可参考每个组件的文档中，都有常见的例子可供参考。

你可以按照以下步骤来规划 Weex 页面的样式。

1. 全局样式规划：将整个页面分割成合适的模块。
2. flex 布局：排列和对齐页面模块。
3. 定位盒子：定位并设置偏移量。
4. 细节样式处理：增加特定的具体样式。

事件冒泡

Updated time: 19/07/2017

Weex 2.0 实现了 W3C 标准的事件冒泡机制。

使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

<template>
  <div class="root" @click="rootClick" bubble="true">
    <text style="font-size: 40px;">{{rootText}}</text>
    <div class="outer" @click="parentClick">
      <div>
        <text style="font-size: 40px;">{{parentText}}</text>
      </div>
      <text class="inner" @click="click">{{innerText}}</text>
    </div>
  </div>
</template>
<script>
  module.exports = {
    data: {
      innerText: 'click me',
      parentText: '',
      rootText: ''
    },
    methods: {
      click: function(e) {
        this.innerText = 'inner bubble'
      },
      parentClick: function(e) {
        this.parentText = 'parent bubble'
      },
      rootClick: function(e) {
        this.rootText = 'root bubble'
      }
    }
  }
</script>
<style scoped>
  .inner {
    font-size: 40px;
    text-align: center;
    background-color: #7a9b1b;
    padding: 40px;
  }
  .outer {
    font-size: 40px;
    text-align: center;
    background-color: #9b7a1b;
    padding: 120px;
  }
  .root {
    font-size: 40px;
    text-align: center;
    background-color: #7a1b9b;
    padding: 80px;
  }
</style>

Try it

运行以上代码，用客户端打开，点击中间的元素，可以看到事件向上传播，依次触发。

注意

需要注意的是: 为了兼容之前的版本，Weex 默认不会开启事件冒泡机制。需要在根元素的属性上，添加 bubble="true" 来开启冒泡机制。否则，将不会向上传播事件，保持与之前版本的效果相同 。

stopPropagation

在事件处理函数中，可以使用 e.stopPropagation() 方法，来阻止本次事件向上的传递过程。注意，e.stopPropagation() 与 bubble="true" 不同，前者只会影响当前元素以及父元素的传播，不会影响子元素的传播；后者是为了版本兼容而增加的开关机制，会全局关闭或者开启冒泡机制，两者可以共同存在使用，如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

<template>
  <div class="root" @click="rootClick" bubble="true">
    <text style="font-size: 40px;">{{rootText}}</text>
    <div class="outer" @click="parentClick">
      <div>
        <text style="font-size: 40px;">{{parentText}}</text>
      </div>
      <text class="inner" @click="click">{{innerText}}</text>
    </div>
  </div>
</template>
<script>
  module.exports = {
    data: {
      innerText: 'click me',
      parentText: '',
      rootText: ''
    },
    methods: {
      click: function(e) {
        this.innerText = 'inner bubble'
      },
      parentClick: function(e) {
        this.parentText = 'parent bubble'
        e.stopPropagation()
      },
      rootClick: function(e) {
        this.rootText = 'root bubble'
        // e.stopPropagation()
      }
    }
  }
</script>
<style scoped>
  .inner {
    font-size: 40px;
    text-align: center;
    background-color: #7a9b1b;
    padding: 40px;
  }
  .outer {
    font-size: 40px;
    text-align: center;
    background-color: #9b7a1b;
    padding: 120px;
  }
  .root {
    font-size: 40px;
    text-align: center;
    background-color: #7a1b9b;
    padding: 80px;
  }
</style>

Try it

运行以上代码，用客户端打开，点击中间的元素，可以看到事件向上传播到父元素被终止，不再继续往根元素传播。

JS Framework APIs

Updated time: 14/06/2017

BroadcastChannel v0.9+

BroadcastChannel API 是 Weex 实例间通信的解决方案。

参考

• BroadcastChannel specification.
• MessageEvent specification

API

• postMessage(message): 通过消息通道发送特定消息给其他 BroadcastChannel 对象。
• close: 关闭 BroadcastChannel 对象，以便垃圾回收。
• onmessage: Event 处理函数, 当 BroadcastChannel 对象接收到消息时触发。

使用

1
2
3
4
5
6
7

const Stack = new BroadcastChannel('Avengers')
Stack.onmessage = function (event) {
  console.log(event.data) // in this case, it's "Hulk Smash !!!"
}
// in another instance
const Hulk = new BroadcastChannel('Avengers')
Hulk.postMessage("Hulk Smash !!!")

运行以上代码，Stack 可以从 Hulk 接收消息。

注意

需要注意的是: message 如果是一个对象，该对象不会深拷贝。

参考以下例子

1
2
3
4
5
6
7
8
9
10

const a = new BroadcastChannel('app')
const b = new BroadcastChannel('app')
const message = {
  lists: ['A', 'B']
}
a.onmessage = function (event) {
  // in this case, event.data is a reference of message
  console.assert(event.data === message)
}
b.postMessage(message)

在这个例子中，event.data 全等于 message。

与深拷贝相比，这种方式能够提高效率并减少内存消耗。但是，不建议开发者在使用时缓存或修改事件对象 (所有类型的事件处理程序都应该有此限制)。