2021 Vue 小程序 面试笔试题

一、html5部分

1.sessionStorage和localStorage的区别

答案：

sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

2.Canvas和SVG的区别是什么

答案：

canvas绘制2d位图svg绘制2d 矢量图

 canvas通过js程序指令创建图形，svg通过标签创建图形

 canvas可以只能将事件绑定在画布上，svg可以将事件绑定在任意元素上

 canvas应用方向，网页特效与小游戏，svg创建统计图与地图应用

3.如何通过canvas路径绘制一个圆心 250 200 半径为100 描边红色的圆

提示：画布id 为box 画布宽高相同500px

var can = docuemnt.getElementById("box");

   var ctx = can.getContext("2d");

   ctx.beginPath();

   ctx.arc(250,200,100,0,2*Math.PI);

   ctx.stroke();

4. html5有哪些新特性举五种

canvas 绘图技术

svg      绘图技术

webworker 新线程

websocket 网络协议

webstorage 客户端存储

5. html5表单中新input type 属性值有哪些

Color

Date

Datetime

Email

Time

Url

Range

Tel

Number

Search

6. html5中如何创建一个worker线程,以及接收和发送数据

var worker = new Worker("1.js");

worker.postMessage();

worker.onmessage = function (e)

{

e.data;

};

7. Local storage和cookies之间的区别是什么？

区别一:客户端和服务端都能访问数据。

Cookie的数据通过每一个请求发送到服务端

Local storage只有本地浏览器端可访问数据，

服务器不能访问本地存储直到故意通过POST或者GET的通道发送到服务器

区别二:大小

每个cookie有4095byte

Local storage每个域5MB

区别三:过期

Cookies有有效期，所以在过期之后cookie和cookie数据会被删除

Local storage有过期数据，如需删除只能手工删除

8. HTML5 中如何嵌入音频？

HTML5 支持 MP3、Wav 和 Ogg 格式的音频，下面是在网页中嵌入音频的简单示例：

<audio controls>

    <source src=”jamshed.mp3″ type=”audio/mpeg”>

    您的浏览器不支持音频播放

</audio>

9. HTML5 中如何嵌入视频？

HTML5 支持 MP4、WebM 和 Ogg 格式的视频，下面是简单示例：

<video width=”450″ height=”340″ controls>

  <source src=”jamshed.mp4″ type=”video/mp4″>

您的浏览器不支持视频播放

</video>

10. html5视频专用的css属性有哪些

object-fit

   fill:     "填充" 默认值 将视频拉伸操作填满空间

   contain: "包含"保持原有尺寸比例，容器空白

   cover:  "覆盖"保持原有尺寸比例,宽度或者高度

          至少一个可以与父元素一致[裁切]

11. Html5 视频常用的方法和事件有哪些

controls -是否显示播放控件

 -autoplay -是否自动播放     

 -loop -是否循环播放     

 -muted -是否是静音播放   

 -poster -在播放视频之前广告

 -preload -预加载策略

            auto:预加载一定时长视频与元数据

            metadata:预加载元数据

            none:不预加载数据

 -volume:1    当前音量 (0~1)

 -playbackRate 回放速率 大于1快放 小于1慢播

 -paused:true  当前视频是否处理暂停状态

 -play()       播放视频

 -pause()     暂停播放视频

 -onplay      当前视频开始播放时触发事件

 -onpause    当前视频暂停播放时触发事件

12. 如何解决html5视频移动播放时同层播放问题

<video src="http://xxx.mp4" x5-video-player-type="h5"/>

13. Canvas 绘图技术常用路径方法与属性有哪些

ctx.beginPath():

  ctx.closePath();

  ctx.moveTo(x,y);

  ctx.lineTo(x,y);   

  ctx.stroke();     

  ctx.fill();       

  ctx.arc(cx,cy,r,start,end);

14. Canvas 绘图技术常用图像方法与属性有哪些

