uniapp 陪伴式诊断小程序教程

这是一套以 uni-app 为实现框架的陪诊类小程序实战资料，主题非常具体：围绕「陪诊」这一业务场景，把首页、医院列表、订单流程这条主线一步步做出来。它不属于那种泛泛讲语法的入门课，更接近一份可以边看边敲、对照自己项目改的工程记录。如果你的目标是搞清楚 uni-app 在真实业务里怎么写页面、怎么组织跳转和数据展示，这份资料值得拿来当参照物。

技术栈与整体定位

核心是 uni-app 一套代码多端运行的能力，配合小程序端的原生能力（导航栏、胶囊按钮、页面栈）来做适配。资料里能明显看到两条线并行：一条是 uni-app 的通用写法，比如页面结构、组件拆分、列表渲染；另一条是小程序特有的交互细节，比如自定义导航栏、胶囊位置计算这类很容易踩坑的地方。这种组合对已经会写 Vue、但没怎么碰过小程序的开发者比较友好，因为它把「框架通用能力」和「平台差异」放在同一个业务里对照着讲。

值得注意的是，课程直接把业务定成陪诊，而不是常见的商城或记账 demo。陪诊这个场景天然带出医院列表、服务项、订单状态这几类数据，页面之间的跳转关系也比较清晰，适合用来理解一个中小型小程序的结构，而不是被复杂的业务逻辑带偏。

项目结构与主线模块

从内容分布看，整个工程是围绕几个可复用模块推进的：首页的视觉与导航部分，包括 banner 轮播和自定义 navBar；医院相关的列表与跳转；订单相关的列表、tab 切换和详情展示。这几块基本覆盖了一个服务类小程序的主要交互面。

• 首页：banner 轮播是常见的组件复用点，navBar 与胶囊位置计算涉及不同机型的安全区域适配，属于小程序里必须亲手调一次的细节。
• 医院模块：列表渲染加页面跳转，是理解 uni-app 路由传参的典型入口。
• 订单模块：tab 切换与详情字段展示，能看出数据如何从列表流到详情页。

把这几块拆开看并不复杂，但串起来就是一条完整的主流程。建议在动手时先跑通首屏，再按医院、订单的顺序补，避免一开始就陷进导航栏适配里出不来。

可复用与可迁移的部分

这套资料真正的价值不在「陪诊」这两个字，而在实现方式能不能搬到别的项目上。banner 轮播、胶囊高度计算、列表到详情的跳转与参数传递、订单状态 tab，这几类代码在预约、家政、问诊、服务下单类小程序里几乎都能直接改字段复用。尤其是自定义导航栏那一块，很多开发者第一次做都会被状态栏高度和设备差异卡住，跟着走一遍比查文档印象深得多。

另外，把「医院」换成任意一类可检索的服务对象，把「订单」换成任意一种预约记录，业务骨架其实不用大改。这一点在做同类项目时比较实用。

建议的使用方式

不要当成连续剧一集集看完。更合适的节奏是：先建好项目跑通首屏，然后遇到导航栏、轮播、列表跳转这些点时，再对照相应章节逐个解决，边改边验证。文档截图可以作为结构参考，真正动手的部分还是要自己敲一遍，尤其是位置计算和页面传参这类只看不写很难记住的环节。

如果你正在做或准备做一个服务预约类小程序，这份资料更适合作为工程对照：平时卡在哪一块，就翻到对应模块看别人怎么组织页面和数据。它提供的是可参考的实现路径，而不是一套需要原样照搬的模板。