WEEX三要素与样式

在iOS中，weex可以类似理解为“放大版”的JSBrdige，weex代码的三部分构成：template(模版)、style(样式)、script(脚本)，本章重点了解weex的三要素与通用样式。

weex三要素

foovue.jpg

在使用weex的init创建weex项目时，会默认生成foo.vue文件，从上图看出，主要有template、style、script三部分，weex主要是基于MVVM。

1. template

主要是组件的引用，大体页面布局

style

主要是组件的CSS样式引用

script

主要就是js的调用，weex的声明周期在此实现 ''' <script> module.exports = { data: {}, methods: {},

init: function () {
  console.log('在初始化内部变量，并且添加了事件功能后被触发');
},
created: function () {
  console.log('完成数据绑定之后，模板编译之前被触发');
},
ready: function () {
  console.log('模板已经编译并且生成了 Virtual DOM 之后被触发');
},
destroyed: function () {
  console.log('在页面被销毁时调用');
}

} </script> ''' 其中：

• data属于绑定的数据，init、created、ready是Weex的生命周期方法。
• methods中存放用户定义的一些js事件。
• computed中主要是对绑定数据data部分进行预处理。
• init内一般用于初始化一些内部变量，绑定一些自定义事件，这时还没有数据绑定，没有创建vdom，所以不能通过this获取到data和methods，也不能获取vdom的节点
• created 完成了数据绑定 ，但还未开始编译模板，可以通过this获取data和methods，但不能获取vdom的节点
• ready表示渲染完成 ，从子组件往上触发
• destroyed 组件销毁，比如页面跳转，从子组件开始往上触发

weex样式

(盒模型)[https://www.w3.org/TR/css3-box/]

软件开发，在讨论设计或布局时，会提到「盒模型」这个概念，盒模型描述了一个元素所占用的空间。每一个盒子有四条边界：外边距边界 margin edge, 边框边界 border edge, 内边距边界 padding edge 与内容边界 content edge（如下图）。这四层边界，形成一层层的盒子包裹起来，这就是盒模型大体上的含义。

css盒模型.png

所有Weex 组件都支持盒模型，而Weex盒模型是基于CSS盒模型，即CSS Flexbox，每个 Weex 元素都可视作一个盒子。

Weex盒模型

• width {length}：总宽度
• height {length}：总高度
• padding {length}：内边距，内容和边框之间的距离，具体为padding-left {length}，padding-right {length}，padding-top {length}，padding-bottom {length}
• margin {length}：外边距，元素和元素之间的空白距离，具体为margin-left {length}，margin-right {length}，margin-top {length}，margin-bottom {length}
• border {length}：设定边框，具体有border-style（border-left-style {string}、border-top-style {string}、border-right-style {string}、border-bottom-style {string}），border-width（border-left-width {length}、border-top-width {length}、border-right-width {length}、border-bottom-width {length}）、border-color （border-left-color {color}、border-top-color {color}、border-right-color {color}、border-bottom-color {color}），border-radius（border-bottom-left-radius {length}、border-bottom-right-radius {length}、border-top-left-radius {length}、border-top-right-radius {length}）

示例

''' <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> '''

注意

1. Weex 对于长度值目前只支持像素值，不支持相对单位（em、rem）。
2. Weex 盒模型的 box-sizing 默认为 border-box，即盒子的宽高包含内容、内边距和边框的宽度，不包含外边距的宽度。
3. 目前在 <image> 组件上尚无法只定义一个或几个角的 border-radius。比如你无法在这两个组件上使用 border-top-left-radius。该约束只对 iOS 生效，Android 并不受此限制。

(Flexbox)[https://www.w3.org/TR/css-flexbox-1/]

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

Flex 容器

如果一个 Weex 元素可以容纳其他元素，那么它就成为 flex 容器。

Flex 成员项

position 定位

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

1. position {string},设置定位类型。可选值为 relative | absolute | fixed | sticky，默认值为 relative。

• relative 是默认值，指的是相对定位；
• absolute 是绝对定位，以元素的容器作为参考系；
• fixed 保证元素在页面窗口中的对应位置显示；
• sticky 指的是仅当元素滚动到页面之外时，元素会固定在页面窗口的顶部。

1. top {number}：距离上方的偏移量，默认为 0。
2. bottom {number}：距离下方的偏移量，默认为 0。
3. left {number}：距离左方的偏移量，默认为 0。
4. right {number}：距离右方的偏移量，默认为 0。