医院问诊微信小程序模板源码改造：前端开发完整指南

简介：面向开发者的医院问诊微信小程序前端模板源码，可用于快速搭建在线医疗咨询平台，覆盖预约挂号、即时问诊、健康资讯与个人中心等业务模块，适合前端工程师或小程序初学者借鉴实践。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/下的模板改造成本低，而页面分散在多个分包目录里的模板，通常意味着业务已经做过一轮拆分，你只需要往里填接口。

比较模板还要看数据依赖，这里给一张常见的模块对照表：

拿到模板以后，把每个模块对应页面走一遍，看哪些用到了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 工程的判断表

在命令行里一条命令就能确认：

ls -la | grep -E "project.config.json|src/pages.json|manifest.json|package.json"

出现project.config.json就是原生工程；出现package.json且带有src/pages.json大概率是 uni-app；package.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设为 false，wx.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-weixin

dev: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-type="chooseAvatar"配合input type="nickname"让用户主动填写，医院场景下更重要的身份证、社保号仍走表单完整录入。

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 判断：

枚举值以后端接口文档为准，前端不要自定义字符串。状态对应的按钮、图标集中放在一个statusConfig映射文件里，后续加状态只改一处。

4.4 就诊人管理与表单校验细节

医院问诊里就诊人表单是最容易出问题的地方。微信小程序单选框用于性别、默认就诊人时，checked不要写死，正确做法是用当前项 id 与选中 id 对比：

<radio-group bindchange="onChangeDefault"> <label wx:for="{{patients}}" wx:key="id"> <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，数据结构一致。问诊聊天页的输入框和顶部导航最容易在这块错位，发布前用真机跑一遍即可。

本文还有配套的精品资源，点击获取