前端日记

面试官：说说微信小程序的实现原理？ 一、背景 网页开发，渲染线程和脚本是互斥的，这也是为什么长时间的脚本运行可能会导致页面失去响应的原因，本质就是我们常说的 JS 是单线程的 而在小程序中，选择了 Hybrid 的渲染方式，将视图层和逻辑层是分开的，双线程同时运行，视图层的界面使用 WebView 进行渲染，逻辑层运行在 JSCore 中 渲染层：界面渲染相关的任务全都在 WebView 线程里执行。一个小程序存在多个界面，所以渲染层存在多个 WebView 线程 逻辑层：采用 JsCore 线程运行 JS 脚本，在这个环境下执行的都是有关小程序业务逻辑的代码 二、通信 小程序在渲染层，宿主环境会把wxml转化成对应的JS对象 在逻辑层发生数据变更的时候，通过宿主环境提供的setData方法把数据从逻辑层传递到渲染层，再经过对比前后差异，把差异应用在原来的Dom树上，渲染出正确的视图 当视图存在交互的时候，例如用户点击你界面上某个按钮，这类反馈应该通知给开发者的逻辑层，需要将对应的处理状态呈现给用户 对于事件的分发处理，微信进行了特殊的处理 ...

面试官：说说你对微信小程序的理解？优缺点？ 一、是什么2017年，微信正式推出了小程序，允许外部开发者在微信内部运行自己的代码，开展业务 截至目前，小程序已经成为国内前端的一个重要业务，跟 Web 和手机 App 有着同等的重要性 小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打开应用 也体现了“用完即走”的理念，用户不用关心是否安装太多应用的问题。应用将无处不在，随时可用，但又无需安装卸载 注意的是，除了微信小程序，还有百度小程序、微信小程序、支付宝小程序、抖音小程序，都是每个平台自己开发的，都是有针对性平台的应用程序 二、背景⼩程序并⾮凭空冒出来的⼀个概念，当微信中的 WebView 逐渐成为移动 Web的⼀个重要⼊⼝时，微信就有相关的 JS-SDK JS-SDK 解决了移动⽹⻚能⼒不⾜的问题，通过暴露微信的接⼝使得 Web 开发者能够拥有更多的能⼒，然⽽在更多的能⼒之外，JS-SDK的模式并没有解决使⽤移动⽹⻚遇到的体验不良的问题 因此需要设计⼀个⽐较好的系统，使得所有开发者在微信中都能获得⽐较好的体验： 快速的加载 更 ...

面试官：说说微信小程序的生命周期函数有哪些？ 一、是什么跟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()发起微信支付，唤醒支付工作台，进行支付 ...

面试官：说说你对算法的理解？应用场景？ 一、是什么算法（Algorithm）是指解题方案的准确而完整的描述，是一系列解决问题的清晰指令，算法代表着用系统的方法描述解决问题的策略机制 也就是说，能够对一定规范的输入，在有限时间内获得所要求的输出 如果一个算法有缺陷，或不适合于某个问题，执行这个算法将不会解决这个问题 一个程序=算法+数据结构，数据结构是算法实现的基础，算法总是要依赖于某种数据结构来实现的，两者不可分割 因此，算法的设计和选择要同时结合数据结构，简单地说数据结构的设计就是选择存储方式，如确定问题中的信息是用数组存储还是用普通的变量存储或其他更加复杂的数据结构 针对上述，可以得出一个总结：不同的算法可能用不同的时间、空间或效率来完成同样的任务 二、特性关于算法的五大特性，有如下： 有限性（Finiteness）：一个算法必须保证执行有限步之后结束 确切性（Definiteness）： 一个算法的每一步骤必须有确切的定义 输入（Input）：一个算法有零个或多个输入，以刻画运算对象的初始情况，所谓零个输入是指算法本身给定了初始条件 输出（Output）：一个算法有 ...

面试官：说说你对二分查找的理解？如何实现？应用场景？ 一、是什么在计算机科学中，二分查找算法，也称折半搜索算法，是一种在有序数组中查找某一特定元素的搜索算法 想要应用二分查找法，则这一堆数应有如下特性： 存储在数组中 有序排序 搜索过程从数组的中间元素开始，如果中间元素正好是要查找的元素，则搜索过程结束 如果某一特定元素大于或者小于中间元素，则在数组大于或小于中间元素的那一半中查找，而且跟开始一样从中间元素开始比较 如果在某一步骤数组为空，则代表找不到 这种搜索算法每一次比较都使搜索范围缩小一半 如下图所示： 相比普通的顺序查找，除了数据量很少的情况下，二分查找会比顺序查找更快，区别如下所示： 二、如何实现基于二分查找的实现，如果数据是有序的，并且不存在重复项，实现代码如下： 123456789101112131415161718192021function BinarySearch(arr, target) { if (arr.length <= 1) return -1 // 低位下标 let lowIndex = 0 // 高位 ...