微信小程序基础面试题(2)

这篇是上一篇博客的进阶版噢，是结合了我自己的点餐小程序来说的

1.购物车支付后数据未清空

​问题：支付成功后， cartList 里的已支付项没删掉

​怎么修复这个问题

（支付成功后，只使用了生成订单并跳转到订单详情页的函数，所以已支付项没有删掉。应该在支付成功的回调中，使用filter和some的数组过滤方法(在两个数组里比较)， 菜品的ID和规格都进行比较，防止误删，从而准确删除全局购物车中已支付的菜品

filter：遍历数组，如果条件为true，保留，最终返回所有保留元素组成的新数组

如条件item.category=== catogory

some：判断数组里是否存在符合条件的元素，若存在，返回true，反之false

删除数组1中的数组二，要得到新的数组一，就是先用filter遍历1，再用some遍历2，看二里有没有元素也在1，如果在，就返回false(!有这个元素吗) ，让filter删去

）

2.地址删除时同时触发选择

​问题：删除和选择事件冒泡，导致删地址又自动选了该地址

事件冒泡是什么，怎么解决这个冲突

（是因为删除地址使用的是bindtap事件，选择是删除的父级元素，而bindtap不阻止向父级元素冒泡，所以也选中了选择该地址）

3.支付后页面栈残留

问题：支付成功后返回，还能看到支付弹窗

（使用的是navigateTo导航，所以没有关闭原本的页面。应该使用redirectTo）

4.登录页的账号密码校验逻辑是怎么写的

（监听用户输入-空值检验-输入密码和用户名校验-跳转首页

先建立两个变量username和password，然后使用this.setData实时更新页面，用来监听用户输入。）

5.空账号/空密码时的提示是如何实现的

（ 使用if （!username||!password），如果用户名或者密码有一项为空，则满足if条件，弹出弹框，提示用户输入密码或用户名 ）

6.登录成功后如何跳转到点餐首页？用了哪种跳转API？

（使用wx.switchTab，因为要跳转的首页是tab页面）

7.菜单页和菜品详情页之间是怎么传递菜品ID/数据的？

（先使用全局变量，构建一个全局菜品列表foodList，接着跳转页面时通过url传递菜品id，菜品详情页根据接受到的菜品id查找菜品详情

使用全局变量而不是url传参，原因一是能防止页面频繁跳转，二是要传递的菜品参数比较复杂，不适合使用url）

8.菜品详情页和购物车页之间是怎么传递菜品ID/数据的？

（）

9.购物车数据存在哪里？为什么用全局数据（ app.globalData.cartList ）？

（使用全局数据，原因一是各个页面都能访问，二是适合传递菜品这类复杂数据，三是访问速度快）

10.如何实现地址的增删改查？

（新增：在address页面点击“新增”，跳转到edit address页面，填写信息后保存，数据写入本地缓存。

查看/编辑：在address页面点击某个地址，使用data-* 属性传递地址ID，url携带地址ID跳转到edit address页面，在页面加载时读取对应地址数据，修改后点击保存，返回地址列表

删除：在address页面点击删除按钮，使用data-* 属性传递地址ID，从地址列表移除该地址，更新本地缓存。如果删除的是默认地址，清空选中的地址，刷新页面显示

）

11.结算页的地址选择、订单总价计算是怎么实现的？

（结算页confirm order加载时，通过wx.getStorageSync获取用户之前选择的地址，如果没有选择地址，跳转到地址选择页面。在地址选择页选择地址，使用wx.setStorageSync，该地址会被存入缓存，返回后会回到结算页

遍历购物车cartList中的每个商品，使用checked字段检验勾选的菜品，计算每个商品的价格乘数量，用reduce方法累加到总价，再加上配送费5元，最后toFixed（2）保留两位小数

）

12.轮播图（首页顶部）是用什么组件实现的？

swiper

13.支付流程是如何模拟的？

（打开自定义支付弹窗，监听密码输入，空值验证，再检验密码是否正确，若正确，保存订单并跳转）

14.菜品规格选择（小份/中份/大份、辣度）是怎么交互的？

（用户点击小份、中份或大份后，触发selectSpec，计算加价，更新选中规格。用户点击辣度后，触发selectTaste，更新选中辣度，更新最终价格）