var p3 = new Image();

   p3.src = "x.png"

  p3.onload = function(){..}

  ctx.drawImage(p3,x,y);

  15. Canvas 绘图技术常用变形方法与属性有哪些

--rotate(deg)

     -translate(x,y)

     -save()

     -restore();

16. Svg 绘图技术例举三个常用标签

 <ellipse rx="" ry="" cx="" cy=""></ellipse>

 <line x1="" y1="" x2="" y2="" stroke-width="" stroke-linecap="" stroke=""></line>

<rect x="" y="" width="" height="" fill="" fill-opacity=""

 <circle cx="" cy="" r=""></circle>

17. Canvas 绘图技术如何绘制贝赛尔曲线

moveTo(x,y); 起点坐标

quadraticCurveTo(cp1x,cp1y,x,y); 控制点和终点坐

18. Canvas 绘图技术如何使用平滑动画处理

 window.requestAnimationFrame()19. Html5拖放api提供哪些事件

 -拖动源对象

    dragstart 拖动开始

    drag     拖动中

dragend  拖动结束

 -拖动目标对象(不会动)

    dragenter 拖动进入

    dragover  拖动悬停

    dragleave 拖动离开

    drop     释放

20. Html5 地于定位对象与方法有哪些

navigator.geolocation.getCurrentPosition

navigator.geolocation.watchPosition()

navigator.geolocation.clearWatch();

21. 说说HTML5，CSS3的新特性，使用过哪些？

答案：

H5新特性：

结构标记（header，footer，section，article，aside，nav），新表单元素（url，email，number，date，month，color等），canvas，audio，video，地理定位，拖放，web存储，Web Workers，WebSocket等。

CSS3新特性：

复杂选择器器（属性选择器，伪类选择器，伪元素选择器，兄弟选择器等），边框倒角，边框阴影，渐变，转换，过渡，动画，弹性盒子，媒体查询技术等。

二、vue组件库部分

1. vuex作用？哪种功能场景使用它

答案：

vue框架中状态管理。

 场景有：单页应用中，组件之间的状态。音乐播放、登录状态、加入购物车

2. 解释vuex最常用的二种属性

答案：

分别是 State、 Getter

vuex的State特性

A、Vuex就是一个仓库，仓库里面放了很多对象。其中state就是数据源存放地，对应于一般Vue对象里面的data

B、state里面存放的数据是响应式的，Vue组件从store中读取数据，若是store中的数据发生改变，依赖这个数据的组件也会发生更新

C、它通过mapState把全局的 state 和 getters 映射到当前组件的 computed 计算属性中

vuex的Getter特性

A、getters 可以对State进行计算操作，它就是Store的计算属性

B、 虽然在组件内也可以做计算属性，但是getters 可以在多组件之间复用

C、 如果一个状态只在一个组件内使用，是可以不用getters

3. 请列举出3个Vue中常用的生命周期钩子函数

答案：

created: 实例已经创建完成之后调用,在这一步,实例已经完成数据观测, 属性和方法的运算, watch/event事件回调. 然而, 挂载阶段还没有开始, $el属性目前还不可见

mounted: el被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。

activated: keep-alive组件激活时调用

4. mint-ui是什么？怎么使用？至少说出三个组件

      答案：

       基于 vue 的前端组件库。npm 安装，然后 import 样式和js，

                 Vue.use(mintUI)全局引入。

 -在单个组件内部引入：import { Toast } from ‘mint-ui’

 -

    组件1：Toast(‘登录成功’)；

   组件2：mint-header

   组件3：mint-swiper

5. vue-loader是什么？使用它的用途有哪些

答案：

解析.vue文件的一个加载器，跟template/js/style转换成js模块。

用途：js可以写es6、style样式可以scss或less、template可以加jade等

6. axios的特点有哪些

答案：

Axios 是一个基于 promise 的 HTTP 库，支持promise所有的API

它可以拦截请求和响应

它可以转换请求数据和响应数据，并对响应回来的内容自动转换成 JSON类型的数据

安全性更高，客户端支持防御 XSRF

