简介面向微信小程序开发者的医疗预约快速问诊页面模板源码适合需要快速搭建在线问诊、预约挂号类小程序的个人开发者、医疗机构或外包团队使用。压缩包共73个文件以JS逻辑脚本、JSON配置文件、WXML页面结构、WXSS样式表为主另含PNG、JPG图片素材整体仅1.09MB目录结构清晰便于按模块检索和二次开发。模板覆盖用户登录、预约挂号、在线咨询、电子病历等典型医疗服务场景并针对快速问诊做流程优化患者可先通过文字、图片等方式与医生初步沟通减少线下排队等待时间。界面采用蓝色医疗风格设计简洁明了兼顾数据安全与老年群体操作易用性。已有94人下载学习可作为学习小程序开发或快速上线医疗服务的实用起点。1. 蓝色医疗预约快速问诊的微信小程序页面模板先看懂再动手这份压缩包里的代码只摊开来有 ext.json、pages、app.json、project.config.json、app.js、utils、app.wxss、img 八个部分但“蓝色医疗预约快速问诊”这个主题需要的微信小程序页面模板骨架基本都在里面了。它的定位不是完整上线产品而是一套带医疗蓝视觉风格的工程底座页面路由、全局样式、工具函数、项目配置都按可运行的小程序工程组织好了。适合两类人一是没完整写过小程序、想拿一份真实工程对照着理解 pages 和 app.js 怎么配合的新手二是要快速交付医疗预约类 demo 的团队拿到手先替换接口域名再往 pages 里加业务页面。后面按“配置 → 页面流 → 全局逻辑 → 样式 → 改造技巧”的顺序拆每一步都给可以直接用的写法和参数。2. ext.json、project.config.json 与 app.json模板的配置地基2.1 ext.json第三方平台扩展配置多数情况下可以忽略ext.json 是微信小程序里比较容易被忽略的文件。它在普通独立开发场景下几乎不生效主要服务于第三方平台代开发模式比如服务商帮医疗机构做小程序时用同一份源码工程通过 extAppid 区分不同主体。ext.json 里常见的字段是 extEnable、extAppid、extPages、ext 自定义数据。模板带上它说明这份源码的原始交付路径可能是通过开发者工具第三方平台管理的自己下载后直接按普通小程序模式打开就行微信开发者工具会自动忽略不匹配的扩展配置。如果真机预览时提示 ext 相关错误优先检查开发者工具账号有没有加入对应第三方平台而不是改这个文件。2.2 project.config.json打开即跑的编译参数这个文件约束微信开发者工具打开项目时用哪套编译参数决定你双击导入后第一眼看到的工程状态。一套模板好不好用第一步就体现在 project.config.json 是否完整。以这类医疗模板常见的配置为例{ appid: touristappid, compileType: miniprogram, projectname: blue-medical-consult, setting: { es6: true, postcss: true, minified: true, urlCheck: false } }appid 在下载源码里通常是 touristappid 或占位符真机预览前要换成自己的 AppIDcompileType 固定为 miniprogram工具才会按小程序形态编译es6 表示把 ES6 转成 ES5低版本微信环境更安全urlCheck 关闭后开发阶段请求任意 HTTPS 域名都不拦等上线前再开回来不然真机总会报“不在以下 request 合法域名列表中”。这几个参数里最坑的是 urlCheck很多新手页面跳转正常、请求一进来就失败都是它没关掉或者后端证书配错导致请求直接被断。2.3 app.json页面路由注册与全局窗口配置app.json 是全工程的注册中心pages 数组最上面的路径就是小程序启动后第一个展示的页面。预约问诊这种模板第一个页面一般是服务首页下面按流程挂科室列表、医生详情、预约确认、问诊会话、个人中心。典型配置如下{ pages: [ pages/index/index, pages/clinic/list, pages/doctor/detail, pages/booking/confirm, pages/consult/room, pages/mine/index ], window: { navigationBarBackgroundColor: #1b6ef3, navigationBarTitleText: 快速问诊, navigationBarTextStyle: white, backgroundColor: #f5f7fb }, style: v2, sitemapLocation: sitemap.json }window 下的配置直接决定每个页面的原生导航栏长什么样常用字段如下字段取值作用navigationBarBackgroundColor16 进制颜色顶部导航栏背景色医疗模板常用蓝navigationBarTitleText字符串导航栏标题可在页面 json 里单独覆盖navigationBarTextStylewhite / black标题文字颜色深色导航栏用 whitebackgroundColor16 进制颜色窗口背景色下拉时露出的底色enablePullDownRefreshtrue / false是否开启全局下拉刷新导航栏标题建议在每个页面的 json 里单独配比如医生详情页叫“医生详情”问诊页叫“快速问诊”而不是全局写死。style 为 v2 时组件默认样式会变化模板的 wxss 是按 v2 调过的不要随意降级。sitemapLocation 指向 sitemap.json控制微信搜一搜能否索引小程序页面模板如果没有这个文件工具会提示补一个 allow all 的空配置即可。3. pages 目录与快速问诊流程的页面组织3.1 页面四件套与模板里的页面流pages 里每个页面由四个同名前缀文件组成.wxml 管结构、.wxss 管样式、.js 管逻辑、.json 管页面级配置。拆这套模板的顺序建议是先打开 pages/index 的 wxml把所有 bindtap 和 navigator 标签列出来事件名里通常能看到业务动词比如 goDetail、submitBooking、callDoctor顺着这些动词就能把整条问诊链路串起来。按“蓝色医疗预约快速问诊”这类模板的常见分法页面至少覆盖以下环节页面路径页面职责关键事件pages/index/index服务首页展示入口goClinic、goQuickConsultpages/clinic/list科室列表按科室过滤医生selectDept、loadDoctorspages/doctor/detail医生详情与排班bookDoctor、onTimeChangepages/booking/confirm预约信息确认submitBookingpages/consult/room在线问诊会话sendMessage、endConsultpages/mine/index我的预约与病历loadOrders、viewRecord拿到模板后先把页面顺序按这个流程理清再动手改 UI避免改到一半发现跳转目标页根本不存在。页面之间的跳转依赖 app.json 注册路径路径写错时控制台会报 page not found。3.2 跳转参数传递dataset 与 onLoad options预约问诊的页面跳转几乎都要带参数列表页要告诉详情页是哪个医生详情页要告诉确认页选了哪个时间段。模板里最常见的写法是在 wxml 上挂 data 属性再在事件处理函数里通过 dataset 取。看下面这段典型代码view classdoctor-card bindtapgoDetail>goDetail(e) { const id e.currentTarget.dataset.id; wx.navigateTo({ url: /pages/doctor/detail?id${id}fromquick_consult }); }列表项上>radio-group classtime-group bindchangeonTimeChange label wx:for{{timeSlots}} wx:keyvalue classtime-item radio value{{item.value}} checked{{item.checked}} color#1b6ef3 / text{{item.label}}/text /label /radio-groupradio-group 的 bindchange 事件返回的是 e.detail.value就是选中 radio 的 value 字符串。这里有个容易理解偏的地方value 只是一个前端标识真正提交预约时后端需要的是医生 ID、排班 ID、时间段这三个字段的组合所以页面数据里要有对应的 scheduleId不能只传一个时段 value 就完事。模板里的演示数据通常是把时段写死在 js 的 data 中接手后建议改成从接口拉取并给每个时段加上剩余号源数量无号时段直接把 radio disabled 掉。3.4 防重复提交预约按钮的提交锁问诊预约是资金和资源双向敏感的操作快速连点预约按钮会把同一单提交两次。小程序模板里经常忽略这个细节我在梳理这份模板时习惯先在确认订单页加一个提交锁submitBooking() { if (this.data.submitting) return; this.setData({ submitting: true }); // 这里调用 utils/request 提交预约 // success 或 fail 回调里再将 submitting 置回 false // 预约成功后走 wx.requestPayment 发起支付流程 }submitting 初始为 false点击后立即置 true按钮进入 loading 样式等接口返回再复位。这段逻辑不长但能避免大部分重复下单的问题。模板如果本身没写务必补上尤其是接真实后端之后重复订单会直接造成重复扣费的用户投诉。按钮上也建议用 disabled 或 loading 属性配合双保险。4. app.js 全局生命周期与 utils 工具函数登录态和请求入口4.1 app.js 里该放什么不该放什么app.js 是全局逻辑入口模板里一般只放 onLaunch、onShow 两种生命周期和 globalData。医疗预约场景需要在启动时恢复登录态和用户信息并把基础信息缓存到 globalData 供所有页面取用。典型结构如下App({ globalData: { baseUrl: https://api.example-med.com, token: , userInfo: null, systemInfo: null }, onLaunch() { const token wx.getStorageSync(token); const userInfo wx.getStorageSync(userInfo); this.globalData.token token || ; this.globalData.userInfo userInfo || null; } })globalData 里这几个字段基本是预约问诊模板的标配baseUrl 统一管接口域名token 管登录凭证userInfo 管用户展示信息systemInfo 供后续做导航栏适配和底部安全区计算。注意 globalData 不是响应式数据页面里改它不会触发视图更新登录完成后要通过回调、事件或重进页面的方式让各页面重新读取。模板里如果还有 code 换 token 的逻辑一般放在 utils 里而不是堆在 onLaunch 中启动路径越短加载页展示越干净。字段类型说明baseUrlstring接口基础域名测试与正式环境切换点tokenstring登录凭证请求头中使用userInfoobject/null用户昵称、头像、手机号等systemInfoobject/null窗口宽高、状态栏高度等4.2 utils 里的 Promise 请求封装多数模板的 utils 目录下有一个 request 工具把 wx.request 包成 Promise。这套模板如果没有现成的按下面这个方式补一个就够用function request({ url, method GET, data {}, header {} }) { const app getApp(); return new Promise((resolve, reject) { wx.request({ url: ${app.globalData.baseUrl}${url}, method, data, header: { Content-Type: application/json, Authorization: Bearer ${app.globalData.token}, ...header }, success(res) { if (res.statusCode 200 res.statusCode 300) { resolve(res.data); } else if (res.statusCode 401) { wx.navigateTo({ url: /pages/login/index }); reject(res); } else { wx.showToast({ title: 请求失败, icon: none }); reject(res); } }, fail(err) { wx.showToast({ title: 网络异常, icon: none }); reject(err); } }); }); } module.exports { request };url 只传业务路径baseUrl 统一拼好处是切换测试环境和正式环境时只改 app.js 一处header 里默认塞 token页面调用时不用每个请求手写401 统一跳登录页避免在当前页弹一个没有诉求的错误提示。模板业务页里常见的做法是配合 async/await 使用例如const res await request({ url: /clinic/list })在页面方法里标记 async 即可。需要注意 wx.request 的 success 回调只代表网络层有返回不代表业务成功业务 code 要自己在 resolve 前判断。模板给的演示数据多半是 mock 的接手后根据后端返回结构调整这里。4.3 app.wxssrpx 适配与全局样式app.wxss 里的样式作用于所有页面模板的“蓝色医疗”视觉基调就是在这里定义的。尺寸单位建议沿用 rpx750rpx 等于屏幕宽度设计稿按 750 宽出图时数值可以直接抄。一套典型的全局样式开头是这样page { background-color: #f5f7fb; font-size: 28rpx; color: #2b3a55; } .btn-primary { height: 88rpx; line-height: 88rpx; border-radius: 44rpx; background: linear-gradient(135deg, #1b6ef3, #47a0ff); color: #ffffff; text-align: center; }page 选择器作用于整个页面容器背景色和默认字号放这里页面 wxss 里只写差异部分。28rpx 对应 14px是正文的常规大小医疗场景面向中老年用户时建议正文字号提到 30rpx 以上。btn-primary 作为全局按钮样式在多个页面复用颜色渐变的方向和深浅直接体现“蓝色”主题后面要换主题色只需要搜 1b6ef3 全局替换。模板如果没有处理 iPhone 底部安全区运营一段时间会出现“我的”页底部按钮被 Home 条遮挡的问题在全局补一句padding-bottom: env(safe-area-inset-bottom)就能解决。这是让页面在不同机型下显示一致的关键也是响应式在小程序里最实际的一层。5. 模板改造最实用的三个技巧加载时序、导航栏与页面复用5.1 修改刚进入的加载页面“修改刚进入的加载页面”这个诉求在模板改造里出现频率很高大部分时候你要改的不是 loading 动画而是数据加载时序。小程序启动顺序是 app.js 的 onLaunch 先执行然后才轮到首页 onLoad 和 onShow。onLaunch 里如果是异步获取用户信息首页 onShow 读取 globalData.userInfo 时必然拿到 null。常见做法是让首页从本地缓存读onShow() { const userInfo wx.getStorageSync(userInfo); this.setData({ userInfo }); }首页 onShow 里用 wx.getStorageSync 直接读缓存而不是读内存中的 globalData这样规避了启动时序问题只有真正需要服务端下发的数据时才走 request 请求。查看加载过程时微信开发者工具自带的 Network 面板和页面的 onLoad 日志一一对应哪个请求阻塞了首页渲染一眼就能定位不需要额外接调试工具。5.2 微信小程序顶部导航栏高度适配模板如果使用自定义导航栏顶部高度在不同机型上差距明显尤其是带刘海的机型。微信提供了一组原生接口来计算胶囊按钮位置拿到后按公式算导航栏总高度const rect wx.getMenuButtonClientRect(); const system wx.getSystemInfoSync(); const navBarHeight (rect.top - system.statusBarHeight) * 2 rect.height;rect.top 是胶囊按钮到屏幕顶部的距离减去状态栏高度得到胶囊上下边距乘 2 再加胶囊自身高度就是自定义导航栏总高度。适配时把 padding-top 设为 statusBarHeight、导航栏容器高度设为 navBarHeight内容区就不会顶到状态栏。模板如果是默认导航栏不需要这段计算但一旦页面里出现悬浮按钮或吸顶筛选栏老套路就会变形这个公式可以直接复用。5.3 页面复用与主题替换预约问诊所涉及页面高度相似如果团队用的是 uni-app 或 Taro 这类跨端框架这套模板的页面划分可以直接参考但原生 wxml 不能直接搬进 vue 单文件组件事件绑定要换成 click、数据绑定保留双花括号语法页面生命周期也要换成对应框架的写法。如果继续走原生小程序把医生卡片这类高频展示块抽成 Component 比复制粘贴效率高得多。主题替换上先全局搜 app.wxss 里的主色 #1b6ef3 和辅助色 #47a0ff替换成新机构的品牌色再检查 tabBar 图片和导航栏背景色几分钟就能把蓝色医疗换成另一个视觉体系。改造模板最忌讳的就是页面还没摸清就大范围删文件先把 config 里的注册路径和 app.wxss 公共样式理干净再动页面主题替换时你会发现大部分工作已经被拆完了。本文还有配套的精品资源点击获取