前端日记

面试官：说说微信小程序的生命周期函数有哪些？ 一、是什么跟vue、react框架一样，微信小程序框架也存在生命周期，实质也是一堆会在特定时期执行的函数 小程序中，生命周期主要分成了三部分： 应用的生命周期 页面的生命周期 组件的生命周期 应用的生命周期小程序的生命周期函数是在app.js里面调用的，通过App(Object)函数用来注册一个小程序，指定其小程序的生命周期回调 页面的生命周期页面生命周期函数就是当你每进入/切换到一个新的页面的时候，就会调用的生命周期函数，同样通过App(Object)函数用来注册一个页面 组件的生命周期组件的生命周期，指的是组件自身的一些函数，这些函数在特殊的时间点或遇到一些特殊的框架事件时被自动触发，通过Component(Object)进行注册组件 二、有哪些应用的生命周期 生命周期 说明 onLaunch 小程序初始化完成时触发，全局只触发一次 onShow 小程序启动，或从后台进入前台显示时触发 onHide 小程序从前台进入后台时触发 onError 小程序发生脚本错误或 API 调用报错时触发 onP ...

面试官：说说微信小程序的登录流程？ 一、背景传统的web开发实现登陆功能，一般的做法是输入账号密码、或者输入手机号及短信验证码进行登录 服务端校验用户信息通过之后，下发一个代表登录态的 token 给客户端，以便进行后续的交互,每当token过期，用户都需要重新登录 而在微信小程序中，可以通过微信官方提供的登录能力方便地获取微信提供的用户身份标识，快速建立小程序内的用户体系，从而实现登陆功能 实现小程序用户体系主要涉及到openid和code的概念： 调用wx.login()方法会生成code，将code作为参数传递给微信服务器指定接口，就可以获取用户的openid 对于每个小程序，微信都会将用户的微信ID映射出一个小程序 openid，作为这个用户在这个小程序的唯一标识 二、流程微信小程序登陆具体实现的逻辑如下图所示： 通过 wx.login() 获取到用户的code判断用户是否授权读取用户信息，调用wx.getUserInfo 读取用户数据 由于小程序后台授权域名无法授权微信的域名，所以需要自身后端调用微信服务器获取用户信息 通过 wx.request() 方法请求 ...

面试官：说说微信小程序中路由跳转的方式有哪些？区别？ 一、是什么微信小程序拥有web网页和Application共同的特征，我们的页面都不是孤立存在的，而是通过和其他页面进行交互，来共同完成系统的功能 在微信小程序中，每个页面可以看成是一个 pageModel，pageModel 全部以栈的形式进行管理 二、有哪些常见的微信小程序页面跳转方式有如下： wx.navigateTo(Object) wx.redirectTo(Object) wx.switchTab(Object) wx.navigateBack(Object) wx.reLaunch(Object) wx.navigateTo(Object)wx.navigateTo()用于保留当前页面、跳转到应用内的某个页面，使用 wx.navigateBack可以返回到原页面 对于页面不是特别多的小程序，通常推荐使用 wx.navigateTo进行跳转， 以便返回原页面，以提高加载速度。当页面特别多时，则不推荐使用 参数表如下所示： 流程图如下： wx.redirectTo(Object)重定向，当页面过多时，被保留页 ...

面试官：说说提高微信小程序的应用速度的手段有哪些？ 一、是什么小程序启动会常常遇到如下图场景： 这是因为，小程序首次启动前，微信会在小程序启动前为小程序准备好通用的运行环境，如运行中的线程和一些基础库的初始化 然后才开始进入启动状态，展示一个固定的启动界面，界面内包含小程序的图标、名称和加载提示图标。此时，微信会在背后完成几项工作： 下载小程序代码包 加载小程序代码包 初始化小程序首页 下载到的小程序代码包不是小程序的源代码，而是编译、压缩、打包之后的代码包 整体流程如下图： 二、手段围绕上图小程序的启动流程， 我们可以从加载、渲染两个纬度进行切入： 加载提升体验最直接的方法是控制小程序包的大小，常见手段有如下： 代码包的体积压缩可以通过勾选开发者工具中“上传代码时，压缩代码”选项 及时清理无用的代码和资源文件 减少资源包中的图片等资源的数量和大小（理论上除了小icon，其他图片资源从网络下载），图片资源压缩率有限 并且可以采取分包加载的操作，将用户访问率高的页面放在主包里，将访问率低的页面放入子包里，按需加载 当用户点击到子包的目录时，还是有一个代码包下载的过 ...

面试官：说说微信小程序的发布流程？ 一、背景在中大型的公司里，人员的分工非常仔细，一般会有不同岗位角色的员工同时参与同一个小程序项目。为此，小程序平台设计了不同的权限管理使得项目管理者可以更加高效管理整个团队的协同工作 以往我们在开发完网页之后，需要把网页的代码和资源放在服务器上，让用户通过互联网来访问 在小程序的平台里，开发者完成开发之后，需要在开发者工具提交小程序的代码包，然后在小程序后台发布小程序 二、流程关于发布的流程，主要分成了三个部分： 上传代码 提交审核 发布版本 上传代码在开发者工具中，可以点击代码上传功能： 然后就可以填写版本信息： 然后点击上传，编译器则会提示上传代码成功 提交审核代码上传完毕，就可以登陆微信公众号的官网首页，点击【开发管理】，查看应用详情： 提交审核过程需要填写审核信息，如下图： 提交审核成功之后如下图： 发布版本当审核通过之后，即可提交发布 发布成功之后则如下： 三、扩展上述是最简单的小程序代码发布的流程，通常的流程如下： 代码管理服务器上新建分支 开发测试新需求 测试完成后，将本地分支合并到 mast ...