7. axios有哪些常用方法

答案：

axios.get(url[, config])   //get请求用于列表和信息查询

axios.delete(url[, config])  //删除

axios.post(url[, data[, config]])  //post请求用于信息的添加

axios.put(url[, data[, config]])  //更新操作

8. Vuex的理解

  答案：Vuex是一个专为Vue开发的应用程序的状态管理模式，它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化

核心概念：

Store：要使用Vuex，我们要创建一个实例 store ，我们称之为仓库，利用这个仓库 store 来对我们的状态进行管理

State

Vuex 使用单一状态树，用一个对象State包含了整个应用层级的所有状态，你可以理解为这些状态就是一堆全局变量和数据

Getter

还记得Vue中的计算属性computed 吗？当我们需要在data的基础上再派生一些状态的时候，就会使用computed 来实现。同样，当我们需要从 state 中派生出一些状态的时候，就会使用到getters，你可以将 getters 理解state的计算属性。

Mutation

Vuex相比传统的全局变量有两个优势，其中一个是Vuex中的状态不能随意修改，要修改必要按照Vuex提供的方式才能修改

Action

Action 类似于 mutation，不同在于：

Action 提交的是 mutation，而不是直接变更状态。

Action 可以包含任意异步操作，通过 store.dispatch 方法触发

9. Vue和angular的区别

答案：

Vue：上手容易  指令以 v-xxx   html+json,然后再new Vue()实例化对象  个人维护项目

适合移动端

Angular：上手难  指令以 ng-xxx  列表内容  所有属性和方法都挂载到$scope上

由google维护  适合web端

10. vue 两种模式

答案：

vue-router里面除了要配置路由词典外 还要选择 模式 有 hash模式和history模式

 11. vue的生命周期

 答案：

 总共8个阶段：

创建前/后: 创建模型数据和响应系统

beforeCreated 挂在元素$el：undefined  数据data：undefined

Created   挂在元素$el：undefined   数据data：{.....}

载入前/后: 挂载 创建虚拟DOM 并生成真实DOM  

认为Vue实例/组件首次加载完成

              可以发送ajax请求

              也可以操作DOM元素

    beforeMount:挂载元素$el undefined  数据data {.....}

    Mounted: 挂载元素$el DOM  数据data{....}

更新前/后: 模型数据发生变化时触发

    BeforeUpdate：

    Updated：

销毁前/后:  destroy()方法被调用时，要销毁组件/实例时

    beforeDestroy

Destroyed

v-show和v-if指令的共同点和不同点?

v-show指令是通过修改元素的displayCSS属性让其显示或者隐藏

v-if指令是直接销毁和重建DOM达到让元素显示和隐藏的效果

三、微信小程序

1. 微信小程序组件的生命周期

答案：

生命周期函数-onLoad: 页面加载

   一个页面只会调用一次，可以在 onLoad 中获取打开当前页面所调用的 query 参数。

-onShow: 页面显示

  每次打开页面都会调用一次。

-onReady: 页面初次渲染完成

    一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。

-onHide: 页面隐藏

     当navigateTo或底部tab切换时调用。

-onUnload: 页面卸载

2.  简单描述下微信小程序的相关文件类型

答案：

 微信小程序项目结构主要有四个文件类型,如下

.json 后缀的 JSON 配置文件

.wxml 后缀的 WXML 模板文件

.wxss 后缀的 WXSS 样式文件

.js 后缀的 JS 脚本逻辑文件

3. app.json 是对当前小程序的全局配置，讲述三个配置各个项的含义

答案：

pages字段 —— 用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。

window字段 —— 小程序所有页面的顶部背景颜色，文字颜色定义在这里的

tab字段—小程序全局顶部或底部tab

4. 小程序的wxss和css有哪些不一样的地方

答案：

新像素单位 rpx

样式可直接使用import导入

5. 小程序有哪些参数传值的方法

答案：

