医疗健康小程序首页开发实录（附完整代码）_医院小程序界面设计代码

一页面功能与设计思路

1.1，医疗健康类小程序首页包含以下核心功能模块：

1）健康数据概览：直观展示步数、体重、血压、睡眠等关键健康指标
2）功能快捷入口：提供10个常用医疗功能的快速访问通道
3）健康计划跟踪：可视化展示用户的健康计划完成情况
4）健康资讯推送：精选健康知识文章推荐

1.2，页面设计遵循以下原则：

1）蓝白主色调：采用医疗行业常用的蓝白配色方案
2）卡片式布局：清晰分隔不同功能区域
3）响应式设计：确保在不同设备上完美展示
4）交互反馈机制：所有可点击元素均有视觉反馈

二开发步骤详解

2.1，项目初始化与结构搭建
（pages.json 核心配置）

// pages.json 核心配置{ \"globalStyle\": { \"navigationBarTextStyle\": \"white\", \"navigationBarTitleText\": \"\", \"navigationBarBackgroundColor\": \"#1e88e5\", \"backgroundColor\": \"#f5f7fa\" }, \"pages\": [ { \"path\": \"pages/index/index\", \"style\": { \"navigationBarTitleText\": \"首页\", \"app-plus\": { \"titleNView\": { \"backgroundColor\": \"#1e88e5\" } } } } ]}

2.2，健康数据概览实现
（index.vue）

<view class=\"health-summary\"> <view class=\"health-data\"> <view class=\"data-item\"> <view class=\"data-value\">8,426</view> <view class=\"data-label\">今日步数</view> </view>  </view></view>

2.3，功能图标区滚动实现
（index.vue）

<view class=\"health-features\"> <scroll-view class=\"features-scroll\" scroll-x> <view class=\"features-grid\"> <view v-for=\"(item, index) in features\" :key=\"index\" class=\"feature-item\"> <view class=\"feature-icon\" :style=\"{background: item.color}\"> <uni-icons :type=\"item.icon\" size=\"24\" color=\"white\"></uni-icons> </view> <view class=\"feature-name\">{{item.name}}</view> </view> </view> </scroll-view></view>

2.4，健康计划进度可视化
（index.vue）

<view class=\"plan-item\"> <view class=\"plan-icon\" style=\"background: #4fc3f7;\"> <uni-icons type=\"footprint\" size=\"24\" color=\"white\"></uni-icons> </view> <view class=\"plan-content\"> <view class=\"plan-title\">每日万步计划</view> <view class=\"plan-progress\"> <view class=\"progress-bar\"> <view class=\"progress-value\" style=\"width: 80%; background: #4fc3f7;\"></view> </view> <text class=\"progress-text\">完成度 80%</text> </view> </view></view>

2.5，健康资讯卡片实现
（index.vue）

<view class=\"news-item\"> <view class=\"news-content\"> <view class=\"news-title\">科学运动指南：如何正确进行有氧运动</view> <view class=\"news-desc\">专业医生为您解读科学运动方法</view> <view class=\"news-tag\"> <text class=\"tag\">运动健康</text> <text class=\"read-count\">2.3万阅读</text> </view> </view></view>

三核心技术实现

3.1，Flex布局应用
（index.vue）

.health-data { display: flex; padding: 30rpx 0; .data-item { flex: 1; text-align: center; }}

3.2，自适应单位应用
（index.vue）

.health-page { padding: 30rpx; .feature-icon { width: 80rpx; height: 80rpx; }}

3.3，视觉层次设计
（index.vue）

.section { background: white; border-radius: 20rpx; margin: 0 30rpx 30rpx; padding: 30rpx; box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.05);}

四最终效果图

五完整代码实现

(index.vue)

