微信小程序2021年经典面试题总结

1.小程序与原生App哪个好？

小程序的优点：

基于微信平台开发，享受微信本身自带的流量，这个是最大的优势
无需安装，只要打开微信就能用，不占用用户手机内存，体验好
开发周期短，一般最多一个月可以上线完成
开发所需的资金少，所需资金是开发原生APP一半不到
小程序名称是唯一性的，在微信的搜索里权重很高
容易上手，只要之前有HTML+CSS+JS基础知识，写小程序基本上没有大问题；当然如果了解ES6+CSS3则完全可以编写出即精简又动感的小程序；
基本上不需要考虑兼容性问题，只要微信可以正常运行的机器，就可以运行小程序；
发布、审核高效，基本上上午发布审核，下午就审核通过，升级简单，而且支持灰度发布；
开发文档比较完善，开发社区比较活跃；
最近刚开放的牛x功能，新增webview组件，可以展示网页啦，这个比较爽；
支持插件式开发，一些基本功能可以开发成插件，供多个小程序调用；

缺点：

1.局限性很强，（比如页面大小不能超过1M。不能打开超过5个层级的页面。样式单一。小程序的部分组件已经是成型的了，样式不可以修改。例如：幻灯片、导航。）只能依赖于微信依托于微信，无法开发后台管理功能。

2.不利于推广推广面窄，不能分享朋友圈，只能通过分享给朋友，附近小程序推广。其中附近小程序也受到微信的限制

3.后台调试麻烦，因为API接口必须https请求，且公网地址，也就是说后台代码必须发布到远程服务器上；当然我们可以修改host进行dns映射把远程服务器转到本地，或者开启tomcat远程调试；不管怎么说终归调试比较麻烦。

4.前台测试有诸多坑，最头疼莫过于模拟器与真机显示不一致

5.js引用只能使用绝对路径，很蛋疼；基于安全性及MINA框架实现原理，小程序中对js使用做了很多限制，不能使用：new Function，eval，Generator，不能操作cookie，不能操作DOM；

原生App优点：

1、原生的响应速度快
2、对于有无网络操作时，譬如离线操作基本选用原生开发
3、需要调用系统硬件的功能（摄像头、方向传感器、重力传感器、拨号、GPS、语音、短信、蓝牙等功能）
4、在无网络或者若网的情况下体验好。

缺点：

开发周期长，开发成本高
需要下载

2.微信小程序主要目录和文件的作用？

project.config.json 项目配置文件，用得最多的就是配置是否开启https校验；
App.js 设置一些全局的基础数据等；
App.json 底部tab, 标题栏和路由等设置；
App.wxss 公共样式，引入iconfont等；
pages 里面包含一个个具体的页面；
index.json (配置当前页面标题和引入组件等)；
index.wxml (页面结构)；
index.wxss (页面样式表)；
index.js (页面的逻辑，请求和数据处理等)；

3.简述微信小程序原理？

小程序本质就是一个单页面应用，所有的页面渲染和事件处理，都在一个页面内进行，但又可以通过微信客户端调用原生的各种接口；
它的架构，是数据驱动的架构模式，它的UI和数据是分离的，所有的页面更新，都需要通过对数据的更改来实现；
它从技术讲和现有的前端开发差不多，采用JavaScript、WXML、WXSS三种技术进行开发；
功能可分为webview和appService两个部分；
webview用来展现UI，appService有来处理业务逻辑、数据及接口调用；
两个部分在两个进程中运行，通过系统层JSBridge实现通信，实现UI的渲染、事件的处理等。

4.请谈谈小程序的生命周期函数？

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

5.请谈谈wxml与标准的html的异同？

都是用来描述页面的结构；
都由标签、属性等构成；
标签名字不一样，且小程序标签更少，单一标签更多；
多了一些 wx:if 这样的属性以及 {{ }} 这样的表达式
WXML仅能在微信小程序开发者工具中预览，而HTML可以在浏览器内预览
组件封装不同， WXML对组件进行了重新封装，
小程序运行在JS Core内，没有DOM树和window对象，小程序中无法使用window对象和document对象。

