简介面向开发者的医院问诊微信小程序前端模板源码可用于快速搭建在线医疗咨询平台覆盖预约挂号、即时问诊、健康资讯与个人中心等业务模块适合前端工程师或小程序初学者借鉴实践。zip压缩包共508个文件、约894KB主要代码集中在js、wxss、wxml、json四类文件中分别承担逻辑控制、视觉样式、页面结构与配置管理png图标与svn-base记录便于资源复用和版本回溯整体目录按页面、组件与工具模块划分结构清晰、易裁剪。当前已有327人浏览/学习。其中既内置了用户登录、医生排班、会话界面等页面也随包附带加密与数据管理相关文件可支撑安全传输与数据存储的二次开发配合微信开发者工具即可预览调试。开发者可在此基础上扩展支付、AI分诊等功能将更多精力投入业务创新显著缩短项目从原型到上线的周期。1. 拿到医院问诊微信小程序模板源码下载前端的工作才刚开始这类模板在源码站、开源平台上随手就能翻到首页轮播、科室入口、医生列表、预约表单、问诊聊天界面排得整整齐齐下载解压就能在微信开发者工具里看到完整效果。但真正落地的医院问诊微信小程序模板源码下载只是第一步模板里的科室数组、排期字段、问诊状态大概率是写死的假数据后端接口、登录态、支付回调、隐私合规弹窗都等着前端来补。我的处理习惯是把它当成一份带 UI 的交互稿先拆目录、跑通构建再按接口文档一层层替换数据流。这套流程适合两类人手里有医院或诊所真实项目、需要快速起版的前端开发以及想给客户做演示原型、又不想从零写页面的开发者。下面按选型、本地运行、接口改造、发布细节四个环节讲透顺带把模板源码改造里最容易踩的几个坑标出来。2. 医院问诊小程序模板选型先看目录与模块依赖下载模板源码之前先花十分钟看工程结构因为医院问诊不是普通展示站核心其实是号源、就诊人和订单状态。从工程文件能快速判断出这是原生微信小程序还是 uni-app 工程、有没有云开发依赖、组件库是哪种这些直接决定你后续用哪条工具链。2.1 典型模板源码目录与医院问诊页面分布一套完整的问诊模板目录结构通常长这样├── project.config.json // 原生小程序的工程配置appid、编译设置 ├── app.js // 全局逻辑、登录态、全局变量 ├── app.json // 页面注册、tabBar、分包、window 样式 ├── assets/ // 图片、图标、SVG ├── components/ // carousel、doctor-card、empty-state 等公共组件 ├── pages/ │ ├── index/ // 首页轮播、科室入口、推荐医生 │ ├── dept/ // 科室列表与科室详情 │ ├── doctor/ // 医生详情、排期、简介 │ ├── appointment/ // 预约挂号日期、时段、就诊人选择 │ ├── consult/ // 在线问诊聊天、病历、医嘱 │ ├── pay/ // 支付结果与订单详情 │ └── profile/ // 我的、就诊人管理、问诊记录 ├── api/ // 接口定义与 mock 数据 ├── utils/ // date、format、request 封装 └── static/如果根目录没有project.config.json而是package.json、pages.json、manifest.json这类文件基本可以判定这是 uni-app 或 Taro 工程需要各自的工具链编译后才能导入微信开发者工具。目录树的价值在于页面全部堆在pages/下的模板改造成本低而页面分散在多个分包目录里的模板通常意味着业务已经做过一轮拆分你只需要往里填接口。比较模板还要看数据依赖这里给一张常见的模块对照表业务模块对应页面前端重点科室 / 医生展示dept、doctor列表渲染、筛选、搜索防抖预约挂号appointment日期时段选择、号源状态、重复提交防抖在线问诊consult聊天消息列表、会话状态机、图片上传订单支付pay支付参数生成、支付结果刷新就诊人管理profile表单校验、默认就诊人、身份证规则问诊记录record状态展示、医生处方、报告下载拿到模板以后把每个模块对应页面走一遍看哪些用到了wx.request或uni.request哪些是死在data里的静态数组。我一般用一个标准衡量模板价值它提供的是 page 结构还是完整的数据流。只看 page 骨架反而更好业务状态本身就要按医院 HIS 系统重写。2.2 从模板下载到使用工具链与依赖判断确定工具链之前做四步快速检查。第一步全局搜wx.request(的出现位置工程化程度高的模板会把接口全收敛到api/目录传统模板会在每个页面里散着写。第二步查usingComponents或package.json里的 dependencies医院问诊模板里常见 Vant Weapp、TDesign、ColorUI 三类组件库组件库决定 UI 定制成本。第三步搜索wx.cloud或cloud://如果模板绑定了云开发环境而你没有开通第一次编译就会抛环境错误先把相关代码注释掉再跑。第四步看api/目录下有没有mock.js之类的文件mock 数据越完整本地调试阶段越省事。判断完毕后用一句话记录技术栈组合比如「原生 wx.request Vant Weapp 无云依赖」。这句话就是你后续所有操作的地图。2.3 原生小程序与 uni-app 工程的判断表判断项原生微信小程序uni-app 工程工程配置project.config.jsonmanifest.json / pages.json页面注册app.json 的 pages 数组pages.json开发工具微信开发者工具直接导入HBuilderX 或 CLI 构建后再导入样式wxssscss/less 编译APIwx.*uni.构建后映射为 wx.在命令行里一条命令就能确认ls -la | grep -E project.config.json|src/pages.json|manifest.json|package.json出现project.config.json就是原生工程出现package.json且带有src/pages.json大概率是 uni-apppackage.json中 scripts 里带dev:weapp的则是 Taro。明确这一点再动手能避免把 Vue 文件直接拖进微信开发者工具、然后看着满屏编译报错发愣的尴尬。3. 用微信开发者工具跑通医院问诊模板的最小流程模板选型落地后本地跑通其实只有三步源码落地、工具导入、mock 数据替换。最容易卡住的不是代码而是路径、AppID 和工程类型这三个前置条件。3.1 原生模板导入时的 AppID 与编译设置源码下载解压后先别急着双击打开。路径里不能有中文和空格微信开发者工具对中文路径很敏感编译阶段常见invalid path都是这个原因。导入项目时如果还没有认证的小程序账号直接选「测试号」就能跑不影响前端开发有正式 AppID 的话写进project.config.json{ appid: wx1234567890abcdef, projectname: hospital-consult, compileType: miniprogram, setting: { urlCheck: false } }开发阶段把urlCheck设为 falsewx.request才能访问 http 接口上线前必须改回 true并在小程序后台配置合法域名否则真机请求直接失败。如果模板里带了cloudfunctionRoot而本地没有云环境编译前先把那一行删掉否则会拉着你走完一整套云开发初始化流程。第一屏跑通后做一次检查看app.json里pages数组第一位是不是你想要的首页。很多模板下载后的第一位是pages/splash/splash启动屏如果编译后出现空白页优先看 console 里的未注册页面报错以及tabBar.list中图标路径是否缺失。3.2 uni-app 模板怎么跑先构建再导入拿到 uni-app 版本的问诊模板时不要直接导入微信开发者工具微信侧识别不了.vue文件。先装依赖再构建npm install npm run dev:mp-weixindev:mp-weixin是 uni-app 的微信端开发模式产物默认输出到dist/dev/mp-weixin。微信开发者工具里导入这个产物目录即可源码目录里的改动会实时编译同步。如果用 HBuilderX直接「运行到小程序模拟器」前提是微信开发者工具开启了「设置-安全设置-服务端口」。这步常见的坑是样式不一致HBuilderX 内置浏览器里看到的横向布局、圆角效果是 H5 渲染结果小程序端 wxss 对部分 CSS 属性的处理不同真机表现以微信开发者工具和真机为准。3.3 没有后端时用 mock 让问诊模板先跑起来下载的模板多数不带后端我处理时习惯在 request 封装里加一个 mock 开关让所有页面在无后端状态下先转起来// api/request.js —— 本地联通用 mock 拦截 const MOCK_MODE true const mockData { /api/dept/list: [ { id: 1, name: 心血管内科, doctorCount: 12 }, { id: 2, name: 呼吸内科, doctorCount: 8 } ], /api/consult/status: (params) ({ status: params.orderId ? PROCESSING : WAIT_PAY }) } function request(options) { if (MOCK_MODE mockData[options.url]) { const data typeof mockData[options.url] function ? mockData[options.url](options.data) : mockData[options.url] return new Promise((resolve, reject) { setTimeout(() { resolve({ code: 0, data, msg: ok }) }, 200) }) } return new Promise((resolve, reject) { wx.request({ url: ${options.baseURL || }${options.url}, method: options.method || GET, data: options.data || {}, success: (res) resolve(res.data), fail: reject }) }) } module.exports { request, MOCK_MODE }MOCK_MODE打开时请求拦截从mockData里取数据值为函数时可以根据入参返回不同结果用来模拟预约状态、订单状态变化。200ms 延迟模拟弱网正好验证每个页面 loading 态是否正常。这里要提醒mock 数据里的字段名必须与后端真实接口文档保持一致否则后面联调时出现undefined你会花很长时间排查到底是模板问题还是数据问题。4. 前端把问诊模板改造成真实项目接口层、登录态与分包本地 mock 能看交互但交付给医院项目一定得换真接口。改造顺序我固定成三层统一请求模块、登录态、分包与页面数据流。按这个顺序改不会出现改到一半把页面写死、后面推倒重来的情况。4.1 面向后端接口的 request 封装在第 3 章的 mock 基础上加入 token、超时、错误码和 401 统一处理// api/http.js —— 生产环境请求封装 const BASE_URL https://api.hospital.example.com const TOKEN_KEY HOSPITAL_TOKEN function request({ url, method GET, data {}, needAuth true }) { return new Promise((resolve, reject) { const header { content-type: application/json } const token wx.getStorageSync(TOKEN_KEY) if (needAuth token) header.Authorization Bearer ${token} wx.request({ url: BASE_URL url, method, data, header, timeout: 10000, success: (res) { if (res.statusCode 401) { wx.removeStorageSync(TOKEN_KEY) wx.navigateTo({ url: /pages/login/index }) reject(new Error(AUTH_EXPIRED)) return } if (res.statusCode 200 res.statusCode 300) { if (res.data.code 0) resolve(res.data.data) else reject(new Error(res.data.msg || 业务错误 ${res.data.code})) } else { reject(new Error(HTTP ${res.statusCode})) } }, fail: (err) reject(err) }) }) } module.exports { request, BASE_URL, TOKEN_KEY }needAuth参数用来区分登录、短信验证码这类免鉴权接口10 秒超时是问诊接口的平均水平图片上传要单独放宽到 30 秒。401 统一清 token 并跳登录避免多个请求同时失败时弹出多个提示。后端业务码code 0是医院系统常见约定具体以实际接口文档为准。连接真接口时把MOCK_MODE置为 false或直接删掉拦截逻辑否则会出现接口已通但页面仍显示假数据的混乱状态。4.2 登录态与用户身份绑定医院问诊涉及实名信息登录不能只做wx.login换 openid。完整流程是wx.login拿临时 code、手机号组件拿 phoneCode、一并提交给后端换取业务 token// pages/login/index.js const { request } require(../../api/http) Page({ onLoad() { const token wx.getStorageSync(HOSPITAL_TOKEN) if (token) wx.switchTab({ url: /pages/index/index }) }, async handleLogin(e) { const phoneCode e.detail.code const loginRes await new Promise((resolve) { wx.login({ success: resolve }) }) const { token, isNewUser } await request({ url: /api/auth/login, method: POST, needAuth: false, data: { code: loginRes.code, phoneCode } }) wx.setStorageSync(HOSPITAL_TOKEN, token) wx.redirectTo({ url: isNewUser ? /pages/profile/complete : /pages/index/index }) } })wx.login返回的 code 有效期 5 分钟且只能兑换一次网络波动时要在业务层做重试。手机号组件需要在小程序后台开通对应接口权限个人开发者无法申请这点在模板交付时要提前和客户确认。另外2022 年之后头像昵称不再走getUserProfile授权弹窗而是用button open-typechooseAvatar配合input typenickname让用户主动填写医院场景下更重要的身份证、社保号仍走表单完整录入。4.3 主包与分包拆分医院问诊模板里预约、问诊、报告三个流程最重应该全部丢进分包{ pages: [ pages/index/index, pages/profile/index, pages/hospital/index ], subPackages: [ { root: packageConsult, name: consult, pages: [ pages/chat/index, pages/order/detail, pages/callback/pay ] }, { root: packagePatient, pages: [ pages/list/index, pages/edit/index ] } ], preloadRule: { pages/index/index: { network: wifi, packages: [packageConsult] } } }subPackages里不能放 tabBar 页面root路径不要太深。preloadRule的network支持wifi和all两个值让用户一进首页就在 WiFi 下预下载问诊分包点「开始问诊」时不用等加载。分包之后问诊状态最好也抽成配置表而不是在各页面散落 if 判断问诊状态后端枚举前端展示重点待支付WAIT_PAY倒计时、支付按钮、取消订单待接诊ACCEPTING医生信息、预计等待时间问诊中PROCESSING聊天窗口、图片上传、结束问诊已完成FINISHED处方、病历、评价入口已退款REFUNDED只读状态隐藏操作按钮枚举值以后端接口文档为准前端不要自定义字符串。状态对应的按钮、图标集中放在一个statusConfig映射文件里后续加状态只改一处。4.4 就诊人管理与表单校验细节医院问诊里就诊人表单是最容易出问题的地方。微信小程序单选框用于性别、默认就诊人时checked不要写死正确做法是用当前项 id 与选中 id 对比radio-group bindchangeonChangeDefault label wx:for{{patients}} wx:keyid radio value{{item.id}} checked{{item.id currentPatientId}} / text{{item.name}}/text /label /radio-group身份证校验至少做格式层面的正则function checkIdCard(idCard) { const pattern /^[1-9]\d{5}(18|19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}[\dXx]$/ return pattern.test(idCard) }这个正则是做不了末位校验码计算的后端必须二次校验。还有一个常见误用先setStorageSync更新 UI再等接口返回成功更新服务端状态失败回滚。很多模板改造项目图省事只写 storage换设备后患者就诊人全部丢失交付时会被当成严重 bug。5. 医院问诊小程序发布前的前端细节加载页、链接跳转与真机自查模板在模拟器里跑通、接口也换了真数据距离开发版提审还剩几个高频细节集中在启动加载、业务链接拉起和本地文件处理三块。5.1 修改刚进入的加载页面下载的模板经常自带启动屏页面。想要替换成自己的 loading核心是entryPagePath配合pages数组顺序{ entryPagePath: pages/splash/index, pages: [ pages/splash/index, pages/index/index, pages/profile/index ] }// pages/splash/index.js Page({ onLoad() { setTimeout(() { wx.redirectTo({ url: /pages/index/index }) }, 1200) } })启动页不能有分享、不能接收业务参数redirectTo跳转后会销毁启动页用户按返回键不会回到启动屏。注意entryPagePath会影响扫码直接进入的页面发布前确认线上首页恢复到pages数组第一位否则用户扫推广码会先看到 splash。5.2 医院问诊场景下的链接跳转weixin://dl/business 的触发方式短信通知、医生回访经常需要从 H5 或短信拉起小程序指定页面常见方案是后端通过服务端接口生成 URL Link返回类似weixin://dl/business的 scheme。前端拿到后透传触发即可// H5 侧触发合法 scheme function openMiniProgramScheme(schemeUrl) { const a document.createElement(a) a.href schemeUrl a.style.display none document.body.appendChild(a) a.click() document.body.removeChild(a) }前端不要硬编码拼接 scheme这类链接带有效期限、单次有效限制应由服务端动态下发。同时准备兜底逻辑H5 页面无法稳定判断是否成功拉起小程序给出一个「点击打开小程序」按钮作为 fallback用户点击后走正常的 URL Link 流程。5.3 附件保存与导航栏高度两个小技巧问诊报告、处方截图需要落地保存时下载路径统一用wx.env.USER_DATA_PATH避免临时目录被系统回收wx.downloadFile({ url: reportUrl, filePath: ${wx.env.USER_DATA_PATH}/report_${orderId}.pdf, success(res) { wx.openDocument({ filePath: res.filePath, fileType: pdf, showMenu: true }) } })showMenu打开后右上角会出现「转发、保存到手机」菜单患者把医嘱转给家属这个场景很常用。自定义导航栏适配所有机型用窗口信息加胶囊按钮计算const win wx.getWindowInfo() const menu wx.getMenuButtonBoundingClientRect() const navBarHeight (menu.top - win.statusBarHeight) * 2 menu.height胶囊在导航栏垂直居中所以导航栏高度等于状态栏到胶囊顶部的距离乘 2 再加上胶囊自身高度。这个公式对刘海屏、折叠屏成立兼容旧基础库可以把getWindowInfo替换为getSystemInfoSync数据结构一致。问诊聊天页的输入框和顶部导航最容易在这块错位发布前用真机跑一遍即可。本文还有配套的精品资源点击获取