在iOS中,weex可以类似理解为“放大版”的JSBrdige,weex代码的三部分构成:template(模版)、style(样式)、script(脚本),本章重点了解weex的三要素与通用样式。
weex三要素
在使用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(如下图)。这四层边界,形成一层层的盒子包裹起来,这就是盒模型大体上的含义。
所有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。