3.组件

实际开发中还需要刷新页面，weex在列表中也为我们想好了，提供了 组件，它的作用就是在上拉时进行刷新页面

Refreshing …

{ {rum}}

Loading…

10.从后端服务器上获取数据

1.stream的引入

要想使用stream，必须使用weex来进行引入。

stream.fetch(options, callback[,progressCallback]):

options {Object}：请求的一些选项 包含：

method {string}：HTTP 方法 GET 或是 POST

url {string}：请求的 URL

headers {Object}：HTTP 请求头

type {string}：响应类型, json,text 或是 jsonp {在原生实现中其实与 json 相同)

body {string}：HTTP 请求体。

注意：

body 参数仅支持 string 类型的参数，请勿直接传递 JSON，必须先将其转为字符串。

GET 请求不支持 body 方式传递参数，请使用 url 传参。

callback：回调函数

测试代码：

{ {news.newsTitle}}

{ {news.newsContent}}

{ {news}}

method = GET

{ {getResult}}

详细的stream使用代码：

method = GET

{ {getResult}}

method = GET / type = jsonp

{ {getJsonpResult}}

method = POST

{ {postResult}}

method = PUT

{ {putResult}}

method = DELETE

{ {deleteResult}}

method = HEAD

{ {headResult}}

method = PATCH

{ {patchResult}}

11.作轮播图片效果

12.a组件和web组件

使用组件时需要和我们html中的标签区分，html中的标签是用来链接html页面的，而weex中的组件是用来链接weex格式的js文件的

判断是否可以访问到你所创建的文件：

先cd到创建的目录之下，使用命令ipconfig查看ipv4的地址

比如我的是192.168.239.1

后面添加端口号8080或者8081等。

访问地址http://192.168.239.1:8081/slider.js（slider.js就是你要判断是否可以访问的文件）

如果可以访问那么就会显示这个文件里面的内容，如果未显示，说明不能进行访问

index.vue中的主要代码如下：

跳转轮播图

下面讲一下web组件    在原生的软件中嵌入网站页面

13.通用事件和动画模块

1.先描述一些常见的事件：

<1>longpress(长按事件):如果一个组件被绑定了 longpress 事件，那么当用户长按这个组件时，该事件将会被触发。

<2>Appear（屏幕内事件）：如果一个位于某个可滚动区域内的组件被绑定了 appear 事件，那么当这个组件的状态变为在屏幕上可见时，

该事件将被触发。

<3>Disappear（屏幕外事件）:如果一个位于某个可滚动区域内的组件被绑定了 disappear 事件，

那么当这个组件被滑出屏幕变为不可见状态时，该事件将被触发。

2.动画效果：

14.weex的时间选取模块picker

1.pick(options1, callback {function (ret)})

options1:index {number}：默认选中的选项

items {array}：picker 数据源

textColor {color}：picker中文字的颜色

selectionColor {color}：picker中选中item的背景色

confirmTitle {string}：确认按钮的文案

cancelTitle {string}：取消按钮的文案

confirmTitleColor {color}：确认按钮的文字颜色

cancelTitleColor {color}：取消按钮的文字颜色

title {string}：对话框的标题

titleColor {color}：对话框标题的文字颜色

titleBackgroundColor {color}：对话框标题的背景色

callback {function (ret)}：执行完读取操作后的回调函数。ret {Object} 为 callback 函数的参数，

有两个属性：result {string}：结果三种类型 success, cancel, error

data {number}：选择的选项,仅成功确认时候存在。time 格式为 HH:mm, 仅成功确认的时候存在。

代码详情：

Time:

{ {value}}

Pick Time

15.weex的粘贴模块clipboard

1.我们可以通过 clipboard 模块的 getString()、setString() 接口从系统的粘贴板获取内容或者设置内容。

但是需要注意的是clipboard仅支持文本拷贝，而且出于安全考虑和平台限制，只支持 Android 和 iOS，不支持 html5。

下面先看一下getString(callback)功能:用于从系统粘贴板读取内容

callback 函数的参数，有两个属性：

ret.data：获取到的文本内容；

ret.result：返回状态，可能为 success 或 fail。

再看一下setString(text)：用于将一段文本复制到剪切板，相当于手动复制文本。

参数text {string}：要复制到剪切板的字符串。

代码详情：

{ {message}}

Click to copy: { {tobecopied}}

16.weex的Navigator和webview模块

1.先看一下Naviator模块：

这个就是原生系统上的前进和后退，里边的方法也很简单。只有两个方法。

push:把一个weex页面URL压入导航堆栈中，可指定在页面跳转时是否需要动画，以及操作完成后需要执行的回调函数

pop:把一个 Weex 页面 URL 弹出导航堆栈中，可指定在页面弹出时是否需要动画，以及操作完成后需要执行的回调函数。

详细代码如下：

<text class=“button” @click=“jump”>Jump

2.webview模块

webview是一系列的操作，必须和web组件配合使用。包括goback，goForward，reload。注意的是webview必须和组件共用。

它有三个方法需要我们掌握：

goBack:相当于浏览器里的后退。

goForward:相当于浏览器里的前进。

reload:刷新页面。

对应的详细代码：

<text class=“button” @click=“loadURL”>LoadURL

<text class=“button” @click=“reload”>reload

<web ref=“webview” :src=“url” class=“webview” @pagestart=“start” @pagefinish=“finish” @error=“error”>