2024年weex入门到掌握(2)，2024年最新Web前端校招面试指南

分享

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

var modal=weex.requireModule(“modal”);//参数必须是model

接下来定义内建模块的声明周期:

created(){

modal.toast({

message:‘页面初始化成功’,//用于提醒的字段

duration:3//内建模块持续的秒数

});

}

8.Image和video组件

1.image组件及其对应的属性：

内容：

<image class=“testImage”   resize=“cover”

src=“https://img-blog.csdnimg.cn/2022010617505325844.jpeg”>

对应的内容：无；

对应的内容：

.testImage{

/*

720px=100%

1250px=100%

*/

width:720px;

height:300px;

}

注：image是weex独有的属性

2.video组件：

内容：

<video class=“video” :src=“src” autoplay controls

v-on:start=“onstart”  v-on:pause=“onpause”  v-on:finish=“onfinish”  v-on:fail=“onfail”>

中的内容：

export default {

name: ‘App’,

data () {

return {

src:‘https://www.youtube.com/watch?v=wn12uL6pYIc’

}

},

methods:{

onstart (event) {

this.state = ‘onstart’

},

onpause (event) {

this.state = ‘onpause’

},

onfinish (event) {

this.state = ‘onfinish’

},

onfail (event) {

this.state = ‘onfinish’

}

}

对应的样式：

.video {

width: 630px;

height: 350px;

margin-top: 60px;

margin-left: 60px;

}

所有的代码：

Hello Word

<image class=“testImage”   resize=“cover”

src=“https://img-blog.csdnimg.cn/2022010617505325844.jpeg”>

<video class=“video” :src=“src” autoplay controls

v-on:start=“onstart”  v-on:pause=“onpause”  v-on:finish=“onfinish”  v-on:fail=“onfail”>

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组件    在原生的软件中嵌入网站页面