小程序本地存储

wx.setStorage ,wx.getStorage，wx.removeStorage，wx.clearStorage

1. wx:setStorage(Object obj), 将数据存储在本地缓存中指定的key中。它会覆盖掉原来该key 对应的内容。

数据存储生命周期跟小程序本身一致，即除用户主动删除或超过一定时间被自动清理。否则数据一直可用。单个 key允许存储的最大数据长度为1MB, 所有数据存储上限为 10MB.
参数Object obj,见表：

属性	类型	默认值	必填	说明
key	string		是	本地缓存中指定的key
data	Object		是	需要存储的内容。只支持原生类型、Date、能够通过JSON.stringify() 序列化的对象
success	function		否	成功回调
fail	function		否	失败回调
complete	function		否	结束回调

例子：

  myset01(){wx.setStorage({data: "小程序项目开发",key: '01',success(res){console.log("==setStorage成功  res=="+JSON.stringify(res));}})},

这里设置key为"01"， data为"小程序项目开发" ，作为数据保存下来。

2. wx.getStroage()

wx.getStorage(Object obj)，从本地缓存中异步获取指定key 的内容。参数Object obj 见下表

属性	类型	必填	说明
key	string	是	本地缓存中指定的key
success	function	否	调用成功的回调
fail	function	否	调用失败的回调
complete	function	否	调用结束的回调

object.success 回调函数中参数res ，说明见下表

属性	类型	说明
data	Object/string	key对应的内容

例子：

  myget01(){var that = this;wx.getStorage({key: '01',success(res){that.setData({storage_data: res.data,})}})},

3. wx.removeStorage(Object obj)

从本地缓存中移除指定的key

  myremove01(){wx.removeStorage({key:'01',success(res){console.log("remove key 成功");},fail(res){}})},

实现效果如下图所示

4. wx.clearStorage()

清空所有缓存数据。

以下为示例代码

  myclear01(){wx.clearStorage({success(res){console.log("clearStorage 成功");},})},

原文链接微信小程序13__wx:setStorage和wx:getStorage 数据存取_109905418的博客-CSDN博客_wx.getstorage

数组from方法

参考 ES6-数组中的from()方法_正版蜀黍的博客-CSDN博客_数组from

求数组交集、并集、差集

参考参考面试题 - 求两个数组的并集、交集、差集_杏子_1024的博客-CSDN博客_求两个数组的并集

路由导航守卫

全局路由导航守卫

beforeEach 路由进入前，

beforeResolve 路由解决前，参数只有from，to，没有next

afterEach 路由进入后

路由独享守卫

beforeEnter 路由进入前

组件内导航守卫

