老司机读书笔记——Weex学习笔记

Weex学习笔记

这篇文章你将看到以下内容：

• 一个iOS开发视角学习Weex需要学习的一些知识点

---

Weex整体上与Vue语法大概一直，基本用法由阿里进行二次封装。以下主要介绍Weex的一些内置组件。

---

与HTML中行为基本一直，作为超链接进行页面跳转。

  Jump
 

---

与HTML中行为基本一直，作为包装其他组件最基本的容器。

关于

的层级嵌套不宜过深，官方建议控制在10层以内，避免造成性能影响。

---

图片标签

注意：在HTML中通常使用的 标签在 Weex 中不支持，你应该使用 。

注意： Weex 没有内置的图片下载器，因为相关的下载、缓存、解码机制非常复杂，一些开源的工具如 SDWebImage 已经处理得很好， 所以在使用 之前，请在 native 侧先接入相应的 adapter 或者 handler。

参见: Android adapter 和 iOS handler。

属性

属性名	类型	值	默认值
placeholder	String	{URL/Base64}	-
resize	String	cover/contain/stretch	stretch
src	String	{URL/Base64}	必填
style	String	width:500px;height:500px	必填

save

需要设备赋予权限，v0.16.0版本后支持。

参数：

• callback：{Function} 在图片被写入到本地文件或相册后的回调，回调参数：
  • result：{Object} 回调结果对象，属性列表：
    • success：{Boolean} 标记图片是否已写入完成。
    • errorDesc：{String} 如果图像没有成功写入，该字符串包含了详细的错误描述。

函数调用示例：

const $image = this.$refs.poster
$image.save(result => {
  if (result.success) {
    // Do something to hanlde success
  } else {
    console.log(result.errorDesc)
    // Do something to hanlde failure
  }
})

load

支持获取图片加载完成回调，通过v-on监听事件。

示例代码：

export default {
  methods: {
    onImageLoad (event) {
      if (event.success) {
        // Do something to hanlde success
      }
    }
  }
}

使用说明

• 在使用 之前，请在 native 侧先接入相应的 adapter 或者 handler。
• 必须指定样式中的宽度和高度。
• 不支持内嵌子组件。

---

指示器，暂时无用，后期补充资料。

---

与HTML中行为进本一致。以多种形式接收用户输入。

此组件不支持 click 事件。请监听 input 或 change 来代替 click 事件。

次组件不支持子组件。

特性

• type {string}：控件的类型，默认值是 。type 值可以是 text，date，datetime，email， password，tel，time，url，number 。每个 type 值都符合 W3C 标准。
• value {string}：组件的默认内容。
• placeholder {string}：提示用户可以输入什么。 提示文本不能有回车或换行。
• disabled {boolean}：布尔类型的数据，表示是否支持输入。通常 click 事件在 disabled 控件上是失效的。
• autofocus {boolean}：布尔类型的数据，表示是否在页面加载时控件自动获得输入焦点。
• maxlength {nubmer}：v0.7一个数值类型的值，表示输入的最大长度。
• return-key-type {string}：v0.11键盘返回键的类型,支持 defalut;go;next;search;send,done。
• singleline {boolean}：控制内容是否只允许单行
• max-length {number}：控制输入内容的最大长度
• lines：控制输入内容的最大行数
• max：控制当type属性为date时选择日期的最大时间，格式为yyyy-MM-dd
• min：控制当type属性为date时选择日期的最小时间，格式为yyyy-MM-dd

事件

• input: 输入字符的值更改。

  事件中 event 对象属性：

  • value: 触发事件的组件；
  • timestamp: 事件发生时的时间戳,仅支持Android。

• change: 当用户输入完成时触发。通常在 blur 事件之后。

  事件中 event 对象属性：

  • value: 触发事件的组件；
  • timestamp: 事件发生时的时间戳,仅支持Android。

• focus: 组件获得输入焦点。

  事件中 event 对象属性：

  • timestamp: 事件发生时的时间戳,仅支持Android。

• blur: 组件失去输入焦点。

  事件中 event 对象属性：

  • timestamp: 事件发生时的时间戳,仅支持Android。

• return: 键盘点击返回键。

  事件中 event 对象属性：

  • returnKeyType: 事件发生时的返回键类型。
  • value: 触发事件的组件的文本；

• 通用事件

  不支持 click 事件。 请监听 input 或 change 事件代替。

  支持以下通用事件：

  • longpress
  • appear
  • disappear

示例代码

---

行为与TableView(RecycleView)一致，但不具有复用机制，展示纵向列表。

子组件

特性

• loadmoreoffset
• offset-accuracy

事件

• loadmore
• scroll

扩展

• scrollToElement(node, options)
• resetLoadmore()

示例代码：

---

作为 、、 的子组件存在，本身可以包含所有Weex组件作为其子组件。

特性

• keep-scroll-position

由于 本身是一个容器，其布局由 进行管理，你不能给 设定flex值。 的宽度等于父组件 的宽度，并且 高度自适应，指定 margin 样式也不起作用。

---

