公共属性

  • 1.id

    1. <textid="top">Top</text>

    id是weex标签(即控件)在template下的唯一标识符,可以通过id来引用对应的weex标签。

    1. var top=this.$el('top')//通过this.el('id')找到标签
    2. dom.scrollToElement(top)//滚动到指定的标签
  • 2.style

    1. style="width:200;height:200"

    通过style可以为weex标签增加内联样式。

  • 3.class

    1. class="button"

    为weex标签增加类别,同一类别的标签可以设置公用的样式。

  • 4.repeat

    1. repeat="{{items}}"

    以{{items}}作为循环项,迭代生成当前的weex标签,那么这就是列表控件么?详细介绍 详细介绍

  • 5.if

    1. <textif="{{true}}">Hello</text>//显示
    2. <textif="{{false}}">Hello</text>//不显示

    true显示当前控件,会在DOM中渲染;false不显示,并从DOM中移除。简写if=”true”。

  • 6.append

    1. append="tree/node"

    append属性决定标签的渲染流程是哪种。详细介绍

  • 7.onXXX

    1. onclick="gotoNext"
    2. onappear="showAnim"

    为weex标签注册事件处理函数。详细介绍

    公共样式

  • 1.盒子模型(Box Model)

    7.5 公共属性、公共样式、公共事件 - 图1

    weex的盒子模型是基于CSS盒模型,每个标签从内到外依次是内容(content)、内边距(padding)、边框(border)、外边距(margin)。但是标签的大小在计算的时候是不包含margin的。其实对于Android原生也是这样计算控件的大小的。

  • 2.Flexbox

    1. weex的布局模型也是基于CSSFlexbox,Flexbox包含flex容器和flex元素。
    2. Flex容器
    3. - flex-direction:row|column 定义容器中元素的排列方向,默认是row(从左往右,从上往下),会自动换行,在这点android原生是没有这样的效果的。
    4. - justify-content:flex-start|flex-end|center|space-between 定义了容器中元素在水平方向如何排列。flex-start 是默认值,即左对齐,所有的 flex 成员项都排列在容器的前部;flex-end则意味着右对齐,成员项排列在容器的后部;center 即中间对齐,成员项排列在容器中间、两边留白;space-between 表示两端对齐,空白均匀地填充到 flex 成员项之间。
    5. - align-items:stretch|flex-start|center|flex-end定义了容器中元素在垂直方向如何排列。stretch 是默认值,即拉伸高度至 flex 容器的大小;flex-start 则是上对齐,所有的成员项排列在容器顶部;flex-end是下对齐,所有的成员项排列在容器底部;center 是中间对齐,所有成员项都垂直地居中显示。
    6. ![](http://static.bookstack.cn/projects/weex-learning/android/androidImgs/005_2.jpg)
    7. ![](http://static.bookstack.cn/projects/weex-learning/android/androidImgs/005_3.jpg)
    8. Flex元素
    9. flex:<number> flex 属性定义了 flex 成员项在容器中占据的尺寸。如果所有成员项都设置为 flex:1,那么它们就有相等的宽度(水平排列)或者相等的高度(垂直排列)。如果一共有两个成员项,其中一个 flex:1,另一个 flex:2,那么第一个将占据1/3的空间,另一个占据2/3。如果所有 flex 成员项都不设置 flex 属性,它们将根据容器的 justify-content 属性来决定如何排列。
  • 3.定位

    1. -position:relative|absolute|fixed|sticky relative 是默认值,指的是相对定位;absolute 是绝对定位,以元素的容器作为参考系;fixed保证元素在页面窗口中的对应位置显示;sticky 指的是仅当元素滚动到页面之外时,元素会固定在页面窗口的顶部。
    2. -top:<number>距离上方的偏移量,默认0
    3. -bottom:<number>距离下方的偏移量,默认0
    4. -left:<number>距离左方的偏移量,默认0
    5. -right:<number>距离右方的偏移量,默认0
  • 4.opacity: 透明度

    1. 取值范围为[0,1]。默认值为1,完全不透明;0完全透明;0.550%透明。
  • 5.background-color 背景颜色

    1. 默认为transparent

    -6.取值类型

    1. -长度:在数字后跟px为单位,px可以省略。
    2. -颜色:RGB(rgb(255,0,0));RGBA(rgba(255,0,0,0.5));十六进制写法(#ffffff);精简十六进制写法(#f00);色值关键字。
    3. [色值](https://github.com/alibaba/weex/blob/doc/doc/references/color-names.md)

    对于资源文件android这边是统一管理,比如颜色会专门建立一个colors.xml,需要使用的时候直接去引用即可,这样做的好处是可以共用很多,不用在每个地方都去填写具体的色值。

    1. ![](http://static.bookstack.cn/projects/weex-learning/android/androidImgs/005_4.jpg)

    参考

公共事件

  • 1.click事件

    1. <textonClick="smile">click me</text>

    某个标签被绑定click事件,事件会在用户点击改标签时触发

  • 2.appear事件

    某个标签被绑定了appear事件,该标签在滚入可见窗口时候触发

  • 3.disappear事件

    某个标签被绑定了disappear事件,该标签在滚出可见窗口时触发。

    详细介绍

延伸阅读

  • 1.Android适配方案 传送门

    通过安卓适配方案,可以了解几组概念:

    1. 屏幕尺寸、屏幕分辨率、屏幕像素密度
    2. pxdpdipsp
    3. mdpihdpixhdpixxhdpi
  • 2.无论是公共属性、公共样式、公用事件,都可以在Android原生找到对应的影子,安卓上的大多数效果也可以在IOS上找到对应的影子。甚至可以说安卓在借鉴IOS的一些好的东西,IOS也在借鉴安卓的一些好的东西。所以我们应该把重点放在理解原理上。

测试

  • 1.把三个image标签并排显示在一行,测试中间image的if属性,看看第三个iamge的位置。