样式问题

  1. box-shadow 仅支持 ios
  2. 只支持 px 写法
  3. 在 weex 中，flexbox 是唯一的布局模式，不支持内联布局 display: inline/float
  4. weex 不支持 z-index 设置元素层级关系，但靠后的元素层级更高
  5. border 不支持缩写，必须分开写 border-top-color: #ccc;border-top-style: solid;border-top-width: 1px;
  6. 背景色必须写完整，如background:#000需要写成background-color:#000
  7. image元素必须设置宽高样式
  8. 动态替换 class，只能使用数组表达式
  9. 如果定位元素超过容器边界，在 Android 下，超出部分将不可见，原因在于在 Android 端元素 overflow 默认值为 hidden，且 overflow 没有其他值
  10. 不支持背景图 可是使用定位来解决
  11. Android 上处理圆角，必须在外层div中设置 border-radius
  12. 不支持负边距 margin-left: -10px; —> transform: translateX(-10px);
  13. 伪类选择器只支持active focus disabled enabled
  14. weex 支持 position 定位 :relative | absolute |fixed |sticky ，默认值是relative
  15. 支持线性渐变：linea-gradient，不支持径向渐变：radius-gradient
  16. 子元素的样式不会继承自父元素，比如 color 和 font-size 等样式作用在 标签的上层是无效的
  17. 文字必须放在 标签中，不可以直接放在标签中
  18. 标签，有个 lines 样式，用于限制文本行数，并出现省略号，但是 lines:1 必须放在 css 里面，不能放在作为属性放在 标签中，类似这样 ，这样不生效
  19. 标签，必须带结束符，网页端浏览无法聚焦没关系，因为模拟器不支持；必须编辑 标签的高度，否则聚焦光标会不显示。
  20. css样式不支持嵌套写法
  21. weex不支持 span 标签 如果想要展示一段富文本 比如“艺狐全球拍卖” 想让‘拍卖’两个字加红标粗 可以使用weex的内置组件里面可以写入span标签
  22. 不允许继承

    click

    和 组件目前不支持 click 事件，请使用 change 或 input 事件来代替

平台判断问题

Weex环境变量中，weex.config.env和WXEnvironment其实是一个东西，它们都有platform字段，官网上说：
platform: Current running platform, could be “Android”, “iOS” or “Web”.
platform表示当前运行的平台，可选值有”Android”, “iOS” or “Web”。
这里需要注意，官网此处是有错误的，真实的可选值是：”android”, “iOS” or “Web”。 “android”是要小写的
如果怕因为字符大小写判断错误，可以这么写：platform.toLowerCase() === ‘ios’

动画

weex不支持动画属性
比较一下CSS标准的动画属性，Weex不支持如下动画属性：

  • animation-direction
  • animation-iteration-count
  • animation-name
  • animation-play-state
  • 关键帧keyframes

支持的动画属性也只有：

  • width
  • height
  • backgroundColor
  • opacity
  • transformOrigin
  • transform

（动画的属性非常弱，支持的属性十分有限）

Weex和Web的平台差异

Weex环境中没有DOM

（不支持DOM操作）Weex在Android和ios环境渲染出来的是原生组件，不是DOM Element

有限的事件类型

Weex中的事件是由原生组件捕获并触发的

没有 window screen 对象

不支持使用全局变量，可以使用WXEnvironment

没有document 对象

在Android和ios环境中并没有这个对象，也不支持与其相关的DOM操作
（不能用jQuery）

没有 history location navigator 对象

基础语法标签的使用（局限于只能使用特定的子组件）

组件用于实现页面间的跳转
TIP ： 不可以在标签内部直接添加文本，需要使用标签来显示文本
属性：herf
TIP： 当click事件的回调函数和herf跳转前的逻辑处理

  1. <a herf='http://baidu.com'>
  2.     <text>主会场</text>
  3. </a>

是通用容器
不要在
中直接添加文本，在组件
在Weex中,
不可滚动
控制
的层级，建议不要超过14层，否则会很影响页面性能
子组件
支持各种类型的子元素
Weex内置的组件，用来将文本按照指定的样式渲染出来
子组件
不支持子组件
weex - 图1在界面中显示单个图片（img差不多）
提供垂直列表功能的核心组件，拥有平滑的滚动和高效的内存管理，非常适合用于长列表的展示
不允许相同方向的或者互相嵌套
需要显示的设置其宽高，可使用postion:absolute;或width,height设置其宽高值
子组件
定义列表中的子列表项（类似于HTML中的ul li）可进行高效的内存 回收以达到更好的性能
到它到达屏幕顶部时，吸附在屏幕顶部
用于给列表添加下拉刷新的功能(是,,的子组件，只能在被它们包含时才能被正确渲染)

  1. <scroller>
  2.    <refresh>
  3.       <text>refreshing</text>
  4.    </refresh>
  5.    <div v-for='num in lists'>
  6.       <text>{{num}}</text>
  7.    </div>
  8. </scroller>

是一种新的支持竖向和横向的列表容器，具有回收和复用的能力，可以大幅优化内存占用和渲染性能
子组件
只能使用作为其直接子节点，使用其他节点无效

  1. <recycle-list v-for='(item,i) in longList' switch='type'>
  2.   <cell-slot case='A'>
  3.       <text> A {{i}}</text>
  4.   </cell-slot> 
  5.     <cell-slot case='B'>
  6.       <text> B {{i}}</text>
  7.   </cell-slot> 
  8. </recycle-list>

是一个容纳子组件进行横向或竖向滚动的容器组件。可以将当作根元素或者父元素使用，否则页面无法滚动（组件除外，默认可以滚动）
支持任意类型的Weex组件作为其子组件
轮播图，可以放置一个indicator组件用于显示轮播指示器。只能作为slider的子组件使用。不能再包含其它子组件
没有任何子元素（无扩展属性）
样式：
item-color 指示点默认颜色(未选中态)
item-selected-color 指示点选中颜色
item-size 指示点半径