---

一、html 系列 ⭐⭐⭐⭐⭐

1、H5新增特性和css3新增特性？

html5：

1. ⾸先 html5 为了更好的实践 web 语义化，增加了 header，footer，
   nav,aside,section 等语义 化标签，

2. 在表单⽅⾯，为了增强表单，为 input 增加了 color，email,data ,range 等类型，还有一些属性，

3. 在存储⽅⾯，提供了 sessionStorage，localStorage,和离线存储，通过这些存储⽅式
   ⽅便数 据在客户端的存储和获取，

4. 在多媒体⽅⾯规定了⾳频和视频元素 audio 和 vedio，另外还 有地理定位，canvas 画
   布，拖放，多线程编程的 web worker 和 websocket协议

css3新增特性：

1. 新的选择器：引入了多种新的选择器，如属性选择器、伪类选择器、伪元素选择器等，使样式选择更加灵活。
2. CSS3 边框如 border-radius，box-shadow 等;
3. CSS3 背景如 background-size，background-origin 等;
4. CSS3 2D，3D 转换如 transtion,transform 等;
5. CSS3 动画如 animation 等；

---

二、css 系列 ⭐⭐⭐⭐⭐

1、BFC的理解？

1.BFC（Block Formatting Context），即块级格式化上下⽂，它是⻚⾯中的⼀块渲染区
域，并且有⼀套属于⾃⼰的渲染规则：

• 内部的盒⼦会在垂直⽅向上⼀个接⼀个的放置
• 对于同⼀个BFC的俩个相邻的盒⼦的margin会发⽣重叠，与⽅向⽆关。
• 每个元素的左外边距与包含块的左边界相接触（从左到右），即使浮动元素也是如此
• BFC的区域不会与float的元素区域重叠
• 计算BFC的⾼度时，浮动⼦元素也参与计算
• BFC就是⻚⾯上的⼀个隔离的独⽴容器，容器⾥⾯的⼦元素不会影响到外⾯的元素，反之亦然
  BFC⽬的是形成⼀个相对于外界完全独⽴的空间，让内部的⼦元素不会影响到外部的元素

2.触发BFC的条件包含不限于：

• 根元素，即HTML元素
• 浮动元素：float值为left、right
• overflow值不为 visible，为 auto、scroll、hidden
• display的值为inline-block、inltable-cell、table-caption、table、inlinetable、flex、inline-flex、grid、inline-grid
• position的值为absolute或fixed

3.利⽤BFC的特性，我们将BFC应⽤在以下场景：

• 防⽌margin重叠（塌陷）
• 清除内部浮动
• ⾃适应多栏布局

2、说说你对盒模型的理解？

盒模型其实就是浏览器把⼀个个标签都看成⼀个矩形盒⼦，每个盒⼦都由:内容、内边距、边框、外边距四部分组成.
盒模型分为,标准盒模型和怪异盒模型
区别： 标准盒模型的宽高只包含内容，不包含其他部分 怪异盒模型的宽高包含了内容、内边距和边框部分
通过box-sizing属性设置盒模型
border-box //怪异盒模型content-box //标准盒模型

3、如何实现元素⽔平垂直居中？

已知宽高：

1. 定位：
绝对定位 top：50%；left；50%；margin负的自身宽高的一半

2. 定位：
绝对定位 top：50%；left；50%；transform（-50%, -50%）负百分之五十

3. grid⽹格布局
设置父元素为display: grid;使用 grid-auto-columns 和 grid-auto-rows 属性将网格单元格大小设置为 auto ，然后使用 justify-content 和 align-content 属性将格子垂直和水平居中。

未知宽高：

2. 定位：
元素绝对定位 上下左右（0）margin：auto；

3. 弹性盒子：
父元素设置flex弹性盒,然后使用justify-content: center,align-items: center居中

4. table布局
设置⽗元素为 display:table-cell ，⼦元素设置 display: inline-block 。利⽤ vertical和 text-align 可以让所有的⾏内块级元素⽔平垂直居中

4、CSS如何画⼀个三⻆形？原理是什么？

通常情况下我们会使⽤图⽚或者 svg 去完成三⻆形效果图，但如果单纯使⽤ css 如何完成⼀个三⻆
形呢？其实实现过程似乎也并不困难，通过边框就可完成
实现过程：
设置一个宽高为零的元素，然后设置它的border边框为50px或更大，最后给个颜色值，把另外三个边框的宽度改为零

5、说说em/px/rem/vh/vw区别？

em/px/rem/vh/vw区别如下：
px：绝对单位，⻚⾯按精确像素展示
em：相对单位，基准点为⽗节点字体的⼤⼩，如果⾃身定义了 font-size 按⾃身来计算，整个⻚⾯内1em 不是⼀个固定的值
rem：相对单位，可理解为 root em , 相对根节点 html 的字体⼤⼩来计算
vh、vw：主要⽤于⻚⾯视⼝⼤⼩布局，在⻚⾯布局上更加⽅便简单

---

三、javaScript 系列 ⭐⭐⭐⭐⭐

---

四、vue 系列 ⭐⭐⭐

---

五、react 系列 ⭐⭐⭐

---

六、webpack 系列 ⭐⭐⭐

---

七、uniapp 系列 ⭐⭐

---

七、jquery 系列 ⭐⭐

---

八、微信小程序 系列 ⭐⭐

1、简单描述下微信小程序的相关文件类型？

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

1. WXML可以构建出页面的结构

2. WXSS 是一套样式语言，用于描述 WXML 的组件样式

3. js逻辑处理，网络请求

4. json小程序配置文件

5. app.json作为配置文件入口，整个小程序的全局配置。

