uniapp陪诊小程序实战教程

陪诊这个场景，说复杂不算复杂，但页面层次和状态流转比多数 demo 要真实：首页要拉 banner 和医院列表，下单要串起服务选择与时间地点，订单页还要按状态切 tab、进详情看服务名称。用 uniapp 做一遍，能顺带把「一套代码跑小程序」这件事里那些容易踩的点过一遍。

技术栈与工程结构

项目基于 uniapp 搭建，最终产物面向小程序端。选它做这个题目的原因很直接：pages.json 管路由和窗口样式，条件编译处理平台差异，组件与页面写法接近 Vue 单文件组件，对已经写过 Vue 的人几乎没有学习成本。资料从「新建 uniapp 项目」这一步开始，而不是丢一个现成仓库让你自行脑补，意味着你能看到初始目录长什么样、manifest 里哪些配置跟小程序强相关、页面注册是怎么落到 pages.json 里的。这一点比直接给成品代码有用——成品代码能跑，但你不知道哪一行是必须的。

结构上属于典型的页面驱动型小程序：若干业务页面加少量公共组件，没有引入状态管理库。这个取舍适合陪诊这类体量，页面之间靠路由传参和本地缓存传递数据，够用且好读。

几处值得对照着写的实现

首页的 navBar 与胶囊位置计算是这个项目里最有工程价值的一段。小程序右上角胶囊按钮的位置各家机型不一致，想做出自定义导航栏必须拿到状态栏高度、胶囊上下边界，再反推内容区的安全高度。这类适配逻辑写一次能复用到所有自定义导航的项目里，视频里会讲到具体怎么取和怎么算，建议自己在真机上验证一遍数值。

首页 banner 轮播、医院列表渲染与跳转，是熟悉 swiper 组件、列表渲染和页面跳转传参的常规练习，但医院列表涉及数据来源与渲染时机，正好可以观察异步数据到位前后视图的差异。订单部分则更能体现业务感：列表页按状态切 tab，切换时数据如何筛选、是否复用同一份数据源，都会影响后续维护成本；订单详情里服务名称的显示，牵涉到详情接口返回结构与列表数据的字段对齐，是实际项目里最容易出现字段对不上的地方。

可以抽出来复用的模块

• 胶囊高度计算与自定义导航栏布局，可直接搬到任何小程序项目；
• 底部 tab 切换的订单列表容器，替换状态枚举即可复用；
• 列表页到详情页的传参约定，包括只传 id 还是传整条对象的选择；
• 请求封装与加载态处理，决定了页面代码是否干净。

建议在跟着做的过程中，把上面这些从业务代码里摘出来单独放一层，别让它们散在页面里。这是这份资料从「看着像教程」变成「能进项目」的关键一步。

建议的阅读与实践方式

不要按顺序把视频刷完再动手。更有效的方式是：先自己用 uniapp 起一个空白项目，跑通真机预览，确认编译链路没问题；然后针对每个功能点先尝试自己写，写不出来再看对应片段，看完立刻改一遍。陪诊项目的难度分布并不均匀，首页适配和订单状态切换是难点，banner、列表这类是热身，按难度分配时间比按顺序平均用力划算。

资料以视频为主、辅以一份文档说明，适合当作对照材料而不是唯一信息源。遇到 API 细节，回到 uniapp 官方文档核对，视频里的写法可能与版本更新后的推荐方式有出入，这种时候以官方为准，把差异记下来，本身就是一次有效的学习。