beforeRouterEnter 路由进入前，可以使用vm代替this，指向当前组件实例

    beforeRouteEnter(to, from, next) {console.log("路由进入之前", this);// 路由进入之前 this 指向 window// 路由进入之后的回调  ,  返回组件实例next(vm => {console.log(vm);})},

beforeRouterUpdate 路由更新前，this指向当前组件实例

beforeRouteLeave 路由离开前，this指向当前组件实例

注意：只有组件内导航守卫this指向组件实例，其他的this都指向window

补充beforeRouteUpdate解决同组件跳转

        beforeRouteUpdate(to, from, next) {console.log("路由更新之前", this);//this指向 组件实例console.log(this.$route.query, to.query);//路由更新之前 通过 this.$route.query 拿 query参数 存在 滞后性,拿得是之前 老的// to.query  新的// 可以在这里重新发请求，拿数据，原因是路由变化之后会进入这里// 发请求拿数据语句next()},

MVVM和MVC

MVVM:model-view-viewmodel

MVVM模式使用数据双向绑定，model和view直接进行交互

MVVM是一种开发模式，它实现了视图和数据逻辑之间的分离，model模型指的是后端传递的数据，view视图指的是所看到的页面，viewmodel是连接视图view和模型model的桥梁，从而实现模型model到视图view的转化和视图view到模型model的转化，也就是我们常说的双向数据绑定，使用MVVM模型实现的前端框架有react和vue。

MVC：model-view-controller

MVC模式通过controller控制器协调model和view的交互，view传达指令到controller，controller完成业务逻辑后，要求model改变状态，model将新的数据发送到view，用户得到反馈，所有通信都是单向的。

for in for of forEach 的区别

forEach 不能使用break return 结束并退出循环

for in 和 for of 可以使用break return；

for in遍历的是数组的索引（即键名），而for of遍历的是数组元素值。

for of遍历的只是数组内的元素，而不包括数组的原型属性method和索引name

所以 for in 更适合遍历对象，for of 适合遍历数组或者类数组。

参考参考 forEach、for in、for of 三者对比 - 紫诺花开 - 博客园

微信小程序某个页面直接返回首页（微信小程序回退到首页）

微信小程序某个页面直接返回首页（微信小程序回退到首页）
打开小程序后，到三级页面后点击左上角的返回按钮，能够直接返回到首页

正常 A -> B -> C 都是通过 wx.navigateTo 跳转的，所以 wx.navigateBack 只能返回上一界面，如果要返回到A 界面就会出现 C -> B -> A 的效果。
如果想实现 A -> B -> C 当 C 点击返回时，实现直接 C -> A 这种效果，就只能A -> B 通过 wx.navigateTo 跳转，
B -> C 通过 wx.redirectTo 跳转，跳转触发后 B 页面就会被销毁， C 页面再返回 wx.navigateBack 就会直接到 A 了。

例如：

第一个页面采用navigateTo，

wx.navigateTo({url: '/pages/logs/logs',
})

在第二个页面中使用redirectTo。

wx.redirectTo({url: '/pages/test/test',
})

这里是重点：
在第三个页面点击回退时，会直接回到第一个页面
。(wx.redirectTo()跳转到新页面之后，会自动销毁上一个页面，在新页面点击返回按钮时，会直接回到上上一个页面)
这是相当于在这个回退过程中直接销毁第二个页面

原文链接 https://www.jianshu.com/p/13d4df871468?u_atoken=2f30d6d5-2900-459d-835c-df37f7b63301&u_asession=01jDQzGFXlZeDU3mpboPsqFqgR0qkdPL2hdLO2V46e7259Tq9wYM9ofuwyiSRnppEPX0KNBwm7Lovlpxjd_P_q4JsKWYrT3W_NKPr8w6oU7K-hDelzPALQPt7PYrZoxFMAymCvuFU2gNCRIRJqGpb9omBkFo3NEHBv0PZUm6pbxQU&u_asig=05ZlLDwAFXa4BVhn2Fh7CLo0qyrLtkBAnjdocB-SGbpvLcsd5RkP9hnnd2MMRaUCZpqZuYeKxqTgWARshkSJfhOLfezxMX1YFc6APKfFG9A4BdajeUhSqBjDrWJPwryUlOauNL9rYVA9vKeruyEwDtAQVhqDiV7ZKjDpHZ-28Dyif9JS7q8ZD7Xtz2Ly-b0kmuyAKRFSVJkkdwVUnyHAIJzSak1xUrevM0cUhWkIRPE7LXwHATfTGHpb4Vs-kGcAyab4DvBakBj6x1SID70OM96u3h9VXwMyh6PgyDIVSG1W8LdsWj2TdQH-CNLDsMxXGVMCiaxWNGs0SKRybKdVaVoe64E7PcuN_aU9Y9irltkOkdMZBFZ2YXRVmbgkJl2hRmmWspDxyAEEo4kbsryBKb9Q&u_aref=QF0a6GDYep895qHmCPyjUJMNDY4%3D

px、em、rem、rpx、vw、vh 用法与区别

px

px是像素。相对于长度单位。像素px是相对于显示器屏幕分辨率而言的。

特点：

1.IE无法调整那些使用px作为单位的字体大小

2.国外的大部分网站能够调整的原因在于其使用了em或者rem作为字体单位

3.Firfox能够调整px和em，rem，但是96%以上的中国网民使用IE浏览器（或者内核）

em

em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。

特点：

em的值不是固定的
em会继承父级元素的字体大小

注意：任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。

所以我们在写CSS的时候，需要注意两点：

1. body选择器中声明Font-size=62.5%；

2. 将你的原来的px数值除以10，然后换上em作为单位；

3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。

也就是避免1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em，那么在声明p的字体大小时就只能是1em，而不是1.2em, 因为此em非彼em，它因继承#content的字体高而变为了1em=12px。

rem

rem是css3新增的一个相对单位，相对于HTML根元素的字体大小。

这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。下面就是一个例子：

p {font-size:14px; font-size:.875rem;}

注意： 选择使用什么字体单位主要由你的项目来决定，如果你的用户群都使用最新版的浏览器，那推荐使用rem，如果要考虑兼容性，那就使用px,或者两者同时使用。

px 与 rem 的选择？

对于只需要适配少部分手机设备，且分辨率对页面影响不大的，使用px即可。

对于需要适配各种移动设备，使用rem，例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备。

rpx

rpx 是微信小程序解决自适应屏幕尺寸的尺寸单位。微信小程序规定屏幕的宽度为750rpx。

无论是在iPhone6上面还是其他机型上面都是750rpx的屏幕宽度，拿iPhone6来讲，屏幕宽度为375px，把它分为750rpx后， 1rpx = 0.5px。

微信小程序同时也支持rem尺寸单位， rem 规定屏幕的宽度为20rem, 所以 1rem = (750/20)rpx = 37.5 rpx

vw、vh

它们都是相对于父元素的宽高， vh 视窗高度，1vh等于视窗高度的1% ；vw 视窗宽度，1vw等于视窗宽度的1%

原文链接 px、em、rem、rpx 用法与区别_function__的博客-CSDN博客_rpx

剩余参数和展开运算符的区别

可以说写的很明白了剩余参数与展开运算符_凉风有信、的博客-CSDN博客_剩余参数

实现深拷贝的方法

递归
json.string(json.parse)
...展开运算符

参考参考实现深拷贝的几种方法_xiongfang1105的博客-CSDN博客_深拷贝的三种实现方式

浏览器如何设置小于8px的字体

safari,iphone 已经支持1px
android 1px
pc chrome 12px 最小

手机端可以这样直接写：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>移动端</title><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
</head>
<body>
<p style="font-size:1px">font-size:1px，这是1号字体</p>
<p style="font-size:2px">font-size:2px，这是2号字体</p>
<p style="font-size:3px">font-size:3px，这是3号字体</p>
<p style="font-size:4px">font-size:4px，这是4号字体</p>
<p style="font-size:5px">font-size:5px，这是5号字体</p>
<p style="font-size:6px">font-size:6px，这是6号字体</p>
<p style="font-size:7px">font-size:7px，这是7号字体</p>
<p style="font-size:8px">font-size:8px，这是8号字体</p>
<p style="font-size:9px">font-size:9px，这是9号字体</p>
<p style="font-size:10px">font-size:10px，这是10号字体</p>
<p style="font-size:11px">font-size:11px，这是11号字体</p>
<p style="font-size:12px">font-size:12px，这是12号字体</p>
<p style="font-size:13px">font-size:13px，这是13号字体</p>
<p style="font-size:14px">font-size:14px，这是14号字体</p>
<p style="font-size:15px">font-size:15px，这是15号字体</p>
<p style="font-size:16px">font-size:16px，这是16号字体</p>
</body>
</html>

pc端：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>PC端</title><style>/*html{-webkit-text-size-adjust:none;}*/.small-font{font-size: 12px;-webkit-transform-origin-x: 0;-webkit-transform: scale(0.33);}/*.smallsize-font {font-size:4px;}*/</style>
</head>
<body>
<p class="small-font smallsize-font">font-size:4px，这是4号字体</p>
<p style="font-size:12px">font-size:12px，这是12号字体</p>
</body>
</html>

原文链接浏览器如何设置小于8px的字体_姜无忧的博客-CSDN博客_css 字体8px

typescript数据类型有哪些

布尔类型（boolean）
数字类型（number）
字符串类型（string）
数组类型（array）
元组类型（tuple）
枚举类型（enum）
任意类型（any）
null 和 undefined
void类型
never类型

原文链接 https://www.jianshu.com/p/d1b3b5b37adf

这个介绍ts比较详细 https://www.jianshu.com/p/7dca038f609b

v2/v3响应原理区别

v2

Object.defineProperty 进行数据单个劫持

缺点：

数组：除了 push()，pop()，shift() , unshift() , splice()，sort()，reverse() 变动数据时可被vue检测到，其他都检测不到

对象：不能使用键值的方式添加，删除

1、push方法
2、pop() 方法用于删除并返回数组的最后一个元素。
3、shift() 方法用于删除数组的第一个元素，并返回第一个元素的值
4、unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。
5、splice() 方法向/从数组中删除元素/插入元素/替换元素，然后返回被删除/插入/替换的项目。
6、sort() 方法用于对数组的元素进行排序
7、reverse() 方法用于颠倒数组中元素的顺序

解决方法：

使用 Vue.set(object, key, value) 方法将响应属性添加到嵌套的对象上
Vue.set(vm.someObject, ‘b’, 2) 或者 this.$set(this.someObject,‘b’,2) （这也是全局 Vue.set 方法的别名）

v3

通过Proxy代理，进行数据整体劫持，没有以上缺点

Vue数据更新视图不更新如何解决

v2数据劫持的缺陷，使用vue.Set或者this.$set解决
vue执行异步DOM更新，使用Vue.nextTick(callback)解决
数据是深拷贝，使用Object.assign(）变成浅拷贝
vue多层循环动态改变数据后渲染的很慢或者不渲染，可在动态改变数据的方法，第一行加上this.$forceUpdate()

原文链接 Vue数据更新视图不更新的几种解决方案_大雄Obear的博客-CSDN博客_vue数组变化为什么视图不更新

this.$set三个参数的用法

Vue.$set(target,key,value)

target：要更改的数据源(可以是对象或者数组)
key：要更改的具体数据(可以是字符串和数字)
value ：重新赋的值
用法：向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。

注：Vue.set()在methods中也可以写成this.$set()

Vue.set()不光能修改数据，还能添加数据

data:{items:[{message:"Test one",id:"1"},{message:"Test two",id:"2"},{message:"Test three",id:"3"}]
},
var itemLen=this.items.length;
Vue.set(this.items,itemLen,{message:"Test add attr",id:itemLen});

原文链接 this.$set的参数和用法_沈行的专栏的博客-CSDN博客_$set参数

v-for中为何要使用key

参考参考 v-for中为什么要用key_归途风景111的博客-CSDN博客_vfor为什么使用key

Key在什么情况会提高渲染速度，什么情况不行？

在没有绑定key和模板简单的情况下，不使用Key反而会更快。

参考参考 Key在什么情况会提高渲染速度，什么情况不行？_忘言丶的博客-CSDN博客

vue模块说明

参考参考 vue中常用的几种import（模块、文件）引入方式，export，export default，全部/部分文件的导出/导入_asdfsdgfsdgfa的博客-CSDN博客

vue路由懒加载实现方式

我一般使用这种：

const Foo = () => import('../components/Foo')

可以参考这个，更详细 https://www.jb51.net/article/206486.htm 或者

https://www.jb51.net/article/162858.htm

关于后台管理

登录模块相关说明（前端控制权限） https://www.jianshu.com/p/e55bbb3eee9e

动态路由相关说明（后端控制权限） vue实现用户登录验证 + 权限验证 + 动态路由（左侧菜单栏） - 掘金

这个也可以

https://www.jianshu.com/p/e221c43d299f

前端面试总结之长沙五相关推荐

前端面试查漏补缺--(一) 防抖和节流
前言本系列最开始是为了自己面试准备的.后来发现整理越来越多,差不多有十二万字符,最后决定还是分享出来给大家. 为了分享整理出来,花费了自己大量的时间,起码是只自己用的三倍时间.如果喜欢的话,欢迎收藏 ...
前端面试查漏补缺--(二) 垃圾回收机制
前言本系列最开始是为了自己面试准备的.后来发现整理越来越多,差不多有十二万字符,最后决定还是分享出来给大家. 为了分享整理出来,花费了自己大量的时间,起码是只自己用的三倍时间.如果喜欢的话,欢迎收藏 ...
前端面试查漏补缺--(三) 跨域及常见解决办法
前言本系列最开始是为了自己面试准备的.后来发现整理越来越多,差不多有十二万字符,最后决定还是分享出来给大家. 为了分享整理出来,花费了自己大量的时间,起码是只自己用的三倍时间.如果喜欢的话,欢迎收藏 ...
前端面试查漏补缺--(十) 前端鉴权
前言本系列最开始是为了自己面试准备的.后来发现整理越来越多,差不多有十二万字符,最后决定还是分享出来给大家. 为了分享整理出来,花费了自己大量的时间,起码是只自己用的三倍时间.如果喜欢的话,欢迎收藏 ...
前端面试-综合问题版
一.基础 #1.1 HTML html5新标签有哪些 canvas.svg.webGL 你是如何理解 HTML语义化的,有什么好处前端需要注意哪些SEO? manifest.worker.socke ...
9月，水了几个大中厂前端面试的一些总结分享 | 掘金技术征文
写在前面工作吧,我觉得就像谈恋爱,不一定是找高富帅或者白富美,互相确认过眼神是对的人就可以~而面试的自信和对工资的要求,源于你过硬的基础和平时的思考.积累以及总结~ 8月底离职,其实是裸辞,当然大概 ...
置顶带滚动效果_前端面试：如何实现轮播图效果？
本文将实现如上所示的轮播图.源代码 (https://github.com/z1ming/AKJS/tree/master/%E8%BD%AE%E6%92%AD%E5%9B%BE%E6%95%88%E ...
前端面试常见逻辑题收集及分析
前端面试中常出现一些有趣的逻辑题,初见的时候有可能会手足无措,但实际多看几个题之后就会有一定的思考逻辑,有种打通任督二脉的感觉.以下是我个人面试经历以及网络上收集来的一些经典题目. 题目: 1.现有一 ...
前端对所有文件请求添加header_【前端面试必问】浏览器缓存原理？送你满分答案...
(本文适合所1-3年的前端阅读) 原文链接: http://blog.poetries.top/2019/01/02/browser-cache/ 一.浏览器缓存基本认识分为强缓存和协商缓存浏览器 ...
前端面试技巧和注意事项_前端面试百分之九十九过的技巧
2020最全的前端面试指南,一个多月 1.8w 字的面试经验积累,凭借它最终成功入职大厂-- 今年的金三银四刚好赶上疫情,很多大公司都停止招聘甚至裁员,想跳槽的小伙伴被打的措手不及. 需求减少要求肯定 ...

前端面试总结之长沙五

小程序本地存储

数组from方法

求数组交集、并集、差集

路由导航守卫

全局路由导航守卫

路由独享守卫

组件内导航守卫

补充beforeRouteUpdate解决同组件跳转

MVVM和MVC

for in for of forEach 的区别

微信小程序某个页面直接返回首页（微信小程序回退到首页）

px、em、rem、rpx、vw、vh 用法与区别

px

em

rem

px 与 rem 的选择？

rpx

vw、vh

剩余参数和展开运算符的区别

实现深拷贝的方法

浏览器如何设置小于8px的字体

typescript数据类型有哪些

v2/v3响应原理区别

v2

缺点：

解决方法：

v3

Vue数据更新视图不更新如何解决

this.$set三个参数的用法

v-for中为何要使用key

Key在什么情况会提高渲染速度，什么情况不行？

vue模块说明

vue路由懒加载实现方式

关于后台管理

前端面试总结之长沙五相关推荐

最新文章

热门文章

前端面试总结之长沙五

小程序本地存储

数组from方法

求数组交集、并集、差集

路由导航守卫

全局路由导航守卫

路由独享守卫

组件内导航守卫

补充beforeRouteUpdate解决同组件跳转

MVVM和MVC

for in for of forEach 的区别

微信小程序 某个页面直接返回首页（微信小程序回退到首页）

px、em、rem、rpx、vw、vh 用法 与 区别

px

em

rem

px 与 rem 的选择？

rpx

vw、vh

剩余参数和展开运算符的区别

实现深拷贝的方法

浏览器如何设置小于8px的字体

typescript数据类型有哪些

v2/v3响应原理区别

v2

缺点：

解决方法：

v3

Vue数据更新视图不更新如何解决

this.$set三个参数的用法

v-for中为何要使用key

Key在什么情况会提高渲染速度，什么情况不行？

vue模块说明

vue路由懒加载实现方式

关于后台管理

前端面试总结之长沙五相关推荐

最新文章

热门文章

微信小程序某个页面直接返回首页（微信小程序回退到首页）

px、em、rem、rpx、vw、vh 用法与区别