2022总结分享一些基于小程序的面试题，让你面试稳操胜券！

程序员必备接口测试调试工具：立即使用
Apipost = Postman + Swagger + Mock + Jmeter
Api设计、调试、文档、自动化测试工具
后端、前端、测试，同时在线协作，内容实时同步

小程序登录流程

第一步：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、依托于微信，无法开发后台管理功能。

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

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