陪诊这个题材，看起来是"做个挂号页面 + 订单列表"那么简单，真动手才会发现坑集中在几个地方：首页要自定义 navBar，得自己算胶囊按钮的位置；医院列表和科室、服务项之间是多层数据结构；订单要有状态流转，待接单、服务中、已完成在同一个列表里靠 tab 切换。这些不是 uniapp 语法问题，是"知道 API 但拼不出一个能跑的业务"的问题。这套教程的价值就在这里——它不铺开讲 uniapp 的全部能力，而是用陪诊这一个场景，把页面布局、组件封装、页面跳转传参、列表渲染与状态切换这些最容易卡住的地方走一遍。

先确认你缺的是哪一块

如果你已经能写 Vue 的模板语法和基本指令，但没做过小程序，那你的缺口主要在两端：一是小程序端的页面配置与生命周期，二是 uniapp 跨端时那些"写法一样、表现不一样"的细节。这门课从新建项目、跑起第一个页面开始，会把项目结构、页面注册、tabBar 配置这类基础配置过一遍，正好补上从 Web 到小程序的这层认知差。

如果你做过小程序但没碰过 uniapp，缺口就反过来了：你需要理解 uniapp 的条件编译、rpx 适配、以及组件与原生小程序的对应关系。教程里的自定义导航栏、轮播、列表跳转，都是观察这层映射的好样本。

如果你两样都会，只是没做过完整业务闭环，那重点看订单部分：从列表 tab 切换、订单详情字段展示，到服务名称怎么随数据变化渲染，这条链路是最接近真实项目的部分。

几个值得盯住的实现点

自定义导航栏与胶囊对齐。首页不是用默认导航栏，而是自己画一个。难点在于不同机型状态栏高度不同，胶囊按钮的 left、top、width 都要动态算。这个点学会了，后面所有需要自定义头部的页面都能复用。
首页轮播与数据驱动。轮播本身不难，难在图片、跳转链接、指示器样式都来自数据，而不是写死在模板里。做完这一步，你会更清楚"哪些该进 data、哪些该留在模板"。
医院列表与页面跳转传参。列表渲染配合点击跳详情，参数怎么带、详情页怎么接，是列表类页面的通用套路。陪诊场景下多了一层：医院之下还有科室和服务项目。
订单列表的 tab 状态切换。同一份数据按状态过滤显示，切换 tab 时列表要重新渲染且不能串数据。这个坑很多人第一次写都会踩。
订单详情的字段映射。服务名称、时间、金额这些字段从接口结构到页面展示，中间往往要做一层转换，教程里对这块有具体处理。

配套练习怎么做才不算白看

跟着敲一遍只是及格线。建议每看完一段就做一次迁移：把首页轮播的数据源换成自己造的假数据，把医院列表的跳转参数改成两个以上字段，把订单 tab 从三个状态加到四个。改动会逼你去读自己的代码，而不是复制粘贴。另外，胶囊位置计算那段最好在两种以上机型或模拟器尺寸下验证，否则你只是抄对了一个数字。

如果时间有限，优先保证订单列表和订单详情这两段能独立跑通。它们是业务闭环的核心，也是面试或转岗时最容易被追问的地方。

看完你应该能回答这些问题

uniapp 里自定义导航栏时，胶囊位置是怎么算出来的，为什么不能写死？
同一个列表页按状态切换 tab，数据过滤应该放在哪一层，为什么？
页面跳转传参有哪些方式，各自适合传什么类型的数据？
一个陪诊类小程序从首页到医院详情再到下单，数据是怎么一层层传下去的？

能把这几个问题讲清楚，这门课就没白看。如果其中某个问题你答不上来，那一段就值得再回去看一遍。

uniapp陪诊小程序实战教程

uniapp实战，打造陪诊小程序

编辑点评

实战导向，从项目搭建到功能实现，全面掌握uniapp开发技巧。

⭐ 编辑推荐

本教程通过uniapp框架，带你一步步打造陪诊小程序，涵盖页面布局、组件使用、数据交互等实战技能。

课程亮点

• uniapp框架实战

• 小程序开发全流程

• 实战项目驱动学习

课程目录

【CSDN-38895】uniapp陪诊小程序文档.png  [493.5 KB]
28、订单列表tab显示.mp4  [72.4 MB]
13、首页banner轮播效果实现.mp4  [133.6 MB]
16、医院列表显示和跳转功能.mp4  [102.2 MB]
10、胶囊位置计算和首页navBar显示效果-1.mp4  [111.7 MB]
3、新建uniapp项目和效果演示.mp4  [62.5 MB]
18、订单详情服务名称显示.mp4  [97.1 MB]
6、uniapp组件常规引入和easycom引入语法.mp4  [53.5 MB]
29、订单列表和状态显示.mp4  [81.4 MB]
23、完善服务下单页面和选择地址.mp4  [114.9 MB]
26、手机短信验证接口调用逻辑..mp4  [107.2 MB]
5、uniapp路由和菜单配置.mp4  [91.8 MB]
7、uniapp组件通信props和$emit和插槽语法.mp4  [69.4 MB]
17、订单详情页功能介绍.mp4  [26.1 MB]
27、下单扫码支付功能接口对接.mp4  [180.9 MB]
22、跨页面数据的传递.mp4  [72.8 MB]
2、HBuilder编辑器介绍和下载.mp4  [34.2 MB]
15、金刚区快捷入口功能实现.mp4  [66.4 MB]
4、uniapp如何使用vue3编写页面.mp4  [59.9 MB]
8、系统参数获取和navBar组件样式动态设置.mp4  [156.2 MB]
24、服务下单表单校验.mp4  [185.7 MB]
12、二次封装uni.request方法..mp4  [133.3 MB]
14、就业陪诊和护理陪护快捷入口实现.mp4  [85.0 MB]
9、页面栈获取和navBar跳转逻辑实现.mp4  [108.8 MB]
1、uniapp项目介绍和功能演示.mp4  [26.2 MB]
11、公告效果和utils封装与AppId注册.mp4  [111.7 MB]
19、就诊医院显示和默认选中.mp4  [82.7 MB]
21、陪诊服务人员数据获取.mp4  [81.2 MB]
25、手机号验证弹窗效果实现.mp4  [105.9 MB]
20、就诊时间显示.mp4  [32.3 MB]