面试官：说说微信小程序的支付流程？ 一、前言微信小程序为电商类小程序，提供了非常完善、优秀、安全的支付功能 在小程序内可调用微信的API完成支付功能，方便、快捷 场景如下图所示： 用户通过分享或扫描二维码进入商户小程序，用户选择购买，完成选购流程 调起微信支付控件，用户开始输入支付密码 密码验证通过，支付成功。商户后台得到支付成功的通知 返回商户小程序，显示购买成功 微信支付公众号下发支付凭证 二、流程以电商小程序为例 支付流程图如下所示： 具体的做法： 打开某小程序，点击直接下单 wx.login获取用户临时登录凭证code，发送到后端服务器换取openId 在下单时，小程序需要将购买的商品Id，商品数量，以及用户的openId传送到服务器 服务器在接收到商品Id、商品数量、openId后，生成服务期订单数据，同时经过一定的签名算法，向微信支付发送请求，获取预付单信息(prepay_id)，同时将获取的数据再次进行相应规则的签名，向小程序端响应必要的信息 小程序端在获取对应的参数后，调用wx.requestPayment()发起微信支付，唤醒支付工作台，进行支付 ...

面试官：谈谈你对BFC的理解？ 一、是什么我们在页面布局的时候，经常出现以下情况： 这个元素高度怎么没了？ 这两栏布局怎么没法自适应？ 这两个元素的间距怎么有点奇怪的样子？ …… 原因是元素之间相互的影响，导致了意料之外的情况，这里就涉及到BFC概念 BFC（Block Formatting Context），即块级格式化上下文，它是页面中的一块渲染区域，并且有一套属于自己的渲染规则： 内部的盒子会在垂直方向上一个接一个的放置 对于同一个BFC的俩个相邻的盒子的margin会发生重叠，与方向无关。 每个元素的左外边距与包含块的左边界相接触（从左到右），即使浮动元素也是如此 BFC的区域不会与float的元素区域重叠 计算BFC的高度时，浮动子元素也参与计算 BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然 BFC目的是形成一个相对于外界完全独立的空间，让内部的子元素不会影响到外部的元素 二、触发条件触发BFC的条件包含不限于： 根元素，即HTML元素 浮动元素：float值为left、right overflow值不为 visible，为 ...

面试官：css3动画有哪些？ 一、是什么CSS动画（CSS Animations）是为层叠样式表建议的允许可扩展标记语言（XML）元素使用CSS的动画的模块 即指元素从一种样式逐渐过渡为另一种样式的过程 常见的动画效果有很多，如平移、旋转、缩放等等，复杂动画则是多个简单动画的组合 css实现动画的方式，有如下几种： transition 实现渐变动画 transform 转变动画 animation 实现自定义动画 二、实现方式transition 实现渐变动画transition的属性如下： property:填写需要变化的css属性 duration:完成过渡效果需要的时间单位(s或者ms) timing-function:完成效果的速度曲线 delay: 动画效果的延迟触发时间 其中timing-function的值有如下： 值 描述 linear 匀速（等于 cubic-bezier(0,0,1,1)） ease 从慢到快再到慢（cubic-bezier(0.25,0.1,0.25,1)） ease-in 慢慢变快（等于 cubic-bezier( ...

面试官：说说你对盒子模型的理解? 一、是什么当对一个文档进行布局（layout）的时候，浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型（CSS basic box model），将所有元素表示为一个个矩形的盒子（box） 一个盒子由四个部分组成：content、padding、border、margin content，即实际内容，显示文本和图像 boreder，即边框，围绕元素内容的内边距的一条或多条线，由粗细、样式、颜色三部分组成 padding，即内边距，清除内容周围的区域，内边距是透明的，取值不能为负，受盒子的background属性影响 margin，即外边距，在元素外创建额外的空白，空白通常指不能放其他元素的区域 上述是一个从二维的角度观察盒子，下面再看看看三维图： 下面来段代码： 12345678910<style> .box { width: 200px; height: 100px; padding: 20px; }</style><div class="box" ...

面试官：元素水平垂直居中的方法有哪些？如果元素不定宽高呢？ 一、背景在开发中经常遇到这个问题，即让某个元素的内容在水平和垂直方向上都居中，内容不仅限于文字，可能是图片或其他元素 居中是一个非常基础但又是非常重要的应用场景，实现居中的方法存在很多，可以将这些方法分成两个大类： 居中元素（子元素）的宽高已知 居中元素宽高未知 二、实现方式实现元素水平垂直居中的方式： 利用定位+margin:auto 利用定位+margin:负值 利用定位+transform table布局 flex布局 grid布局 利用定位+margin:auto先上代码： 12345678910111213141516171819202122<style> .father{ width:500px; height:300px; border:1px solid #0a3b98; position: relative; } .son{ width:100px; ...