前段时间在面试web开发前端工程师，整理了一些web前端相关的面试题及答案，包含原生html、js、微信小程序、uni-app等。有些*案包答**含了一些个人见解在里面，仅供参考。
切图工具
Ps， sketch，figma
行内元素和块级元素的区别？
行内元素：不会独立出现在一行，单独使用的时候后面不会有换行符的元素。
块级元素：独立在一行的元素，他们后面会自动带有换行符。
行内元素转换成块元素，只要设置其display属性为block即可，display:block; 。块元素转换成行内元素，只要将其display属性设置为inline即可，display:inline。
（1）行内元素有：a b span img input select
（2）块级元素有：div p ul ol li dl dt dd h1-h6
（3）常见的空元素：br-换行，hr-水平分割线
浏览器（客户端）存储方式
SessionStorage， LocalStorage， Cookie 这三者都可以被用来在浏览器端存储数据，而且都是字符串类型的键值对。区别在于前两者的目的便于客户端存储数据。而 cookie 是网站为了标示用户身份而储存在用户本地终端上的数据（通常经过加密）。cookie 数据始终在同源（协议、主机、端口相同）的 http 请求中携带（即使不需要），会在浏览器和服务器间来回传递。
存储大小：
cookie 数据大小不能超过4 k 。
sessionStorage 和 localStorage 虽然也有存储大小的限制，但比 cookie 大得多，可以达到 5M 或更大。
有期时间：
1、 localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据。
2、 sessionStorage 数据在页面会话结束时会被清除。页面会话在浏览器打开期间一直保持，并且重新加载或恢复页面仍会保持原来的页面会话。在新标签或窗口打开一个页面时会在顶级浏览上下文中初始化一个新的会话。
3、 cookie 设置的 cookie 过期时间之前一直有效，即使窗口或浏览器关闭。
作用域：
1、 sessionStorage 只在同源的同窗口（或标签页）*共中**享数据，也就是只在当前会话*共中**享。
2、 localStorage 在所有同源窗口中都是共享的。
3、 cookie 在所有同源窗口中都是共享的。
浏览器端常用的存储技术是 cookie 、localStorage 和 sessionStorage。
img标签的title和alt是什么
title：解释信息，鼠标移上去显示的信息
alt：替换信息、图片不能显示时的信息
html5新特性
语义化标签：比如 article、footer、header、nav、section;
表单控件：calendar、date、time、email、url、search;
媒体元素video和audio元素
本地存储：localStorage sessionStorage
新的技术，websocket
前端需要关注哪些SEO搜索引擎
合理的title、description、keywords：搜素时对这三项的权重逐个减少，title强调重点，重要关键词不要超过两次，而且要靠前，不同页面title要有所不同，description高度概括页面内容，长度合适，不过分堆砌关键词，不同页面description有所不同，keywords列出重要关键词即可
语义化的html代码，符合W3C标准
提高网站速度
重要HTML代码放前面
重要内容不要用js输出：爬虫不会执行js获取内容
少用 iframe：搜索引擎不会抓取 iframe 中的内容
非装饰性图片必须加 alt
HTML和XHTML的区别
XHTML：重写了HTML规范，比HTML更严格
XHTML中所有的标记都必须有一个相应的结束标签；
XHTML所有标签的元素和属性的名字都必须使用小写；
所有的XML标记都必须合理嵌套；
所有的属性都必须用引号“”括起来；
把所有<和&特殊符号用编码表示；
给所有属性附一个值；
不要在注释内容中使用“--”；
图片必须使用说明文字。
文本超出部分显示省略号
单行：
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
多行：
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; // 最多显示几行
overflow: hidden;
前端页面有哪三层构成，分别是什么？作用是什么？
答案：分成：结构层、表示层、行为层。
分别是：HTML、CSS、JavaScript
结构层（structural layer）
由 HTML 或 XHTML 之类的标记语言负责创建。标签，也就是那些出现在尖括号里的单词，对网页内容的语义含义做出了描述，但这些标签不包含任何关于如何显示有关内容的信息。例如，P 标签表达了这样一种语义：“这是一个文本段。”
表示层（presentation layer）
由 CSS 负责创建。 CSS 对“如何显示有关内容”的问题做出了回答。
行为层（behaviorlayer）
负责回答“内容应该如何对事件做出反应”这一问题。这是 Javascript 语言和 DOM 主宰的领域。
描述从输入url到页面展示的完整过程
网络请求
解析
渲染
1)网络请求:
DNS查询（得到IP ) ，建立TCP连接（三次握手)
浏览器发起HTTP请求
收到请求响应，得到HTML 源代码
继续请求静态资源
解析HTML过程中，遇到静态资源还会继续发起网络请求
JS CSS图片视频等
关注:静态资源可能有强缓存，此时不必请求
2)解析:字符串->结构化数据:
HTML构建 DOM树
CSS构建CSSOM树( style tree )
两者结合，形成render tree
题外话：优化解析
CSS放在<head> 中，不要异步加载CSS
JS放在<body>最下面（或合理使用defer async )
<img>提前定义width height
3）渲染: Render Tree云制到页面
计算各个DOM的尺寸、定位，最后绘制到页面
遇到JS 可能会执行（参考defer async )
异步CSS、图片加载，可能会触发重新渲染
无样式内容闪烁（FOUC）Flash of Unstyle Content
@import导入CSS文件会等到文档加载完后再加载CSS样式表。因此，在页面DOM加载完成到CSS导入完成之间会有一段时间页面上的内容是没有样式的。
解决方法：使用link标签加载CSS样式文件。因为link是顺序加载的，这样页面会等到CSS*载下**完之后再*载下**HTML文件，这样先布局好，就不会出现FOUC问题。
JavaScript的数据类型
值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol（独一无二的值）。
引用数据类型：对象(Object)、数组(Array)、函数(Function)。注：Symbol 是 ES6 引入了一种新的原始数据类型，表示独一无二的值。
基本数据类型与引用类型在存储上有什么区别?
1.存储位置不同:基本数据类型：以栈的形式存储, 保存与赋值指向数据本身, 用typeof 来判断类型,存储空间固定。引用类型：以堆的形式存储, 保存于赋值指向对象的一个指针, 用instanceof 来判断类型 , 存储空间不固定。2.传值方式不同：基本数据类型按值传递，无法改变一个基本数据类型的值引用类型按引用传递，应用类型值可以改变
JS 中 == 和 === 区别是什么？
1、对于string,number等基础类型，==和===有区别
1）不同类型间比较，==之比较“转化成同一类型后的值”看“值”是否相等，===如果类型不同，其结果就是不等。
2）同类型比较，直接进行“值”比较，两者结果一样。
2、对于Array,Object等高级类型，==和===没有区别
进行“指针地址”比较。
3、基础类型与高级类型，==和===有区别
1）对于==，将高级转化为基础类型，进行“值”比较。
2）因为类型不同，===结果为false。
闭包的概念？优缺点？使用场景？
闭包的概念：闭包就是能读取其他函数内部变量的函数。
避免全局变量的污染
希望一个变量长期存储在内存中（缓存变量）
缺点：
内存泄漏（消耗）
常驻内存，增加内存使用量
使用场景：封装功能时(需要使用私有的属性和方法)，函数防抖、函数节流、函数柯里化、给元素伪数组添加事件需要使用元素的索引值。
造成内存泄漏的原因
意外的全局变量(在函数内部没有使用var进行声明的变量)
console.log
闭包
对象的循环引用
未清除的计时器
DOM泄漏(获取到DOM节点之后，将DOM节点删除，但是没有手动释放变量，拿对应的DOM节点在变量中还可以访问到，就会造成泄漏)
javascript中this指的是谁
this永远指向函数运行时所在的对象，而不是函数被创建时所在的对象。
普通的函数调用，函数被谁调用，this就是谁。
构造函数的话，如果不用new操作符而直接调用，那即this指向window。用new操作符生成对象实例后，this就指向了新生成的对象。
匿名函数或不处于任何对象中的函数指向window 。
如果是call，apply等，指定的this是谁，就是谁。
继承（6种方式）
原型链继承
构造函数继承
组合继承（原型链继承+构造函数继承）
原型式继承
寄生继承
组合寄生继承
document.onload和document.ready两个事件的区别
页面加载完成有两种事件，一是ready，表示文档结构已经加载完成（不包含图片等非文字媒体文件），二是onload，指示页面包含图片等文件在内的所有元素都加载完成。
Js的浅拷贝和深拷贝
浅拷贝只复制指向某个对象的指针，而不复制对象本身，新旧对象还是共享同一块内存。但深拷贝会另外创造一个一模一样的对象，新对象跟原对象不共享内存，修改新对象不会改到原对象。
什么是跨域？有什么方法解决跨域带来的问题？
跨域需要针对浏览器的同源策略来理解，同源策略指的是请求必须是同一个端口，同一个协议，同一个域名，不同源的客户端脚本在没有明确授权的情况下，不能读写对方资源。
受浏览器同源策略的影响，不是同源的脚本不能操作其他源下面的对象。想要操作另一个源下的对象是就需要跨域。
常用解决方案：
跨域资源共享（CORS）
nginx代理跨域
nodejs中间件代理跨域
jsonp跨域
解释什么是Json
(1)JSON 是一种轻量级的数据交换格式。
(2)JSON 独立于语言和平台，JSON 解析器和 JSON 库支持许多不同的编程语言。
(3)JSON的语法表示三种类型值，简单值(字符串，数值，布尔值，null),数组，对象
浏览器的线程
JS引擎线程：解释执行JS代码、用户输入、网络请求等
GUI线程（渲染线程）：绘制用户界面、与JS主线程互斥
HTTP网络请求线程：处理用户的GET、POST等请求，等拿到返回结果后，将回调函数推入事件队列
定时器触发线程：setTimeout、setInterval等待时间结束后，将执行函数推入事件队列中
事件处理线程：将click、mouse、input等交互事件发生后，将事件处理函数推入事件队列中
promise、async有什么区别
1、什么是Async/Await
async/await是写异步代码的新方式，使用的方式看起来像同步
async/await是基于Promise实现的，它不能用于普通的回调函数。
2、什么是promise
为了解决异步嵌套而产生，让代码更易于理解
区别：async/await让代码更像同步，进一步优化了代码
介绍各种异步方案
（1）回调函数（异步回调）
回调是一个函数被作为一个参数传递到另一个函数里，在那个函数执行完后再执行。
（2）promise
promise对象是commonJS工作组提出的一种规范，一种模式，目的是为了异步编程提供统一接口。
（3）async/await
（4）事件监听
采用事件驱动模式。任务的执行不取决于代码的顺序，而取决于某个事件是否发生。
（5）发布/订阅
XML与JSON的区别？
1) 数据体积方面。JSON相对于XML来讲，数据的体积小，传递的速度更快些。
2) 数据交互方面。JSON与JavaScript的交互更加方便，更容易解析处理，更好的数据交互。
3) 数据描述方面。JSON对数据的描述性比XML较差。
4) 传输速度方面。JSON的速度要远远快于XML。
DOCTYPE的作用？严格模式和混杂模式的区别？
！DOCTYPE告诉浏览器以HTML5标准解析页面，如果不写，则进入混杂模式
严格模式（标准模式）：以w3c标准解析代码
混杂模式（怪异模式）：浏览器用自己的方式解析代码，混杂模式通常模拟老式浏览器的行为，以防止老站点无法工作
HTML5 没有 DTD ，因此也就没有严格模式与混杂模式的区别，HTML5 有相对宽松的方法，实现时，已经尽可能大的实现了向后兼容(HTML5 没有严格和混杂之分)。
“use strict”的作用是什么？
use strict 出现在 JavaScript 代码的顶部或函数的顶部，可以帮助你写出更安全的 JavaScript 代码。如果你错误地创建了全局变量，它会通过抛出错误的方式来警告你。
消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为;
消除代码运行的一些不安全之处，保证代码运行的安全；
提高编译器效率，增加运行速度；
为未来新版本的Javascript做好铺垫。
"严格模式"体现了Javascript更合理、更安全、更严谨的发展方向，包括IE 10在内的主流浏览器，都已经支持它，许多大项目已经开始全面拥抱它。
另一方面，同样的代码，在"严格模式"中，可能会有不一样的运行结果；一些在"正常模式"下可以运行的语句，在"严格模式"下将不能运行。掌握这些内容，有助于更细致深入地理解Javascript，让你变成一个更好的程序员。
渐进增强与优雅降级
渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进，达到更好的用户体验。
优雅降级：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
Ajax使用
全称 ： Asynchronous Javascript And XML 所谓异步，就是向服务器发送请求的时候，我们不必等待结果，而是可以同时做其他的事情，等到有了结果它自己会根据设定进行后续操作，与此同时，页面是不会发生整页刷新的，提高了用户体验。
什么是window对象? 什么是document对象?
window对象代表浏览器中打开的一个窗口。
document对象代表整个html文档。
实际上，document对象是window对象的一个属性。
null，undefined的区别？
null表示一个对象被定义了，但存放了空指针，转换为数值时为0。
undefined表示声明的变量未初始化，转换为数值时为NAN。
typeof(null) -- object; typeof(undefined) -- undefined
new操作符具体干了什么呢?
创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型。
2) 属性和方法被加入到 this 引用的对象中。
3) 新创建的对象由 this 所引用，并且最后隐式的返回 this 。
如果想获取到页面中所有的checkbox用什么方法？
document.getElementsByTagName(tagName);
从输入 URL 到页面展示，这中间发生了什么？
用户输入url并回车
浏览器进程检查url，组装协议，构成完整的url
浏览器进程通过进程间通信（IPC）把url请求发送给网络进程
网络进程接收到url请求后检查本地缓存是否缓存了该请求资源，如果有则将该资源返回给浏览器进程
如果没有，网络进程向web服务器发起http请求（网络请求）
网络进程解析响应流程，如果是200，检查响应类型Content-Type，如果是字节流类型，则将该请求提交给*载下**管理器，该导航流程结束，不再进行；如果是html则通知浏览器进程准备渲染进程准备进行渲染
准备渲染进程；浏览器进程检查当前url是否和之前打开的渲染进程根域名是否相同，如果相同，则复用原来的进程，如果不同，则开启新的渲染进程；
传输数据、更新状态
http与https的区别
HTTP协议传输的数据都是未加密的，也就是明文的，所以使用HTTP协议传输隐私信息非常的不安全，为了保证隐私信息的安全传输。网景公司设计了SSL协议进行HTTP协议传输数据的加密，由此诞生了HTTPS。两者的区别在于：
1.https协议需要用到ca申请证书，一般来说是需要一定费用的。
2.http协议是超文本传输协议，信息属于明文传输，https是具有安全性的ssl加密传输协议
3.http和https使用的是两种完全不同的连接方式，用的端口也不一样，前者是80，后者是443
4.http的连接很简单，是无状态的；HTTPS协议是由HTTP+SSL协议共同构建的可以加密，身份认证的网络协议，安全性高很多。
微信小程序
请谈谈微信小程序主要目录和文件的作用？
project.config.js?1776807184.770 on：项目配置文件，用的最多的就是配置是否开启https校验
App.js?1776807184.770 ：设置一些全局的基础数据等
App.js?1776807184.770 on：底部tab，标题栏和路由等设置
App.wxss：公共样式，引入iconfont等
pages：里面包含一个个具体的页面
index.js?1776807184.770 on：配置当前页面标题和引入组件
index.wxml：页面结构
index.wxss：页面样式表
index.js?1776807184.770 ：页面的逻辑，请求和数据处理
请谈谈wxml与标准的html的异同？
都是用来描述页面的结构
都由标签，属性等构成
标签名字不一样，且小程序标签更少，单一标签更多
多了一些 wx:if 这样的属性以及{{}} 这样的表达式
WXML仅能在微信小程序开发者工具中预览，而HTML可以在浏览器内预览
组件封装不同，WXML对组件进行了重新封装
小程序运行在JS Core内，没有DOM树和window对象，小程序中无法使用window对象和document对象。
请谈谈WXSS和CSS的异同？
都是用来描述页面的样子
WXSS具有CSS大部分的特性，也做了一些扩充和修改
WXSS新增了尺寸单位，WXSS在底层支持新的尺寸单位rpx
WXSS仅支持部分CSS选择器
WXSS提供全局样式与局部样式
有没有封装过微信小程序的数据请求，是怎么封装微信小程序的数据请求的？
在根目录下创建util目录及api.js?1776807184.770 文件和apiConfig.js?1776807184.770 文件
在apiConfig.js?1776807184.770 封装基础的get，post和put，upload等请求方法，设置请求体，带上token和异常处理等
在api中引入apiConfig.js?1776807184.770 封装好的请求方法.根据页面数据请求的urls，设置对应的方法并导出
在具体的页面中导入或
将所有的接口放在统一的js文件中并导出
在app.js?1776807184.770 中创建封装请求数据的方法
在子页面中调用封装的请求数据
小程序页面之间有哪些（传值）传递数据的方法？
使用全局遍历实现数据传递
页面跳转重定向时，使用url带参数传递数据
使用组件模板 template传递参数
使用缓存传递参数
使用数据库传递参数
给html元素添加data-*属性来传递值，然后通过e.currentTarget.dataset或onload的param参数获取（data- 名称不能有大写字母，不可以存放对象）
设置id 的方法标识来传值，通过e.currentTarget.id获取设置的id值，然后通过设置全局对象的方式来传递数据
在navigator中添加参数数值
请谈谈小程序的生命周期函数
onLoad()页面加载时触发，只会调用一次，可获取当前页面路径中的参数
onShow()页面显示/切入前台时候触发，一般用来发送数据请求
onReady()页面初次渲染完成时触发，只会调用一次，代表页面已可和视图层进行交互
onHide()页面隐藏/切入后台时触发，如底部tab切换到其他页面或小程序切入后台等
onUnload()页面卸载时触发，如redirectTO或navigateBack到其他页面时
分析微信小程序的优劣势？
优势：容易上手，基础组件库比较全，基本不需要考虑兼容问题
开发文档比较完善，开发社区比较活跃，支持插件式开发
良好的户体验，无需*载下**，通过搜索和扫一扫就可以打开，打开速度快，安卓上可以添加到桌面，与原生APP差不多
开发成本比APP要低
为用户提供良好的保障（小程序发布，严格是审查流程）
劣势：限制较多，页面大小不能超过1M，不能打开超过5个层级的页面
样式单一，部分组件已经是成型的，样式不可修改，例如：幻灯片，导航
推广面窄，不能分享朋友圈，只能通过分享给朋友，附加小程序推广
依托与微信，无法开发后台管理功能
后台调试麻烦，因为api接口必须https请求且公网地址
真机测试，个别安卓和苹果表现迥异，例如安卓的定位功能加载很慢
微信小程序和H5的区别？
运行环境不同（小程序在微信运行，h5在浏览器运行）
开发成本不同（h5需要兼容不同的浏览器）
获取系统权限不同（系统级权限可以和小程序无缝衔接）
应用在生成环境的运行速度流程（h5需不断对项目优化来提高用户体验）
使用webview直接加载要关注那些事项？
必须要在小程序后台使用管理员添加业务域名
h5页面跳转至小程序的脚步必须是1.3.1以上
微信分享只可以是小程序的主名称，如要自定义分享内容，需小程序版本在1.7.1以上
h5的支付不可以是微信公众号的appid，必须是小程序的appid，而且用户的openid也必须是用户和小程序的
之前是如何管理小程序缓存的getstorage，setstorage？
简述下 wx.navigateTo(), wx.redirectTo(), wx.switchTab(), wx.navigateBack(), wx.reLaunch() 区别
wx.navigateTo() : 保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面
wx.redirectTo() : 关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面
wx.switchTab() : 跳转到 TabBar 页面，并关闭其他所有非 tabBar 页面
wx.navigateBack() : 关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层
wx.reLaunch() : 关闭所有页面，打开到应用的某个页面。
小程序运行机制
热启动 ：假如用户已经打开了某个小程序，在一定时间内再次打开小程序的话，这个时候我们就不再需要重新启动了，这需要把我们的后台打开的小程序切换到前台来使用。
冷启动：用户首次打开小程序或被微信主动销毁再次打开的情况，此时小程序需要重新加载启动。
小程序什么时候会主动销毁？
小程序在进入后台之后，客户端会帮我们在一定时间内维持我们的一个状态，超过五分钟后，会被微信主动销毁.
官方也没有明确说明 什么时候销毁， 在不同机型表现也不一样，
2019年开发时：时间官方文档没有说明，但是经过询问一般指5分钟内
2020年开发时：时间官方文档没有说明，实测安卓没有固定时间，内存足够情况下，有时候一天了还在，有时候几分钟就没了。
bindtap和catchtap的区别是什么
相同点：首先他们都是作为点击事件函数，就是点击时触发。在这个作用上他们是一样的，可以不做区分
不同点：他们的不同点主要是bindtap是不会阻止冒泡事件的，catchtap是阻值冒泡的
小程序调用后台接口遇到哪些问题？
1.数据的大小有限制，超过范围会直接导致整个小程序崩溃，除非重启小程序；
2.小程序不可以直接渲染文章内容页这类型的html文本内容，若需显示要借住插件，但插件渲染会导致页面加载变慢，所以最好在后台对文章内容的html进行过滤，后台直接处理批量替换p标签div标签为view标签，然后其它的标签让插件来做，减轻前端的时间。
小程序组件生命周期
created 组件实例化，但节点树还未导入，因此这时不能用setData
attached 节点树完成，可以用setData渲染节点，但无法操作节点
ready(不是onReady) 组件布局完成，这时可以获取节点信息，也可以操作节点
moved 组件实例被移动到树的另一个位置
detached 组件实例从节点树中移除
ReactJS
React组件分为哪两种，各有什么特点？
功能组件：这些类型的组件没有自己的状态，只包含渲染方法，因此也被称为无状态组件。他们可能从其他组件中获取数据作为道具（属性）。
类组件：这些类型的组件可以保存和管理自己的状态，并有一个单独的渲染方法来在屏幕上返回 JSX。它们也被称为有状态组件，因为它们可以具有状态。
React中如何更新组件的状态？
Setstate
React的生命周期包含哪些？
· constructor(props)：初始化 props 和 State。
· componentWillMount()：一旦属性被获取并且也初始化了 State，该方法将会被触发。该方法是在 DOM 被渲染之前触发的，并且可以用来初始化第三方脚本库、启动动画、请求数据，以及其他可能需要在组件被渲染之前执行的额外步骤。还可以在该方法中触发 setState 方法，在组件被初次渲染之前修改组件的 State。
在组件被渲染完毕之前调用 setState 方法将不会启动更新生命周期。在组件渲染完毕之后调用 setState 方法就会启动更新生命周期。
如果用户在 componentWillMount 方法中定义的回调函数内调用了 setState 方法，那么它将会在组件被渲染完成之后被触发，并且会启动更新生命周期。
· render()：只要父组件 render 被调用，其所有子组件的 render 都会被调用
· componentDidMount()：组件被渲染完毕之后触发，可以获取到 DOM。
· componentWillUnmount()：组件被卸载之前触发，在这里可以清除一些后台进程。
列举常见的npm命令
Npm命令中install全局安装使用哪个参数？
React与vue有什么区别？
· HTML 和 CSS
在 react 中，everything is JavaScript，不仅是 html 可以用 jsx 表示，连 css 也有 js 的解决方案。
Vue 的整体思想是拥抱经典的 Web 技术，并在其上进行扩展。使用 html，css 和 js 来构建模板。
在这个方面我觉得 vue 是在适应开发者，而 react 想要改变开发者。
同时，在组件作用域内的 css 上，react 是使用的 css-in-js 的解决方案或者是 css modules。而 vue 使用 scoped 来控制 css
· 规模
vue 的路由管理和状态管理由官方维护，而 react 则是把这些问题交给社区，创建了一个更为分散的生态系统，因此react的生态系统相对于 vue 更加繁荣。
· 原生渲染
由于两者都是使用的虚拟 dom 技术，因此都可以构建原生的安卓或者 ios 应用，例如 react-native 和 weex
Uni-app
Uniapp中的本地缓存
同步存储：uni.setStorageSync，获取：uni.getStorageSync
异步存储：uni.setStorage，获取：uni.getStorage
详细描述一下Uniapp的工作原理，它是如何做到跨平台开发的
Uniapp的工作原理是将Vue.js?1776807184.770 的模板语法转换为各个平台所支持的原生组件，再通过引擎的渲染器将其渲染到各个平台上。同时，Uniapp还提供了平台API以及对各平台的配置文件支持，使得开发者能够方便地在同一份代码下实现对不同平台的适配。
在Uniapp中，使用Vue.js?1776807184.770 的语法开发，同时通过Uniapp所提供的各平台API和配置文件适配各种平台的差异即可实现跨平台开发。例如，在编写页面的时候，可使用Uniapp提供的原生组件替代HTML标签，然后在编写样式时，可通过编写针对各平台的样式代码，使样式在各平台下呈现一致。
Uniapp 中的跳转方式
标签法：<navigator url="/pages/about/about" hover-class="navigator-hover">
<button type="default">跳转到关于页面</button>
</navigator>
跳转tabBar页面加open-type="switchTab"
页面跳转uni.navigateTo({url:})保留当前页面，只能打开非 tabBar 页面。uni.redirectTo({})关闭卸载当前页面，只能打开非 tabBar 页面
tabBar跳转uni.switchTab关闭所有非tabbar页面， 只能打开 tabBar 页面，不能url传参
uni.reLaunch({})关闭卸载所有页面，可以打开任意页面
应用的生命周期
onLaunch——当uni-app 初始化完成时触发（全局只触发一次）
onShow——当 uni-app 启动，或从后台进入前台显示
onHide——当 uni-app 从前台进入后台
onError——当 uni-app 报错时触发
onUniNViewMessage——对 nvue 页面发送的数据进行监听，可参考 nvue 向 vue 通讯
onUnhandledRejection——对未处理的 Promise 拒绝事件监听函数（2.8.1+）
onPageNotFound——页面不存在监听函数
onThemeChange——监听系统主题变化
页面的生命周期
onInit——监听页面初始化，其参数同 onLoad 参数，为上个页面传递的数据，参数类型为 Object（用于页面传参），触发时机早于 onLoad
onLoad——监听页面加载，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参），参考示例
onShow——监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
onReady——监听页面初次渲染完成。关注如果渲染速度快，会在页面进入动画完成前触发
onHide——监听页面隐藏
onUnload——监听页面卸载
onResize——监听窗口尺寸变化
组件的生命周期
beforeCreate——在实例初始化之后被调用。
created——在实例创建完成后被立即调用。
beforeMount——在挂载开始之前被调用。
mounted——挂载到实例上去之后调用。详见 关注：此处并不能确定子组件被全部挂载，如果需要子组件完全挂载之后在执行操作可以使用$nextTickVue官方文档
beforeUpdate——数据更新时调用，发生在虚拟 DOM 打补丁之前。
updated——由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
beforeDestroy——实例销毁之前调用。在这一步，实例仍然完全可用。
destroyed——Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
uni-app的用户体验如何
使用uni-app开发的微信小程序，和直接开发微信小程序相比性能没有明显差别，因为uni-app输出到微信时也是编译为wxml格式。uni-app编译到微信使用的是mpvue框架，这个是业内广泛使用的成熟框架。
uni-app打包成App后的体验和微信小程序一样好，在某些场景下更好；微信小程序的Hybrid应用框架是业内体验上的标杆，实践证明这种体验足以承载一线互联网开发商获得上亿用户。
uni-app内置预载机制，加载新页面速度极快，可实现无白屏极速渲染。
uni-app在App端还支持weex原生渲染（nvue），左右拖动长列表等复杂场景依然可实现高流畅性。
在Uniapp中，如何使用原生SDK以及插件
在Uniapp中，可通过uni-app plus的方式来集成原生SDK和插件。具体实现方式是，在manifest.js?1776807184.770 on文件中添加对应的插件设置，并在代码中调用相关API使用内置的SDK和插件。15. 描述一下在Uniapp中如何实现动态路由。在Uniapp中，可通过vue-router实现动态路由。具体实现方式是，在定义路由时，使用动态路由参数设置路由的路径，然后在组件中通过$route.params来获取路由参数，以便进行页面的动态渲染。