15.你用了什么API生成随机密码？

（YesApi）

16.天气查询用了哪个API？（OpenWeatherMap）

17.发起网络请求用了什么方法？（uni.request ，支持多个平台

请求的接口地址 请求方式 请求数据

随机密码用了post方法，天气用了get方法

）

18.API Key 的管理（不要硬编码到代码里）

19.你的整体技术栈？

（我这个点餐小程序是纯微信原生开发(非跨端框架如uniapp) ，同时没有使用云开发或自建后端服务：

前端：用 WXML 写页面结构，WXSS 写样式，TypeScript 写交互逻辑，实现了登录、点餐、购物车、地址管理等页面

​数据存储：用微信小程序的 wx.getStorageSync / wx.setStorageSync 把地址、购物车等数据存在用户手机本地

​校验逻辑：手机号格式用正则表达式在前端直接校验，比如 /^1[3-9]\\d{9}$/ 验证手机号合法性

​工具：在微信开发者工具里调试）

20.uni-app 和原生微信小程序的开发区别是什么？

（语法不同，uni app使用的是vue.js，微信小程序使用的是wxml，wxss和js

目标平台不同，uniapp的目标平台包括iOS，安卓，H5，微信小程序，支付宝小程序等，原生微信小程序目标平台仅有微信

调试工具不同，uniapp使用的调试工具HbuilderX和浏览器，微信小程序使用微信开发者工具调试

渲染性能和包体积不同，原生小程序直接用微信底层渲染引擎，页面切换、长列表滚动更流畅，包体积较小

​uni-app：多了一层编译转换，复杂页面容易出现卡顿、延迟，包体积更大

）

21.为什么用 uni-app 开发？跨端优势是什么？

（支持平台多，代码复用率高，开发效率高，开发成本较低）

22.天气数据拿到后，怎么渲染到页面上？

（天气数据通过uni.request获取后，存入this.weatherData，vue自动把数据绑定到模板，把数据渲染到页面上）

23.如果API请求失败（比如网络错误、城市不存在），你怎么提示用户？

（通过uni.showToast给出不同的清晰提示，区分网络错误和业务错误，是网络请求失败还是城市名称输入错误，让用户知道发生了什么，而不是404这样的代码）

24.微信小程序/uni-app 里，修改数据后为什么要调用setData ？

（微信小程序的架构是双线程，Javascript和WXML数据隔离，所以需要通过setdata通信，实现页面更新

uniapp使用vue的响应式系统，数据变换自动监听，页面更新自动触发，不需要使用setdata

）

25.双向绑定是怎么实现的？（ v-model / bindinput，bindchange ）

（v-model是uniapp提供的语法糖，自动实现页面与数据双向绑定。原理是，当页面输入后，vue检测到input事件，vue自动执行赋值，数据变化，页面也变化

bindinput是小程序中用于监听输入框内容变换的事件绑定机制，当用户在输入框中输入内容时会实时触发回调函数

）

26.你觉得这个点餐/天气小程序还有哪些可以优化的地方？

（改bug ，页面名称使用小驼峰命名法更规范

分包操作，设置加载进度条

天气小程序：apikey保护

）

27.开发中遇到过困难是什么？怎么解决的？

（传参

）

28.在 uni-app 开发中，你遇到过哪些常见的网络请求问题？是如何解决的？

（在开发过程中，最常见的问题就是 API 请求失败。我遇到过一个典型的场景：调用第三方 API 生成随机密码时，总是返回 404 Not Found。

具体问题与解决方案：

参数名错误：API 要求的参数是 app_key，但我可能误写成 appKey，导致请求被拒绝。解决方法：严格对照 API 文档传递参数。

错误处理：请求失败后，需要给用户友好的提示。我使用了 uni.showToast() 展示错误信息）

29.为什么uniapp的js文件是export default开头的

（在 uni-app 中，.vue 文件是一个单文件组件（SFC），它需要通过 export default 将组件对象导出给 Vue 框架使用。这符合 ES6 模块化的规范，确保了组件可以在不同页面之间被正确引用和渲染。如果缺少 export default，Vue 无法识别该文件为有效组件，会导致运行时错误）