最新最全的前端面试题集锦之 微信小程序 篇（从基础到高级）

该内容主要整理关于小程序的相关面试题，其他内容面试题请移步至 最新最全的前端面试题集锦 查看。

一、技术类问题

1. 简单描述下微信小程序的相关文件类型？

微信小程序项目结构主要有四个文件类型：

1. wxml 模板文件，是框架设计的一套标签语言，结合基础组件、事件系统、可以构建出页面的结构；
2. wxss 样式文件，是一套样式语言，用于描述 WXML 的组件样式；
3. js 脚本逻辑文件，逻辑处理网络请求；
4. json 配置文件，小程序设置，如页面注册，页面标题及tabBar；
5. app.json 整个小程序的全局配置，包括：
   1. pages: [所有页面路径]
   2. 网络设置（网络超时时间）
   3. 界面表现（页面注册）
   4. window: {背景色、导航样式、默认标题}
   5. 底部tab等
6. app.js 监听并处理小程序的生命周期函数、声明全局变量；
7. app.wxss 全局配置的样式文件。

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

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

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

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

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

方案一：

1. 将所有的接口放在统一的js文件中并导出；
2. 在app.js中创建封装请求数据的方法；
3. 在子页面中调用封装的请求数据。

方案二：

1. 在根目录下创建utils目录及api.js文件和apiConfig.js文件；
2. 在appConfig.js 封装基础的请求方法，设置请求体，带上token和异常处理等；
3. 在api.js中引入apiConfig.js封装好的请求方法，根据页面数据请求的urls，设置对应的方法并导出；
4. 在具体页面导入。

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

1. 在app.js中使用全局变量实现数据传递；
2. 给元素添加data-*属性来传递值，然后通过e.currentTarget.dataset或onload的param参数获取。注：data-名称不能有大写字母、不可以存放对象；
3. 通过设置id的方法标识来传值，通过e.currentTarget.id获取设置的id的值，然后通过设置全局对象的方式来传递数值；
4. 页面跳转或重定向时，在navigator中使用url带参数传递数据；
5. 使用组件模板template传递参数；
6. 使用缓存传递参数；
7. 使用数据库传递参数。

6. 请谈谈小程序的双向绑定和vue的异同？

两者大体相同，但小程序直接使用this.data 属性是不可以同步到视图的，必须调用this.setData()方法。

1. 双向绑定：vue默认支持双向绑定；微信小程序需要借助data 来实现。
2. 取值：vue 中，通过 this.xxx 取值；小程序中，通过 this.data.xxx 取值。
3. 定义方法：小程序定义方法在 page.js 中直接定义即可，vue的方法通过写在method中进行定义。
4. 取变量：小程序通过 wx:for = "{ { lists }}"；Vue是 v-for = "item in lists"；
5. 调用data模型（赋值）：
   1. 小程序：this.data.item 需要调用 this.setData({item:1}) 进行赋值
   2. vue: this.item 调用 this.item = 1 赋值

小程序的双向绑定原则上来说并不是真正的双向绑定。如果在小程序 .js 文件中改变了某个变量的值，那么页面上的值并不会跟着改变；如果想要页面上的值也跟着改变的话，需要通过this.setData来操作。而 Vue 默认就是双向绑定，只改变了某个变量的值，页面上也会跟着改变。

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

全局生命周期app.js：

• onLaunch() 小程序初始化，只会调用一次，可获取当前页面路径中的参数；
• onShow() 页面显示或切入前台时触发，一般用来发送数据请求；
• onHide() 页面隐藏或切入后台时触发；
• onError() 页面发生错误时触发；
• onPageNotFound() 小程序要打开的页面不存在时触发，可以在此函数进行重定向操作。

小程序页面的生命周期：

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

小程序组件中的生命周期：
lifetimes：组件生命周期

• created() 在组件实例刚刚被创建时执行；
• attached() 在组件实例进入页面节点树时执行；
• ready() 在组件在视图层布局完成后执行；
• moved() 在组件实例被移动到节点树另一个位置时执行；
• detached() 在组件实例被从页面节点树移除时执行；
• error() 每当组件方法抛出错误时执行。

pageLifetimes：组件所在页面的生命周期

• show() 页面被展示时执行；
• hide() 页面被隐藏时执行；
• resize() 页面尺寸变化时执行。

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

• 小程序本质就是一个单页面应用，所有的页面渲染和事件处理，都在一个页面内进行，但又可以通过微信客户端调用原生的各种接口；
• 它的架构，是数据驱动的