给HTML元素添加data-*属性来传递我们需要的值，然后通过e.currentTarget.dataset或onload的param参数获取。但data-名称不能有大写字母和不可以存放对象；

设置id 的方法标识来传值通过e.currentTarget.id获取设置的id的值,然后通过设置全局对象的方式来传递数值；

在navigator中添加参数传值。

6. 如何提高微信小程序的应用速度？

答案：

一、提高页面加载速度

二、用户行为预测

三、减少默认data的大小

四、组件化方案

7. 微信小程序与H5的区别？

答案：

第一条是运行环境的不同

传统的HTML5的运行环境是浏览器，包括webview，而微信小程序的运行环境并非完整的浏览器，是微信开发团队基于浏览器内核完全重构的一个内置解析器，针对小程序专门做了优化，配合自己定义的开发语言标准，提升了小程序的性能。

第二条是开发成本的不同

只在微信中运行，所以不用再去顾虑浏览器兼容性，不用担心生产环境中出现不可预料的奇妙BUG

第三条是获取系统级权限的不同

接系统级权限都可以和微信小程序无缝衔

8. 小程序获取场景值的方法

let options = wx.getLanchOptionsSync()

9. 小程序onPageScroll方法的使用注意什么

由于此方法调用频繁，不需要时，可以去掉，不要保留空方法，并且使用onPageScroll时，尽量避免使用setData()，尽量减少setData()的使用频次。

10. 小程序视图渲染结束回调

使用setData(data, callback)，在callback回调方法中添加后续操作代码

11. 小程序同步API和异步API使用时注意事项

像wx.setStorageSync这种以Sync结尾的API为同步API，使用时使用try-catch来查看异常，如果判定API为异步，可以在其回调方法success、fail、complete中进行下一步操作。

12. 小程序对wx:if 和 hidden使用的理解

wx:if 有更高的切换消耗。

hidden 有更高的初始渲染消耗。

因此，如果需要频繁切换的情景下，用 hidden 更好，如果在运行时条件不大可能改变则 wx:if 较好。

13. .小程序简单介绍下三种事件对象的属性列表

基础事件（BaseEvent）

type: 事件类型

timeStamp：事件生成时的时间戳

target：触发事件的组件的属性值集合

currentTarget：当前组件的一些属性集合

自定义事件（CustomEvent）

detail

触摸事件（TouchEvent）

touches

changedTouches

14. 小程序的双向绑定和vue的异同？

答案：

大体相同，但小程序直接this.data的属性是不可以同步到视图的，必须调用this.setData()方法！

15. 小程序页面间有哪些传递数据的方法？

答案：

使用全局变量实现数据传递

页面跳转或重定向时，使用url带参数传递数据

使用组件模板 template传递参数

使用数据库传递数据

16. 小程序wxml与标准的html的异同？

答案：

都是用来描述页面的结构；

都由标签、属性等构成；

标签名字不一样，且小程序标签更少，单一标签更多；

多了一些 wx:if 这样的属性以及 {{ }} 这样的表达式

WXML仅能在微信小程序开发者工具中预览，而HTML可以在浏览器内预览

组件封装不同， WXML对组件进行了重新封装，

小程序运行在JS Core内，没有DOM树和window对象，小程序中无法使用window对象和document对象。

17. 小程序WXSS和CSS的异同？

答案：都是用来描述页面的样子；

WXSS 具有 CSS 大部分的特性，也做了一些扩充和修改；

WXSS新增了尺寸单位，WXSS 在底层支持新的尺寸单位 rpx；

WXSS 仅支持部分 CSS 选择器；

WXSS 提供全局样式与局部样式

18. 微信小程序事件类型有哪两种，分别有什么特点？

答案：冒泡事件与非冒泡事件。

默认情况下当触发了子组件的冒泡事件时会继续触发父组件的冒泡事件。而非冒泡事件则不会。

最后

以上就是英俊爆米花为你收集整理的2021 Vue 小程序 面试笔试题的全部内容，希望文章能够帮你解决2021 Vue 小程序 面试笔试题所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。