weex入门到掌握

.text{

text-align:center;

}

.textInput{

border-bottom-width:1px;

}

.testImage{

/*

720px=100%

1250px=100%

*/

width:720px;

height:300px;

}

.video {

width: 630px;

height: 350px;

margin-top: 60px;

margin-left: 60px;

}

9.制作列表

1.先看一下loadmore组件的功能代码：用于上拉加载

{{rum}}

2.loading组件的使用：用于下拉加载的组件

组件 要使用组件你需要先去组件上的loadmore和loadmoreoffset属性，并在list中加入组件

代码详情：

{{rum}}

Loading…

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}}

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}}