医疗急救卡-数据API

最新推荐文章于 2025-04-07 15:51:26 发布

顺其自然lll

最新推荐文章于 2025-04-07 15:51:26 发布

阅读量3.1k

点赞数 5

分类专栏：微信小程序开发文章标签：微信小程序学习

本文链接：https://blog.csdn.net/m0_46965984/article/details/123705926

版权

本文档介绍如何使用微信小程序创建一个简易版的医疗急救卡，包括首页设计、急救卡创建页逻辑、表单提交、删除急救卡、读取本地缓存数据、拨打电话和编辑急救卡等功能的实现。通过form组件、picker、switch、textarea和input等组件完成用户医疗信息的展示和编辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用小程序表单组件仿IOS健康App创建一个简易版的医疗急救卡

创建文件firstaidCard

首页设计：

未创建医疗急救卡时，此时只显示一个”创建医疗急救卡“按钮；已经创建医疗急救卡：此时显示用户的医疗信息，最下方显示”打电话给紧急联系人“和”编辑医疗急救卡“两个按钮

<!--index.wxml-->
<!-- 尚未创建医疗急救卡显示该页面 -->
<view class="container">
<button>创建医疗急救卡</button>
</view>

/**index.wxss**/
.container{
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/**app.wxss**/
button{
  background-color: #FF2D55;
  color: white;
  margin:20rpx;/* 外边距 */
}

// index.js
// 获取应用实例
Page({

  /**
   * 页面的初始数据
   */
  data: {
    myCard:true //预览后请改回false
    
  },

/**app.wxss**/
button{
  background-color: #FF2D55;
  color: white;
  margin:20rpx;/* 外边距 */
}


/* 标签样式 */
label{
  color: #FF2D55;
  margin-right: 25rpx; /*右边距*/
}

/* 水平布局 */
.row{
  display: flex;
  flex-direction: row; /*水平布局*/
}

/*垂直布局*/
.col{
  display: flex;
  flex-direction: column;/*垂直布局*/
}

/*条目盒子*/
.box{
  border-bottom: 1rpx solid silver;/*1rpx 宽的银色实线下边框*/
  margin: 10rpx 20rpx;
  padding: 10rpx; /*内边距*/
}

/* 文本样式 */
text{
  margin-right: 25rpx;
}

<!--index.wxml-->
<!-- 尚未创建医疗急救卡显示该页面 -->
<view class="container" wx:if="{
  {!myCard}}">
<button>创建医疗急救卡</button>
</view>

<!-- 医疗急救卡创建完成后显示该页面 -->
<view wx:else>
<view class="row box">
<label>出生日期</label>
<text>2000-01-01</text>
<label>血型</label>
<text>A型</text>
</view>

<view class="row box">
<label>身高</label>
<text>100cm</text>
<label>体重</label>
<text>50千克</text>
</view>

<view class="col box">
<label>医疗状况</label>
<text>无</text>
</view>

<view class="col box">
<label>医疗笔记</label>
<text>无</text>
</view>

<view class="col box">
<label>过敏反应</label>
<text>无</text>
</view>

<view class="col box">
<label>用药</label>
<text>无</text>
</view>

<view class="row box">
<label>器官捐赠者</label>
<text>否</text>
</view>

<view class="row box">
<label>紧急联系人</label>
<text>10086</text>
</view>

<button>打电话给紧急联系人</button>
<button>编辑医疗急救卡</button>
</view>