uniapp 陪伴式诊断小程序实战教程

陪诊类小程序看起来不复杂：几个列表、一个下单流程、一个订单状态。但真动手写，问题往往出在那些教程里一句带过的地方——胶囊按钮到底占了多少高度、自定义导航栏怎么对齐、轮播图在不同机型上为什么突然塌陷。这门课的主题正好卡在这些位置，所以这篇导读不打算告诉你"内容很全面"，而是先说你会在哪几个环节卡住。

先确认缺口：你是不是只会照抄页面结构

如果你已经能用 uniapp 跑通一个 tabBar 页面，模板语法、v-for、事件绑定都看得懂，但遇到下面几件事会停下来查资料，那这门课的推进节奏跟你比较匹配：

• 知道要用自定义导航栏，但说不清状态栏高度、胶囊位置、安全区三者怎么换算；
• 写过轮播，但是把示例代码搬过来，换个屏幕宽度就要调一次参数；
• 能把列表渲染出来，却没处理过点击某一项之后带着参数跳到详情页、再返回时列表还在原位置；
• 订单模块只会画静态页面，不清楚状态切换在前端该怎么组织。

反过来说，如果你连页面生命周期、组件传值都还没写过一遍，直接进这个项目会吃力——它默认你能读懂已有代码，而不是从语法讲起。

项目主线：一个陪诊下单流程被拆成了什么

整套内容围绕一个陪诊服务小程序展开，主线其实是三条并行的线。第一条是首页，涉及导航栏与胶囊的对齐、轮播、医院列表的展示与跳转；第二条是服务与订单，从下单到订单列表的 tab 切分，再到订单详情里服务名称这类字段的取用；第三条是移动端适配本身——同一套代码在不同机型上的表现差异。

值得留意的是它把「胶囊位置计算」单独拎出来讲。这不是炫技，而是 uniapp 做小程序时绕不开的一步：只要你想自定义顶部区域，就必须自己算出可用高度，否则刘海屏和普通屏会各错一版。这类地方恰恰是自学时最容易一知半解、上线后才被用户截图反馈的。

配套练习怎么用，别只看不写

这类项目课最大的浪费是"看完了"。建议按下面方式跟：

• 每看完一个功能段落，先关掉视频，自己把那一段重写一遍，卡住再回看；
• 导航栏和轮播这两块，刻意换一台模拟器机型验证，观察数值变化，把换算关系记下来；
• 列表到详情页的跳转，自己加一个字段并让它在详情页正确显示，检验是否真的理解了传参链路；
• 订单列表的 tab 显示，试着多造几条不同状态的数据，看切换时渲染有没有问题。

项目类内容的练习不在多，在于每写一段都能对上"为什么这么写"。如果某一步你只能记住结果、说不出原因，那就是还没过关。

看完之后，你应该能回答这几个问题

用这几个问题自查，比看目录有用：自定义导航栏时，状态栏与胶囊之间的可用高度是怎么得到的？轮播组件在窄屏下出现高度异常，你会从哪几个地方排查？从医院列表点进详情，参数是通过什么方式传递的，返回后列表状态为什么能保留？订单列表按状态分 tab，数据是一次请求全部拿回还是分开请求，各自的代价是什么？陪诊小程序和普通电商小程序在订单状态设计上有什么差别？

能顺畅答出四题以上，说明这个项目你算是做过一遍了；答不上来的那一题，对应的章节再回去补一次。补缺比通看更省时间。