【前端面试宝典之我们踩过的坑】

写在前面

CSDN话题挑战赛第1期

• 活动详情地址：https://marketing.csdn.net/p/bb5081d88a77db8d6ef45bb7b6ef3d7f

• 参赛话题：前端面试宝典

• 话题描述：欢迎各位加入话题创作得小伙伴，如果我没有猜错得话，我觉得你是应该同我一样是一位前端人。如今前端在IT事业中的占比越来越重，已经成为不可缺少的部分，前端技术也是层出不穷，各种技术类、技术框架也蜂拥而出，前端面试的难度也随之增加，如果我们拥有一套前端面试宝典。如果你是应聘者：你就可以从容的solo面试官，如果你是面试官：你就可以将应聘者拷问到骨子里！
  总之我们大家一起将自己的面试经验以及学习到的知识点汇聚于此，形成一套体系的前端面试宝典。让读者无论是面试还是学习都能够有非常大的收获。就让我们携手共筑前端面试宝典吧！！！

• 创作模板：

题目一

关于小程序的一些坑

考点

考点1：小程序登录流程

考点2：小程序页面生命周期

考点3：小程序常用的框架

考点4：了解微信小程序吗？简述小程序的原理

考点5：小程序项目的主要目录文件作用

考点6：小程序的双向绑定和vue哪里不一样

考点7：小程序页面的生命周期函数

考点8：微信小程序的优劣势

答案

[小程序】小程序登录流程

第一步：wx.login获取 用户临时登录凭证code
第二步：wx.getUserInfo获取加密过的数据encryptedData和解密参数iv
第三步：把步骤一、二中的code、encryptedData、iv传到开发者自己服务端
第四步：服务端获取到code、encryptedData、iv之后用get方法请求如下微信接口
个人项目，没有后端接口，回答了云开发中的登录流程

[小程序]小程序页面声明周期

● onLoad() 页面加载时触发，只会调用一次，可获取当前页面路径中的参数。 
● onShow() 页面显示/切入前台时触发，一般用来发送数据请求； 
● onReady() 页面初次渲染完成时触发，只会调用一次，代表页面已可和视图层进行交互
● onHide() 页面隐藏/切入后台时触发，如底部 tab 切换到其他页面或小程序切入后台等
● onUnload() 页面卸载时触发，如 redirectTo 或 navigateBack 到其他页面时

小程序常用的框架

WeUI
WeUI 是一套同微信原生视觉体验一致的基础样式库，
由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。
小程序开发中最常用到的一款框架，受广大开发人员的欢迎。
美团小程序框架mpvue
官方介绍：mpvue是一个使用 Vue.js开发小程序的前端框架。框架基于 Vue.js核心，mpvue修改了 Vue.js的 runtime和 compiler实现，使其可以运行在小程序环境中，从而为小程序开发引入了整套Vue.js开发体验。

组件化开发框架wepy
官方介绍：组件化开发，完美解决组件隔离，组件嵌套，组件通信等问题,支持使用第三方 npm 资源，自动处理 npm 资源之间的依赖关系，完美兼容所有无平台依赖的 npm 资源包.
官方框架MINA
官方介绍：框架提供了自己的视图层描述语言 WXML 和 WXSS，以及基于 JavaScript 的逻辑层框架，并在视图层与逻辑层间提供了数据传输和事件系统，可以让开发者可以方便的聚焦于数据与逻辑上。

了解微信小程序吗？简述小程序的原理

微信?程序采?JavaScript、WXML、WXSS三种技术进?开发,本质就是?个单??应?，所有的??渲染和事件处理，都在?个??内进?，但?可以通过微信客户端调?原?的各种接?；

微信的架构，是数据驱动的架构模式，它的UI和数据是分离的，所有的??更新，都需要通过对数据的更改来实现；

?程序分为两个部分 webview 和 appService 。其中 webview 主要?来展现 UI ，appService用来处理业务逻辑、数据及接?调?。它们在两个进程中运?，通过系统层 JSBridge 实现通信，实现 UI 的渲染、事件的处理

小程序项目的主要目录文件作用

project.config.json 项目的配置文件，做一些个性化配置，例如界面颜色、编译配置等等；
app.json 当前小程序的全局配置，包括小程序的所有页面路径配置、界面表现、网络超时时间、底部tab等；
sitemap.json 配置小程序及其页面是否允许被微信索引；
pages 里面包含了一个个具体的页面；
wxml （WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构
wxss (WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件 样式
app.wxss作为全局样式，会作用于当前小程序的所有页面，局部页面样式
page.wxss仅对当前页面生效；
app.js 小程序的逻辑
js 逻辑处理，网络请求
json 页面配置

小程序的双向绑定和vue哪里不一样

小程序直接 this.data 的属性是不可以同步到视图的，必须调用：
this.setData({
// 这里设置
})

小程序页面的生命周期函数

onLoad 页面加载时触发。一个页面只会调用一次，可以在 onLoad 的参数中获取打开当前页面路径中的参数(监听页面加载)

onShow() 页面显示/切入前台时触发(监听页面显示)

onReady() 页面初次渲染完成时触发。一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互(监听页面初次渲染完成)

onHide() 页面隐藏/切入后台时触发。 如 navigateTo 或底部 tab 切换到其他页面，小程序切入后台等(监听页面隐藏)

onUnload() 页面卸载时触发。如 redirectTo 或 navigateBack 到其他页面时(监听页面卸载)

微信小程序的优劣势

优势 :

即用即走，不用安装，省流量，省安装时间，不占用桌面
依托微信流量，天生推广传播优势
开发成本比 App 低

缺点 :

用户留存，即用即走是优势，也存在一些问题
入口相对传统 App 要深很多
限制较多 , 页面大小不能超过2M , 不能打开超过10个层级的页面

扩展

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

WXSS 和 CSS 类似，不过在 CSS 的基础上做了一些补充和修改

写在最后

CSDN话题挑战赛第1期

• 活动详情地址：https://marketing.csdn.net/p/bb5081d88a77db8d6ef45bb7b6ef3d7f