这一篇主要是我结合自己的点餐小程序的问题，模拟面试官询问问题解决能力，重点是wxss和wxml，想看js的朋友可以看我主页前两篇～
28.实现微信小程序首页轮播图，需要涉及哪些文件和配置步骤？
（在home.wxml里编写轮播图结构swiper+swiper-item+image然后在home.wxss里编写轮播图样式）
29.小程序中引入图片资源时，路径配置需要注意什么问题？如何避免图片加载失败？（最好使用根目录绝对路径，如果是本地图片，图片需放在小程序项目目录内，不可引用本地绝对路径（如 C:/xxx.jpg ）或未配置的网络图片(需在小程序后台配置域名白名单)）
30.若小程序轮播图出现样式错乱（如宽高不一致、无法滑动），你会从哪些方面排查问题？（1. 结构完整性：检查 swiper 是否正确嵌套 swiper-item；2.样式冲突：查看WXSS中是否有其他样式覆盖轮播图样式（如 !important 、父容器 overflow:hidden overflow内容溢出裁剪，限制滑动）；3.尺寸配置：确认 swiper 和 image 是否设置了明确宽高（推荐 width:100% +固定 rpx 高度），避免高度塌陷）
31.你做的这个横向滚动菜品卡片，用的是什么组件？怎么实现的？（用的是微信小程序的 scroll-view 组件）
32.如果让你把菜品做成循环列表，不用写死3个，你会怎么做？（借助全局变量dishList，在wxml 用 wx:for=“{{dishList}}” 循环渲染）33.小程序页面路径只能用单斜杠 / 分隔目录（不能出现 pages//home/home 这种错误写法）
34.报错里 [ pages ] [ 4 ] 是什么意思？ （pages 数组是从 0 开始索引， [4] 就是第 5 个页面路径写错了）
35.你这个热门分类按钮是怎么布局的？（用 display: flex 实现横向排列，配合 gap 设置按钮间距，布局整齐且适配不同屏幕）
36.为什么用 view 不用 text（view 更适合做容器，方便加样式、点击事件、圆角、背景色； text 主要只用来放文字，布局和样式不如 view 灵活）
37.flex 布局里 gap 是干嘛的？ （用来设置子元素之间的间距，比写 margin 更简洁、不会出现最后一个元素多间距的问题）
38.你点击事件怎么写？为什么先不做跳转？（先绑定 bindtap 做点击交互，验证样式和状态切换；后期再加上页面跳转或数据传递，这样先做视觉再做逻辑，开发更清晰）
39.圆角、样式你是怎么写的？（用 border-radius 做圆角若宽高width和height相等，且border-radius为50%则为正圆）
40.按钮挤在一起 → 加 gap 解决样式不生效 → 检查类名是否写对文字和背景色不对齐 → 加内边距padding
41.你遇到过哪些 TypeScript 报错？怎么解决的？（遇到过类型不匹配、缺少类型定义、变量未定义这类报错。 我是通过给变量/函数加类型、定义接口 interface，把代码改成规范 TS 写法就解决了(接口是对结构的描述：它规定了一个对象/类必须包含哪些属性、方法，以及它们的类型)）
42.什么是 interface？你为什么用它？（接口interface 用来定义对象的结构和类型，比如规定每个菜品必须有 name、price等，代码更规范，TS 不会乱报错(TS的核心是类型约束，写代码时能帮助找到错误)）
43.你怎么把椭圆加号改成正圆的？原理是什么？（给按钮设置相同的宽高（ width: 50rpx; height: 50rpx; ），再加上 border-radius: 50%只有宽高一致时， 50% 圆角才能变成正圆，之前椭圆就是因为宽高不一样）
44.你为什么要改 white-space: normal 为 nowrap ？ （nowrap 会强制文字不换行，超出就显示省略号，导致标题被截断成“招牌…”；normal 使文字自动换行，文字会根据容器宽度换行，文字容易显得过于密集，不符合要求）
45.菜品项为什么要改成 align-items: flex-start ？（原来默认是居中对齐，标题换行后会和图片中间对齐，改成 flex-start 后，让图片和标题顶部对齐，和作业要求布局一致）
46.你用了什么单位？为什么不用 px？（用了 rpx 单位。小程序里 rpx 会根据屏幕宽度自动适配，不同手机显示大小一致，比 px 更适合移动端）
47.你做样式时遇到过什么问题？怎么解决的？（加号是椭圆 → 把宽高设为相同值，配合 border-radius: 50% 改成正圆标题换行显得密集 → 把 white-space: normal 改成 nowrap 不换行，用省略号显示换行后排版乱 → 用 align-items: flex-start 改成顶部对齐间距不协调 → 微调 margin / padding 让视觉更舒服）
48.你怎么保证不同手机上样式不崩？（用 rpx 做单位适配不同屏幕，flex 布局做自适应，避免固定 px 导致的错位）
49.你为什么不直接写内联样式，要写在 wxss 里？（内联样式 = 直接在标签里写 style 属性，只对当前这一个标签生效，它是页面上最直接、优先级最高的样式写法。写在 wxss 里更规范，方便复用和维护，可选的功能更多，内联样式耦合度高，改起来麻烦，团队协作也不方便）
50.你做页面布局主要用什么？（主要用 flex 布局，控制上下左右对齐、间距、位置）网页布局方式有哪些？（标准流(文档流) 元素按书写顺序依次排列浮动 脱标 定位 绝对定位absolute 相对定位relative 固定定位fixedflex (自适应布局) ）
51.你写页面时遇到过哪些样式问题？（元素位置不对 → 用 flex 调整对齐内容不显示 → 检查 wxml 结构和数据有没有样式不生效 → 检查类名、路径、语法有没有写错）
52.你写页面的思路是什么？（先写 wxml 结构 → 再写 wxss 样式 → 最后补 ts 数据，一步步来，哪里不对改哪里）
53.你平时怎么处理 TS 报错？（先看报错提示是哪一行、什么类型，对症下药）
54.你遇到过 TS 里接口类型不匹配的报错吗？怎么解决？（遇到过。比如 address.ts 错误用了别的页面的 PageData 接口，导致缺少字段报错。我把泛型类型去掉，用最简单的 Page 写法，绕开类型冲突就好了）
55.onLoad 的 options 为什么也要加类型？（onLoad(options)）options 代表从上一个页面传递过来的参数对象（TS 会检查参数类型，如果不写或写错就会报类型不匹配。给 options 加上正确类型，TS 就不会报错，代码更规范）
56.什么是泛型？你这里为什么要去掉？（泛型就是给 Page 指定 data 类型，用来约束数据。写法Page我这里因为类型冲突，暂时去掉泛型，先让代码正常跑，后续再规范类型）
57.遇到过 uni-app 的什么坑？（文件在微信开发者工具里运行时，背景页颜色总为白色，在app.vue里写page节点设置背景色，才使背景色变为蓝色）
58.小程序里表单（如 textarea）怎么拿到输入值？(confirm order的买家留言)（给标签绑定 bindinput 事件； 事件里用 e.detail.value 拿到输入；通过 this.setData({ remark: e.detail.value }) 更新 data）（e.detail.value e. event事件对象detail事件的详细信息 value：当前组件输入的最新值）
59.你这个热门分类点击跳转是怎么实现的？ （给四个分类按钮绑定 bindtap 事件，通过 data-type 传不同分类标识，在点击事件里拿到e.currentTarget.dataset.type。用 wx.switchTab 跳转到菜单页，跳转成功后，通过 getCurrentPages() 拿到 menu 页的实例，然后调用menu页的方法setCategory(type) ，把类型放进去。 拿到实例：跨页面控制因为wx.switchTab跳转 tabBar 页面时，不能直接在 URL 里传参）
60.你怎么判断用户点的是哪个分类？（给每个按钮加不同 data-type ： hot / set / drink / vege 。点击时从e.currentTarget.dataset 里取，再根据不同值做不同逻辑）
61.你遇到点击没反应怎么排查？（先看有没有写 bindtap ，再看 js 里有没有对应函数，接着打印 e.currentTarget.dataset 看有没有拿到值，最后检查跳转路径对不对、页面有没有在 app.json 注册）
62.小程序中 wx:for 怎么正确使用？如果遍历失败通常是什么原因？（基础用法： wx:for=“{{cartList}}” wx:key=“index” ，必须指定 wx:key 提升渲染性能。常见报错原因：数据源类型不对：遍历的不是数组（是 null/undefined/对象），导致循环不执行Key 值不唯一：没有用 wx:key 或 key 是重复值，导致列表不更新 排查技巧：在 wx:for 所在标签上用wx:if打印日志 console.log(item) 看数据是否传入）
63.防抖代码（防抖专门用来处理高频连续触发的场景，让函数只在最后一次触发后执行一次，避免资源浪费和逻辑混乱用户一边打字，页面一边自动展示匹配结果，这种高频触发的场景，才必须用防抖，手动点击搜索不需要）
