3.组件
实际开发中还需要刷新页面,weex在列表中也为我们想好了,提供了 组件,它的作用就是在上拉时进行刷新页面
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:回调函数
测试代码:
详细的stream使用代码:
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, 仅成功确认的时候存在。
代码详情:
15.weex的粘贴模块clipboard
1.我们可以通过 clipboard 模块的 getString()、setString() 接口从系统的粘贴板获取内容或者设置内容。
但是需要注意的是clipboard仅支持文本拷贝,而且出于安全考虑和平台限制,只支持 Android 和 iOS,不支持 html5。
下面先看一下getString(callback)功能:用于从系统粘贴板读取内容
callback 函数的参数,有两个属性:
ret.data:获取到的文本内容;
ret.result:返回状态,可能为 success 或 fail。
再看一下setString(text):用于将一段文本复制到剪切板,相当于手动复制文本。
参数text {string}:要复制到剪切板的字符串。
代码详情:
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”>