### [总结分享一些基于小程序的面试题，让你面试稳操胜券！](https://www.prosaas.cn/article/16336)

**Published:** 2021-12-10T02:12:49

**Author:** 5201314

**Excerpt:** 本篇文章给大家总结分享一些基于小程序的面试题（附解析），让你面试稳操胜券，希望对大家有所帮助！小程序登录流程第…

本篇文章给大家总结分享一些基于小程序的面试题（附解析），让你面试稳操胜券，希望对大家有所帮助！

![](https://img.php.cn/upload/article/000/000/024/61b2b76f1e11c597.jpg)

**小程序登录流程**

第一步：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 的基础上做了一些补充和修改

尺寸单位 rpx  
rpx 是响应式像素,可以根据屏幕宽度进行自适应。规定屏幕宽为 750rpx。如在 iPhone6 上，屏幕宽度为 375px，共有 750 个物理像素，则 750rpx = 375px = 750 物理像素

使用 @import 标识符来导入外联样式。@import 后跟需要导入的外联样式表的相对路径，用;表示语句结束

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

(1) 使用全局变量实现数据传递在 app.js 文件中定义全局变量 globalData , 将需要存储的信息存放在里面  
使用的时候，直接使用 getApp() 拿到存储的信息

(2) 使用 wx.navigateTo 与 wx.redirectTo 的时候，可以将部分数据放在 url 里面,并在新页面 onLoad 的时候初始化  
需要注意的问题：  
wx.navigateTo 和 wx.redirectTo 不允许跳转到 tab 所包含的页面  
onLoad 只执行一次  
(3) 使用本地缓存 Storage 相关

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

如果开发者拥有多个移动应用、网站应用、和公众帐号（包括小程序），可通过 unionid 来区分用户的唯一性，因为只要是同一个微信开放平台帐号下的移动应用、网站应用和公众帐号（包括小程序），用户的 unionid 是唯一的。换句话说，同一用户，对同一个微信开放平台下的不同应用，unionid 是相同的

**如何实现下拉刷新**

首先在全局 config 中的 window 配置 enablePullDownRefresh  
在 Page 中定义 onPullDownRefresh 钩子函数 , 到达下拉刷新条件后 , 该钩子函数执行, 发起请求方法  
请求返回后，调用 wx.stopPullDownRefresh 停止下拉刷新

**bindtap和catchtap的区别是什么**

相同点：首先他们都是作为点击事件函数，就是点击时触发。在这个作用上他们是一样的，可以不做区分

不同点：他们的不同点主要是bindtap是不会阻止冒泡事件的，catchtap是阻止冒泡的

**‘wx.navigateTo()’, ‘wx.redirectTo()’,‘wx.switchTab()’, ‘wx.navigateBack()’,'wx.reLaunch()'的区别**

wx.navigateTo()：保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面

wx.redirectTo()：关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面

wx.switchTab()：跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面

wx.navigateBack(): 关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层

wx.reLaunch()：关闭所有页面，打开到应用内的某个页面

**typeof 运算符和 instanceof 运算符以及 isPrototypeOf() 方法的区别**

typeof是一个运算符，用于检测数据的类型，比如基本数据类型null、undefined、string、number、boolean，  
以及引用数据类型object、function，但是对于正则表达式、日期、数组这些引用数据类型，它会全部识别为object；

instanceof同样也是一个运算符，它就能很好识别数据具体是哪一种引用类型。它与isPrototypeOf的区别就是  
它是用来检测构造函数的原型是否存在于指定对象的原型链当中；  
而isPrototypeOf是用来检测调用此方法的对象是否存在于指定对象的原型链中，所以本质上就是检测目标不同。

**call()和apply()的区别**

实际上，apply和call的功能是一样的，只是传入的参数列表形式不同。  
apply(this对象，\[参数1，参数2，…\]) 即使只有一个参数，也要写进数组里  
call(this对象，参数1，参数2，…) 它可以接受多个任意参数，第一个参数与apply一样，后面则是一串参数列表

**微信小程序怎样跟事件传值**

给 HTML 元素添加 data-\*属性来传递我们需要的值，然后通过 e.currentTarget.dataset 或 onload 的 param 参数获取。  
但 data -名称不能有大写字母, 不可以存放对象

**微信小程序与 vue 区别**

• 生命周期不一样，微信小程序生命周期比较简单  
• 数据绑定也不同，微信小程序数据绑定需要使用{{}}，vue 直接 : 就可以  
• 控制元素的显示和隐藏，小程序中，使用 wx-if 和 hidden 控制元素的显示和隐藏 ; vue 中，使用 v-if 和 v-show  
• 事件处理不同，小程序中，全用 bindtap(bind+event)，或者catchtap(catch+event) 绑定事件,vue：使用 v-on:event 绑定事件，或者使用@event 绑定事件  
• 数据双向绑定也不一样, 在 vue 中, 只需要在表单元素上加上 v-model, 然后再绑定 data 中对应的一个值，当表单元素内容发生变化 时，data 中对应的值也会相应改变，这是 vue 非常 nice 的一点。微信小程序必须获取到表单元素改变的值，然后再值赋给一个 data 中 声明的变量。

**哪些方法可以用来提高微信小程序的应用速度**

提高页面加载速度  
用户行为预测  
减少默认 data 的大小  
组件化方案

**怎么解决小程序的异步请求问题**

小程序支持大部分 ES6 语法  
• 在返回成功的回调里面处理逻辑 Promise 异步

**小程序 wxml 与标准的 html 的异同？**

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

**小程序简单介绍下三种事件对象的属性列表？**

基础事件（BaseEvent）  
• type:事件类型  
• timeStamp：事件生成时的时间戳  
• target：触发事件的组件的属性值集合  
• currentTarget：当前组件的一些属性集合  
自定义事件（CustomEvent）  
• detail  
触摸事件（TouchEvent）  
• touches  
• changedTouches

**小程序对 wx:if 和 hidden 使用的理解？**

• wx:if 有更高的切换消耗。  
• hidden 有更高的初始渲染消耗。  
• 因此，如果需要频繁切换的情景下，用 hidden 更好，如果在运行时条件不大可能改变则 wx:if 较好

**微信小程序与 H5 的区别**

运行环境的不同 : 传统的 HTML5 的运行环境是浏览器，包括 webview，而微信小程序的运行环境并非完整的浏览器，是微信开发团队基于浏览器内核完全重构的一个内置解析器，针对小程序专门做了优化，配合自己定义的开发语言标准，提升了小程序的性能。  
• 开发成本的不同 : 只在微信中运行，所以不用再去顾虑浏览器兼容性，不用担心生产环境中出现不可预料的奇妙 BUG  
• 获取系统级权限的不同

**app.json 是对当前小程序的全局配置，讲述三个配置各个项的含义？**

• pages 字段 —— 用于描述当前小程序所有页面路径，这是为了让 微信客户端知道当前你的小程序页面定义在哪个目录。  
• window 字段 —— 小程序所有页面的顶部背景颜色, 文字颜色定义在这里的  
• tab 字段 —— 小程序全局顶部或底部 tab

**小程序 onPageScroll 方法的使用注意什么？**

由于此方法调用频繁，不需要时可以去掉，不要保留空方法，并且使用 onPageScroll 时，尽量避免使用 setData()，尽量减少 setData()的使用频 次。

**小程序视图渲染结束回调？**

使用 setData(data, callback)，在 callback 回调方法中添加后续操作代码

**小程序同步 API 和异步 API 使用时注意事项？**

wx.setStorageSync 是以 Sync 结尾的 API 为同步 API，  
使用时使用 try-catch 来查看异常，如果判定 API 为异步，可以在其回调方法 success、fail、 complete 中进行下一步操作。

**如何封装微信小程序的数据请求的？**

1、将所有的接口放在统一的 js 文件中并导出。 

2、在 app.js 中创建封装请求数据的方法。 

3、在子页面中调用封装的方法请求数据。

**小程序与原生 App 哪个好？**

小程序除了拥有公众号的低开发成本、低获客成本低以及无需下载等优势，在 服务请求延时与用户使用体验是都得到了较大幅度 的提升，  
使得其能够承载跟 复杂的服务功能以及使用户获得更好的用户体验。

**webview 中的页面怎么跳回小程序中？**

首先要引入最新版的 jweixin-x.x.x.js，然后

wx.miniProgram.navigateTo({
url: '/pages/login/login'+'$params'
})

**webview 的页面怎么跳转到小程序导航的页面？**

小程序导航的页面可以通过 switchTab，但默认情况是不会重新加载数据 的。若需加载新数据，则在 success 属性中加入以下代码即可：

**小程序调用后台接口遇到哪些问题？**

1、数据的大小有限制，超过范围会直接导致整个小程序崩溃，除非重启小程 序； 

2、小程序不可以直接渲染文章内容页这类型的 html 文本内容，若需显示要借住插件，但插件渲染会导致页面加载变慢，所以最好在后台对文章内容的 html 进行过滤，后台直接处理批量替换 p 标签 div 标签为 view 标签，然后其它的标签让插件来做，减轻前端的时间

**微信小程序的优劣势？**

优势：

1、无需下载，通过搜索和扫一扫就可以打开。 

2、良好的用户体验：打开速度快。 

3、开发成本要比 App 要低。 

4、安卓上可以添加到桌面，与原生 App 差不多。 

5、为用户提供良好的安全保障。小程序的发布，微信拥有一套严格的审 查流程，不能通过审查的小程序是无法发布到线上的。

劣势：

1、限制较多。页面大小不能超过 1M。不能打开超过 5 个层级的页面。 

2、样式单一。小程序的部分组件已经是成型的了，样式不可以修改。例 如：幻灯片、导航。 

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

4、依托于微信，无法开发后台管理功能。

【相关学习推荐：小程序开发教程】

以上就是总结分享一些基于小程序的面试题，让你面试稳操胜券！的详细内容，更多请关注知企PROSAAS其它相关文章！

**Categories:** 后端开发

---