首页 > 微信应用 >

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

微信应用
2024-10-16 07:06:01

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

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

小程序登录流程

第一步：wx.login获取用户临时登录凭证code

第二步：wx.getUserInfo获取加密过的数据encryptedData和解密参数iv

第三步：把步骤一、二中的code、encryptedData、iv传到开发者自己服务端第四步：服务端获取到code、encryptedData、iv之后用get方法请求如下微信接口个人项目，没有后端接口，回答了云开发中的登录流程

小程序页面声明周期

● onLoad() 页面加载时触发，只会调用一次，可获取当前页面路径中的参数。

● onShow() 页面显示/切入前台时触发，一般用来发送数据请求；

● onReady() 页面初次渲染完成时触发，只会调用一次，代表页面已可和视图层进行交互

● onHide() 页面隐藏/切入后台时触发，如底部 tab 切换到其他页面或小程序切入后台等

● onUnload() 页面卸载时触发，如 redirectTo 或 navigateBack 到其他页面时

小程序常用的框架

WeUIWeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。小程序开发中最常用到的一款框架，受广大开发人员的欢迎。美团小程序框架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 的基础上做了一些补充和修改

尺寸单位 rpxrpx 是响应式像素,可以根据屏幕宽度进行自适应。规定屏幕宽为 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、在子页面中调用封装的方法请求数据。