在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>
'''
注意
- Weex 对于长度值目前只支持像素值，不支持相对单位（em、rem）。
- Weex 盒模型的 box-sizing 默认为 border-box，即盒子的宽高包含内容、内边距和边框的宽度，不包含外边距的宽度。
- 目前在 <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 四个属性设置元素坐标。
- position {string},设置定位类型。可选值为 relative | absolute | fixed | sticky，默认值为 relative。
- relative 是默认值，指的是相对定位；
- absolute 是绝对定位，以元素的容器作为参考系；
- fixed 保证元素在页面窗口中的对应位置显示；
- sticky 指的是仅当元素滚动到页面之外时，元素会固定在页面窗口的顶部。
- top {number}：距离上方的偏移量，默认为 0。
- bottom {number}：距离下方的偏移量，默认为 0。
- left {number}：距离左方的偏移量，默认为 0。
- right {number}：距离右方的偏移量，默认为 0。
网友评论