与行为相似，配合实现复用机制。

  
    - A {{i}} -
  
  
    - B {{i}} -
  


const longList = [
  { type: 'A' },
  { type: 'B' },
  { type: 'B' },
  { type: 'A' },
  { type: 'B' }
]

通过for循环确定数据源，通过switch选择cell样式。

具体还在开发之中，目前建议使用，资料后续补齐。

---

提供上拉加载功能。

示例代码：

---

提供下拉刷新功能，用法上类似。

特性

• display
  • show
    如果 中包含 ，则将其显示并开始默认动画。
  • hide
    收起 refresh view，如果 中包含 ，则将其视图隐藏。

display 的设置必须成对出现，即设置 display="show",必须有对应的 display="hide"。

事件

• refresh
• pullingdown

示例代码：

---

行为上与ScrollView相似。

特性

• show-scrollbar

• scroll-direction
  可选为 horizontal 或者 vertical，默认值为 vertical 。定义滚动的方向。

  scroll-direction定义了 scroller 的滚动方向，样式表属性 flex-direction 定义了 scroller 的布局方向，两个方向必须一致。
  scroll-direction 的默认值是 vertical, flex-direction 的默认值是 row。
  当需要一个水平方向的 scroller 时，使用 scroll-direction:horizontal 和 flex-direction: row。
  当需要一个竖直方向的 scroller 时，使用 scroll-direction:vertical 和 flex-direction: column。由于这两个值均是默认值，当需要一个竖直方向的 scroller 时，这两个值可以不设置。

• loadmoreoffset

• offset-accuracy

事件及扩展

与相同。

示例代码：

---

轮播图。

用于显示轮播图指示器效果，必须充当 组件的子组件使用。

特性

• auto-play
• interval
• infinite//循环播放，可选值为 true/false，默认的是 true。
• offset-x-accuracy//控制onscroll事件触发的频率，默认值为10，表示两次onscroll事件之间Slider Page至少滚动了10px。注意，将该值设置为较小的数值会提高滚动事件采样的精度，但同时也会降低页面的性能。
• show-indicators
• index
• scrollable
• keep-index

事件

• change

示例代码：

---

是 Weex 内置的组件，用来将文本按照指定的样式渲染出来。 只能包含文本值，你可以使用 {{}} 标记插入变量值作为文本内容。

注意： 里直接写文本头尾空白会被过滤，如果需要保留头尾空白，暂时只能通过数据绑定写头尾空格。

注意： 不支持子组件。

特性

• lines
• 文本样式
  • color
  • font-size
  • font-style
  • font-weight
  • text-align
  • text-decoration
  • text-overflow
  • line-height

---

</h3> <p><textarea> 是 Weex 内置的一个组件，用于用户交互，接受用户输入数据。 可以认为是允许多行的 <input>。</p> <blockquote> <p>textarea 组件不支持子组件。</p> </blockquote> <h4>特性</h4> <ul> <li>text所有特性</li> <li>rows</li> </ul> <h4>事件</h4> <p><input>所有事件。</p> <pre><code><template> <div class="wrapper"> <textarea class="textarea" @input="oninput" @change="onchange" @focus="onfocus" @blur="onblur">

---

是唯一合法的子组件。

特性

• src {string}：内嵌的视频指向的URL
• play-status {string}：可选值为 play | pause，用来控制视频的播放状态，play 或者 pause，默认值是 pause。
• auto-play {boolean}：可选值为 true | false，当页面加载初始化完成后，用来控制视频是否立即播放，默认值是 false。

事件

• start
• pause
• finish
• fail

示例代码：

---

提供瀑布流布局。与子组件相同。

特性

• column-width : 描述瀑布流每一列的列宽
  • auto: 意味着列宽是被其他属性所决定的(比如 column-count)
  • : 最佳列宽，实际的列宽可能会更宽(需要填充剩余的空间)， 或者更窄(如果剩余空间比列宽还要小)。 该值必须大于0
• column-count: 描述瀑布流的列数
  • auto: 意味着列数是被其他属性所决定的(比如 column-width)
  • : 最佳列数，column-width 和 column-count 都指定非0值， 则 column-count 代表最大列数。
• column-gap: 列与列的间隙. 如果指定了 normal ，则对应 32.
• left-gap: 左边cell和列表的间隙. 如果未指定 ，则对应 0v0.19+.
• column-gap: 右边cell和列表的间隙. 如果未指定，则对应 0v0.19+.

示例代码：

---

用于在 weex 页面中显示由 src 属性指定的页面内容。您还可以使用 webview 模块来控制 WebView 的行为，例如回退、前进和重新加载。

注意： 不支持任何嵌套的子组件，并且必须指定 width 和 height 的样式属性，否则将不起作用。

特性

• src

事件

• pagestart
• pagefinish
• error
• receivedtitle//仅限安卓平台

注意事项

必须指定 的 width 和 height 样式。
不能包含任何嵌套的子组件。
您可以使用 webview module 来控制 组件。

示例代码：

---

好的，今天的内容就到这里了，有什么问题可以来老司机的个人博客、GitHub或者邮件我。