<template> <view class=\"health-page\">  <view class=\"section health-summary\"> <view class=\"health-data\"> <view class=\"data-item\"> <view class=\"data-value\">8,426</view> <view class=\"data-label\">今日步数</view> </view> <view class=\"data-item\"> <view class=\"data-value\">68.5</view> <view class=\"data-label\">当前体重(kg)</view> </view> <view class=\"data-item\"> <view class=\"data-value\">120/80</view> <view class=\"data-label\">血压(mmHg)</view> </view> <view class=\"data-item\"> <view class=\"data-value\">7.5</view> <view class=\"data-label\">睡眠(小时)</view> </view> </view> </view>  <view class=\"section health-features\"> <scroll-view class=\"features-scroll\" scroll-x> <view class=\"features-grid\"> <view v-for=\"(item, index) in features\" :key=\"index\" class=\"feature-item\" @click=\"navToFeature(item.path)\"> <view class=\"feature-icon\" :style=\"{background: item.color}\">  <uni-icons :type=\"item.icon\" size=\"24\" color=\"white\"></uni-icons> </view> <view class=\"feature-name\">{{item.name}}</view> </view> </view> </scroll-view> </view>  <view class=\"section\"> <view class=\"section-title\">我的健康计划</view> <view class=\"plan-item\"> <view class=\"plan-icon\" style=\"background: #4fc3f7;\"> <uni-icons type=\"footprint\" size=\"24\" color=\"white\"></uni-icons> </view> <view class=\"plan-content\"> <view class=\"plan-title\">每日万步计划</view> <view class=\"plan-progress\"> <view class=\"progress-bar\">  <view class=\"progress-value\" style=\"width: 80%; background: #4fc3f7;\"></view> </view> <text class=\"progress-text\">完成度 80%</text> </view> </view> </view> </view>  <view class=\"section\"> <view class=\"section-title\">健康资讯</view> <view class=\"news-list\"> <view class=\"news-item\" v-for=\"(item, index) in newsList\" :key=\"index\"> <view class=\"news-content\"> <view class=\"news-title\">{{item.title}}</view> <view class=\"news-desc\">{{item.desc}}</view> <view class=\"news-tag\">  <text class=\"tag\">{{item.tag}}</text>  <text class=\"read-count\">{{item.readCount}}阅读</text> </view> </view> </view> </view> </view> </view></template><script>export default { data() { return { features: [ { name: \'在线问诊\', icon: \'person\', color: \'#1e88e5\', path: \'/pages/consult/index\' }, { name: \'预约挂号\', icon: \'calendar\', color: \'#26c6da\', path: \'/pages/appointment/index\' }, { name: \'报告查询\', icon: \'paperclip\', color: \'#26a69a\', path: \'/pages/report/index\' }, { name: \'药品购买\', icon: \'cart\', color: \'#ffa726\', path: \'/pages/pharmacy/index\' }, { name: \'健康档案\', icon: \'folder\', color: \'#66bb6a\', path: \'/pages/health-record/index\' }, { name: \'智能导诊\', icon: \'chat\', color: \'#ab47bc\', path: \'/pages/guidance/index\' }, { name: \'体检预约\', icon: \'heart\', color: \'#ec407a\', path: \'/pages/checkup/index\' }, { name: \'急救指南\', icon: \'help\', color: \'#ef5350\', path: \'/pages/first-aid/index\' } ], newsList: [ { title: \'科学运动指南：如何正确进行有氧运动\', desc: \'专业医生为您解读科学运动方法\', tag: \'运动健康\', readCount: \'2.3万\' }, { title: \'冬季养生全攻略：御寒保暖小技巧\', desc: \'中医专家教你冬季养生秘诀\', tag: \'季节养生\', readCount: \'1.8万\' } ] } }, methods: { navToFeature(path) { uni.navigateTo({ url: path }) } }}</script><style lang=\"scss\">.health-page { padding: 30rpx; background-color: #f5f7fa; .section { background: white; border-radius: 20rpx; margin: 0 30rpx 30rpx; padding: 30rpx; box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.05); &-title { font-size: 32rpx; font-weight: bold; margin-bottom: 30rpx; color: #333; } } .health-data { display: flex; padding: 30rpx 0; .data-item { flex: 1; text-align: center; .data-value { font-size: 36rpx; font-weight: bold; color: #1e88e5; margin-bottom: 10rpx; } .data-label { font-size: 24rpx; color: #666; } } } .health-features { .features-scroll { white-space: nowrap; width: 100%; .features-grid { display: inline-flex; padding: 20rpx 0; .feature-item { display: inline-flex; flex-direction: column; align-items: center; width: 120rpx; margin-right: 30rpx; &:last-child { margin-right: 0; } .feature-icon { width: 80rpx; height: 80rpx; border-radius: 20rpx; display: flex; align-items: center; justify-content: center; margin-bottom: 15rpx; } .feature-name { font-size: 24rpx; color: #333; white-space: nowrap; } } } } } .plan-item { display: flex; align-items: center; .plan-icon { width: 80rpx; height: 80rpx; border-radius: 20rpx; display: flex; align-items: center; justify-content: center; margin-right: 20rpx; } .plan-content { flex: 1; .plan-title { font-size: 28rpx; color: #333; margin-bottom: 15rpx; } .plan-progress { display: flex; align-items: center; .progress-bar { flex: 1; height: 12rpx; background: #eee; border-radius: 6rpx; overflow: hidden; .progress-value { height: 100%; border-radius: 6rpx; } } .progress-text { font-size: 24rpx; color: #666; margin-left: 20rpx; } } } } .news-list { .news-item { padding: 20rpx 0; border-bottom: 1rpx solid #eee; &:last-child { border-bottom: none; } .news-content { .news-title { font-size: 30rpx; color: #333; margin-bottom: 10rpx; font-weight: bold; } .news-desc { font-size: 26rpx; color: #666; margin-bottom: 15rpx; } .news-tag { display: flex; align-items: center; .tag { font-size: 22rpx; color: #1e88e5; background: rgba(30, 136, 229, 0.1); padding: 5rpx 15rpx; border-radius: 20rpx; margin-right: 20rpx; } .read-count { font-size: 22rpx; color: #999; } } } } }}</style>

该代码实现了一个完整的医疗健康小程序首页，包含健康数据概览、功能快捷入口、健康计划跟踪和健康资讯推送四大核心模块。采用Flex布局和响应式设计，确保在不同设备上的良好展示效果。