6. app.js必须要有这个文件，没有会报错

7. app.wxss全局页面样式设置，在app.wxss中设置的样式可以在小程序的所有页面生效

2、⼩程序怎么跟随事件传值？

在⻚⾯标签上绑定data-key = value, 然后绑定事件通过e.Target.dataset.key 来获取标签上绑定的值(他盖特)

3、⼩程序WXSS与CSS 的区别？

1. wxss 背景图⽚只能引⼊外链，不能使⽤本地图⽚.
2. ⼩程序可以使⽤ @import 引⼊ 外联样式⽂件，地址为相对路径.
3. 尺⼨单位为 rpx , rpx 是响应式像素,可以根据屏幕宽度进⾏⾃适应

4、⼩程序的双向绑定和Vue哪⾥不⼀样?

⼩程序直接使⽤this.data.key = value 是不能更新到视图当中的
必须使⽤ this.setData({ key ：value }) 来更新值

5、请谈谈小程序的生命周期函数？

• onLoad(昂搂德)：页面加载时触发
• onShow()：页面显示/切入前台时触发
• onHide()：页面隐藏/切入后台时触发
• onReady(昂芮滴)：页面初次渲染完成时触发
• onUnload(昂 昂楼的)：页面卸载时触发
• onPullDownRefresh(昂谱当 芮 fi屎)：下拉刷新的钩子函数
• onReachBottom(昂瑞驰波特闷)：上翻到底的钩子函数

6、⼩程序怎么实现下拉刷新？

⽅案 ⼀ ：

在 app.json 中 将 enablePullDownRefresh【嗯a波 蒲当 芮 fi屎】设为true, 开启全局下拉刷新。
或者在 组件 json中 enablePullDownRefresh设为true, 开启单组件下拉刷新。

⽅案⼆：

scroll-view ：使⽤该滚动组件 ⾃定义刷新，通过 bindscrolltoupper(版的死课肉吐破) 属性， 当滚动到顶部左边，会触发 scrolltoupper【死课肉吐破】事件，利⽤这个属性来实现下拉刷新功能。

7、bindtap和catchtap区别？

相同点：

都是小程序中的点击事件。

不同点：

bindtap 【办的泰普】不会阻⽌冒泡， catchtap 可以阻⽌冒泡。(开吃特泰普)。

8、⼩程序有哪些传递数据的⽅法？

方案一:使用全局变量

在 app.js 中的 this.globalData（阁楼博 怼特）中放⼊要存储的数据。在组件.js 头部中引⼊ const app（康搜爱普） = getApp(); 获取全局变量,然后使⽤ app.globalData.key 来进⾏获取和赋值。

方案二:使用路由

wx.navigateTo 和 wx.redirectTo（瑞迪 芮可图） 时，可以通过在 url 后拼接参数变量， 然后在⽬标⻚⾯的onLoad生命周期中,通过参数来获取传递过来的值。

方案三:使用本地存储

9、微信小程序中的路由及其区别？

wx.navigateTo(奶为 给特吐 )：保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面

wx.redirectTo( 蕊德 瑞可特 吐)：关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面

wx.switchTab(死维持 泰普)：跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面

wx.navigateBack()关闭当前页面，返回上一级页面或多级页面。wx.reLaunch()：关闭所有页面，打开应用内的某个页面 (芮老吃)

10、简述一下wx:if和hidden的区别？

1. wx:if 动态创建或销毁对应的UI结构
2. wx:if 条件为 false，什么也不做;为true时，才开始局部渲染
3. hidden 简单控制组件的显示与隐藏
4. wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。频繁切换的情况下，用 hidden 更好，运行时条件不大可能改变则 wx:if较好

11、app.json全局配置⽂件描述

pages : ⽤于存放当前⼩程序的所有⻚⾯路径
window : ⼩程序所有⻚⾯的顶部背景颜⾊，⽂字颜⾊配置
tabBar : ⼩程序底部的 Tab ,最多5个，最少2个

12、如何封装⼩程序请求

封装 wx.request 请求传递需要的参数，封装常⽤⽅法 POST , GET , 最后导出这些⽅法然后新建⼀个 api.js ⽂件，导⼊封装好的⽅法，然后调取相应的⽅法，传递数据。

总结：

在src目录中新建一个utils （噢 套死）目录，在目录中新建一个request.js,在request.js中首先获取整个小程序的实例来保证能调用wx所有方法，定义get和post等请求的方法，然后在get或者post请求的方法中设置wx.showToast(头斯特)，然后通过wx.request来实现get或者post请求，在success(森克 赛斯)中，关闭loading （楼顶），然后通过回调的形式来返回获取的数据

最后调用的时候使用require来引入

13、简述微信小程序的运行机制？

热启动 ：
假如⽤户已经打开了某个⼩程序，在⼀定时间内再次打开⼩程序的话，这个时候我们就不再需要重新启动了，这需要把我们的后台打开的⼩程序切换到前台来使⽤。

冷启动：
⽤户⾸次打开⼩程序或被微信主动销毁再次打开的情况，此时⼩程序需要重新加载启动。

14、⼩程序什么时候会主动销毁？

⼩程序在进⼊后台之后，客户端会帮我们在⼀定时间内维持我们的⼀个状态，超过五分钟会被微信主动销毁.官⽅没有明确说明什么时候销毁，不同机型表现也不⼀样，

2019年开发时：官⽅⽂档没有说明，但是经过询问⼀般指5分钟内2020年开发时：官⽅⽂档没有说明，测试安卓没有固定时间，内存⾜够的情况下，有时候⼀天了还在，有时候⼏分钟就没了

九、网络相关系列 ⭐

九、其他 ⭐⭐

---