WeeX框架

WeeX 是一个开平台高性能的ui框架,类似Web语法通过单个代码库构建ios,Android和Web UI(可以Vue混用进行配置)

功能

适配不同尺寸的屏幕,页面降级,资源路径和扩展各种功能

Weex和Web的平台差异

Weex环境中没有DOM(不支持DOM操作)Weex在Android和ios环境渲染出来的是原生组件,不是DOM Element
有限的事件类型 Weex中的事件是由原生组件捕获并触发的
没有 window screen 对象,不支持使用全局变量,可以使用WXEnvironment
没有document 对象 在Android和ios环境中并没有这个对象,也不支持与其相关的DOM操作
没有 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差不多)

  1. <image style='width:500px;height:400px' src='图片路径'>

提供垂直列表功能的核心组件,拥有平滑的滚动和高效的内存管理,非常适合用于长列表的展示
不允许相同方向的或者互相嵌套
需要显示的设置其宽高,可使用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. <loading>
  2. <text>loading</text>
  3. </loading>

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

  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的子组件使用。不能再包含其它子组件
Snipaste_2021-08-25_10-14-08.png
没有任何子元素(无扩展属性)
样式:
item-color 指示点默认颜色(未选中态)
item-selected-color 指示点选中颜色
item-size 指示点半径