6.请谈谈WXSS和CSS的异同？

都是用来描述页面的样子；
WXSS 具有 CSS 大部分的特性，也做了一些扩充和修改；
WXSS新增了尺寸单位，WXSS 在底层支持新的尺寸单位 rpx；
WXSS 仅支持部分 CSS 选择器；
WXSS 提供全局样式与局部样式

7.你是怎么封装微信小程序的数据请求的？

在根目录下创建http目录及api.js文件和http.js文件；
在http.js 封装基础的get, post 和 put， upload等请求方法，设置请求体，带上token和异常处理等；
在api.js中引入http.js封装好的请求方法，根据页面数据请求的urls, 设置对应的方法并导出；
在具体的页面中导入；
接口封装学习-推荐文章

8.小程序页面间有哪些传递数据的方法？

使用全局变量实现数据传递app.js
页面跳转或重定向时，使用url带参数传递数据
使用组件模板 template传递参数
使用缓存传递参数
使用数据库传递数据

9.简述微信小程序原理？

小程序本质就是一个单页面应用，所有的页面渲染和事件处理，都在一个页面内进行，但又可以通过微信客户端调用原生的各种接口；
它的架构，是数据驱动的架构模式，它的UI和数据是分离的，所有的页面更新，都需要通过对数据的更改来实现；
它从技术讲和现有的前端开发差不多，采用JavaScript、WXML、WXSS三种技术进行开发；
功能可分为webview和appService两个部分；
webview用来展现UI，appService有来处理业务逻辑、数据及接口调用；
两个部分在两个进程中运行，通过系统层JSBridge实现通信，实现UI的渲染、事件的处理等。

10.请谈谈原生开发小程序、wepy、uni-app、mpvue 的对比？

个人认为，如果是新项目，且没有旧的 h5 项目迁移，则考虑用小程序原生开发，好处是相比于第三方框架，坑少。
而如果有 老的 h5 项目是 vue 开发 或者 也有 h5 项目也需要小程序开发，则比较适合 wepy 或者 mpvue 来做迁移或者开发，近期看wepy几乎不更新了，所以推荐美团的mpvue，如果需要H5和app端，则首选uni-app，而如果如果团队前端强大，自己做一套框架也没问题。

11.小程序的发布流程（开发流程）

注册微信小程序账号
获取微信小程序的 AppID
下载微信小程序开发者工具
创建小程序项目
去微信公众平台配置域名
前后端代码的编写
手机预览体验
代码上传
提交审核
审核通过后发布

12.小程序授权登录流程。

用户点击授权调用wx.login获取临时code，传给后台解析code判断用户身份，在服务器查找用户是否注册过此小程序，如果注册则直接返回token请求数据，如未注册，根据业务需求用户手动注册或者静默无感注册，返回token
小程序登录授权学习-推荐文章

13.小程序支付如何实现？

1.小程序注册，要以公司的以身份去注册一个小程序，才有微信支付权限；
2.绑定商户号。
3.在小程序填写合法域
4.调用后台接口获取必要参数
5.调用wx.requestPayment({})发起微信支付
小程序支付-推荐文章

14.bindtap和catchtap的区别？

①bind事件绑定不会阻止冒泡事件
②catch事件绑定可以阻止冒泡事件

15.请谈谈小程序的生命周期函数

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

16.小程序与webview之间是怎么跳转的

小程序跳转到webview需要用到web-view标签然后通过web-view标签里的src属性跳转到webview页面
,小程序跳转webview必须要在小程序后台使用管理用户添加业务域名
webview跳转到小程序首先需要引入微信小程序库，然后使用wx. miniprogram.navigateTo()来跳转到小程序的页面，跳转tabbar页面可以使用wx. miniprogram.switchTab()来跳转到tabbar页面

17.小程序关联微信公众号如何确定用户的唯一性

可通过 unionid 来区分用户的唯一性，同一用户，对同一个微信开放平台下的不同应用，unionid 是相同的，使用wx.getUserInfo方法 withCredentials为true时，可获取encryptedData，里面有union_id.后端需要进行对称解密。