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。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,311评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,339评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,671评论 0 342
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,252评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,253评论 5 371
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,031评论 1 285
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,340评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,973评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,466评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,937评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,039评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,701评论 4 323
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,254评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,259评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,485评论 1 262
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,497评论 2 354
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,786评论 2 345

推荐阅读更多精彩内容

  • 各种纯css图标 CSS3可以实现很多漂亮的图形,我收集了32种图形,在下面列出。直接用CSS3画出这些图形,要比...
    剑残阅读 9,474评论 0 8
  • 在学习weex的过程中看到了常用标签相关的内容,为了自己以后能够快速查阅特整理出此文档。 a 简介组件定义了指向某...
    TyroneTang阅读 4,644评论 1 3
  • 《必然》是凯文·凯利“观察·反思·展望”三部曲的收官之作,中文版先于英文版出版,前两部《失控》和《科技想要什么》在...
    弯仔小馒头阅读 1,478评论 0 51
  • 哈哈,一直想演一出自己的舞台劇想好了腳本、道具、角色、燈光⋯⋯卻一直拿不到場地卻不願意識到縱然不捨還是放下吧 會來...
    Pope怯懦懦地阅读 173评论 0 1
  • 美国2016年GDP增长仅1.6%,如扣除第三产业(服务、金融)占比达80%以上的增长,占比不到20%实体经济增长...
    穆忠泽阅读 334评论 2 0