最后
前端CSS面试题文档，JavaScript面试题文档，Vue面试题文档，大厂面试题文档
开源分享：docs.qq.com/doc/DSmRnRG… //fetch(event)：用于检测所有的事件
fetch(event){
/*使用内联模块
duration:1 1:指的是1秒
*/
modal.toast({message:'loadmore',duration:1});
/*用于实现模拟下拉菜单的功能
setTimeout方法解析：包含function delay code
（注：code 这是一个替代语法，你可以使用字符串代替function ，在delay毫秒之后执行字符串
(使用该语法是不推荐的, 原因和使用 eval()一样，有安全风险)。）
function 是你想要在delay毫秒之后执行的函数(function这个单词不一定要显示出来，不写function 直接写函数体也行)
延迟的毫秒数 (一秒等于1000毫秒)，函数的调用会在该延迟之后发生。如果省略该参数，delay取默认值0。实际的延迟时间可能会比 delay 值长
*/
setTimeout(()=>{
const length = this.lists.length;
for(let i=length;i<length+4;i++){
//给数组lists不停地添加新元素
this.lists.push(i+1);
}
},800);//此处的800指的是毫秒
}
}
}
.panel{ width:600px; height:250px; margin-left:75px; margin-top:35px; margin-bottom:35px; flex-direction: column; justify-content: center; border-width: 2px; border-style: solid; border-color:rgb(162,217,192); background-color:rgba(162, 217, 192, 0.2) } .text{ font-size:50px; text-align: center; color:#41B883; }2.loading组件的使用：用于下拉加载的组件
组件 要使用组件你需要先去组件上的loadmore和loadmoreoffset属性，并在list中加入组件
代码详情：
.panel{ width:600px; height:250px; margin-left:75px; margin-top:35px; margin-bottom:35px; flex-direction: column; justify-content: center; border-width: 2px; border-style: solid; border-color:rgb(162,217,192); background-color:rgba(162, 217, 192, 0.2) } .text{ font-size:50px; text-align: center; color:#41B883; }3.组件
实际开发中还需要刷新页面，weex在列表中也为我们想好了，提供了 组件，它的作用就是在上拉时进行刷新页面
.panel { width: 600px; height: 250px; margin-left: 75px; margin-top: 35px; margin-bottom: 35px; flex-direction: column; justify-content: center; border-width: 2px; border-style: solid; border-color: rgb(162, 217, 192); background-color: rgba(162, 217, 192, 0.2); } .text { font-size: 50px; text-align: center; color: #41b883; }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：回调函数
测试代码：
.panel { width: 650px; height: 250px; margin-left: 50px; margin-top: 35px; margin-bottom: 35px; flex-direction: column; padding-top:15px; padding-left:10px; padding-right:10px; border-width: 2px; border-style: solid; border-color: rgb(162, 217, 192); background-color: rgba(162, 217, 192, 0.2) } .text { font-size: 36px; text-align: center; color: #41B883; } .content{ lines:5; font-size: 28px; }详细的stream使用代码：
.panel { width: 650px; height: 250px; margin-left: 50px; margin-top: 35px; margin-bottom: 35px; flex-direction: column; padding-top:15px; padding-left:10px; padding-right:10px; border-width: 2px; border-style: solid; border-color: rgb(162, 217, 192); background-color: rgba(162, 217, 192, 0.2) } .text { font-size: 36px; text-align: center; color: #41B883; } .content{ lines:5; font-size: 28px; }11.作轮播图片效果
.image { width: 700px; height: 700px; } .slider { margin-top: 25px; margin-left: 25px; width: 700px; height: 700px; border-width: 2px; border-style: solid; border-color: #41B883; } .frame { width: 700px; height: 700px; position: relative; } .indicator{ height:700px ; width:700px ; /\* item-color：是indicator独有的样式,它是用于定义书签圆点的颜色 item-selected-color：是indicator独有的样式,它是用于设置被选中时的颜色 \*/ item-color:#ffff; item-selected-color:red; /\* 此处的设置是用于设置真实的运行时圆点标签的产生效果 \*/ position: absolute; }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组件 在原生的软件中嵌入网站页面
.wrapper { flex-direction: column; justify-content: center; } .web { margin-left: 75px; width: 600px; height: 750px; border-width: 2px; border-style: solid; border-color: #41b883; }13.通用事件和动画模块
1.先描述一些常见的事件：
<1>longpress(长按事件):如果一个组件被绑定了 longpress 事件，那么当用户长按这个组件时，该事件将会被触发。
<2>Appear（屏幕内事件）：如果一个位于某个可滚动区域内的组件被绑定了 appear 事件，那么当这个组件的状态变为在屏幕上可见时，
该事件将被触发。
<3>Disappear（屏幕外事件）:如果一个位于某个可滚动区域内的组件被绑定了 disappear 事件，
那么当这个组件被滑出屏幕变为不可见状态时，该事件将被触发。
2.动画效果：
.box{ width:250px; height:250px; background-color:#DDD; }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, 仅成功确认的时候存在。
代码详情：
.wrapper { flex-direction: column; justify-content: center; } .group { flex-direction: row; justify-content: center; margin-bottom: 40px; align-items: center; } .label { font-size: 40px; color: #888888; } .title { font-size: 80px; color: #41B883; } .button { font-size: 36px; width: 280px; color: #41B883; text-align: center; padding-top: 25px; padding-bottom: 25px; border-width: 2px; border-style: solid; border-color: rgb(162, 217, 192); background-color: rgba(162, 217, 192, 0.2); }15.weex的粘贴模块clipboard
1.我们可以通过 clipboard 模块的 getString()、setString() 接口从系统的粘贴板获取内容或者设置内容。
但是需要注意的是clipboard仅支持文本拷贝，而且出于安全考虑和平台限制，只支持 Android 和 iOS，不支持 html5。
下面先看一下getString(callback)功能:用于从系统粘贴板读取内容
callback 函数的参数，有两个属性：
ret.data：获取到的文本内容；
ret.result：返回状态，可能为 success 或 fail。
再看一下setString(text)：用于将一段文本复制到剪切板，相当于手动复制文本。
参数text {string}：要复制到剪切板的字符串。
代码详情：
.div { flex-direction: row; justify-content: space-between; align-items: center; width: 750px; height: 90px; padding-left: 30px; padding-right: 30px; border-bottom-width: 1px; border-style: solid; border-color: #DDDDDD; } .text { width: 750px; height: 90px; }16.weex的Navigator和webview模块
1.先看一下Naviator模块：
这个就是原生系统上的前进和后退，里边的方法也很简单。只有两个方法。
push:把一个weex页面URL压入导航堆栈中，可指定在页面跳转时是否需要动画，以及操作完成后需要执行的回调函数
pop:把一个 Weex 页面 URL 弹出导航堆栈中，可指定在页面弹出时是否需要动画，以及操作完成后需要执行的回调函数。
详细代码如下：
.wrapper { /\* flex-direction：指定如何柔性物品被放置在所述柔性容器限定主轴线和方向（正常或反向） row：Flex容器的主轴定义为与文本方向相同。所述主起动和主端点是一样的内容方向。 row-reverse：行为相同row但主要起点和主要点都是置换的。 column:Flex容器的主轴与块轴相同。在主启动和主结束点是一样的之前和之后的写作模式的要点。 column-reverse:行为相同，column但主开始和主要端是置换的。 \*/ flex-direction: column; justify-content: center; } .button { font-size: 60px; width: 450px; text-align: center; margin-top: 30px; margin-left: 150px; padding-top: 20px; padding-bottom: 20px; border-width: 2px; border-style: solid; color: #666666; border-color: #dddddd; background-color: #f5f5f5; }2.webview模块
webview是一系列的操作，必须和web组件配合使用。包括goback，goForward，reload。注意的是webview必须和组件共用。
它有三个方法需要我们掌握：
goBack:相当于浏览器里的后退。
goForward:相当于浏览器里的前进。
reload:刷新页面。
对应的详细代码：
