weex使用手册_link管理

<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

> 区块引用
下一行

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

嵌套引用
> 一层
>> 两层

区块引用
下一行

普通的引用
下一行
1
2
3
4
虚线:
***
或者(实线)
---
1
2
[这是一个绝对路径的链接](https://hexo.io/zh-cn/docs/writing.html)
[这是一个相对路径的链接](/2017/08/07/hello-world/)
这是一个绝对路径的链接
 这是一个相对路径的链接
1
2
**双星加粗**
__双下划线加粗__
双星加粗
双下划线加粗
1
2
*星号斜体*
_下划线斜体_
星号斜体
下划线斜体
删除线
1
~~删除线~~
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 盒模型 %}
1
2
3
多行代码块使用三个`
单行代码使用一个`
console.log('hello world!')
1
2
3
4
5
6
7
8
9
10
11
12
13
方法1: - 和 = (任何数量等效)
一级标题
===
二级标题
---

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

一级标题

二级标题

方法2: #

一级

二级

三级

四级

五级

六级
jsfiddle
1
2
3
{% jsfiddle shorttag [tabs] [skin] [width] [height] %}

{% jsfiddle stardew/ffnm6Lsd/1/ %}  点击左上角fiddles
link
1
2
3
{% link text url [external] [title] %}

你好,我是{% link 百度 https://www.baidu.com/ 搜索  度娘 %}.
你好,我是百度 .
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
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

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 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 这三个组件。

文本样式 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/[email protected]"></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。

Weex 目前不支持 z-index 设置元素层级关系，但靠后的元素层级更高，因此，对于层级高的元素，可将其排列在后面。
如果定位元素超过容器边界，在 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。下表列出了所有合法的属性：
使用三阶贝塞尔函数中自定义transition变化过程，函数的参数值必须处于 0 到 1 之间。更多关于三次贝塞尔的信息请参阅 cubic-bezier 和 Bézier curve.
示例
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/[email protected]'
      },
      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/[email protected]',
        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 页面的样式。

全局样式规划：将整个页面分割成合适的模块。

flex 布局：排列和对齐页面模块。

定位盒子：定位并设置偏移量。

细节样式处理：增加特定的具体样式。

事件冒泡

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

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 。

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

你好,我是 百度 .

你好,我是百度 .