使用小程序表单组件仿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>
医疗急救卡创建页设计
用于展示医疗信息表单,主要内容是:
生日日期:点击弹出滚动选择器选择年,月,日
医疗状况:多行文本框
医疗笔记:多行文本框
过敏反应:多行文本框
血型:点击弹出滚动选择器选择血型
器官捐赠者:切换是或者否
身高:单行文本输入框,单位为厘米
体重:单行文本输入框,单位为厘米
紧急联系人号码:单行文本输入框,输入电话号码
当页面计划使用组件:
页面整体:<form>组件
选择器:<picker>
是否开关:<switch>
多行文本输入框:<textarea>组件
单行文本输入框:<input>组件
医疗急救卡是需要点击首页按钮跳转才可以显示。
可临时将app.json属性里的form与index路径对调,以确保form页面可以直接显示出来
将form页面替换Index,使form变成首页:
原来的首页:
将普通编译改变
form.wxml
<!--pages/form/form.wxml-->
<form bindsubmit="submitForm">
<view class="row box">
<label>出生日期</label>
<picker name='date' mode='date' bindchange='dateChange' value='{{date}}'>
<view>{{date}}</view>
</picker>
</view>
<view class="col box">
<label>医疗状况</label>
<textarea name='ylzk' auto-height value="{{ylzk}}" ></textarea>
<!-- aoto-height 自适应高度 -->
<!-- <textarea> 多行文本框 -->
</view>
<view class="col box">
<label>医疗笔记</label>
<textarea name='ylbj' auto-height value="{{ylbj}}" ></textarea>
</view>
<view class="col box">
<label>过敏反应</label>
<textarea name='gmfy' auto-height value="{{gmfy}}" ></textarea>
</view>
<view class="col box">
<label>用药</label>
<textarea name='yy' auto-height value="{{yy}}" ></textarea>
</view>
<view class="row box">
<label>血型</label>
<picker name='blood' range='{{bloodItems}}' bindchange='bloodChange' value='{{blood}}'>
<view>
{{blood}}型
</view>
</picker>
</view>
<view class="row box">
<label>器官捐赠者</label>
<switch name='qgjz' color="#FF2D55" checked="{{qgjz}}" auto-height value="qgjz" ></switch>
</view>
<view class="row box">
<label>身高</label>
<input name='height' class='shortInput' type="digit" value="{{height}}"></input>
<text>厘米</text>
<label>体重</label>
<input name='weight' class="shortInput" type="digit" value="{{weight}}"></input>
<text>千克</text>
</view>
<view class="row box">
<label>紧急联系人</label>
<input name='tel' class="longInput" type="number" value="{{tel}}"></input>
</view>
<button form-type="submit">完成创建</button>
<button bindtap="delMyCard">删除医疗急救卡</button>
</form>
尚未创建医疗急救卡的首页只有点击”创建医疗急救卡“按钮跳转新页面的功能需要实现。
index.wxml
<!--index.wxml-->
<!-- 尚未创建医疗急救卡显示该页面 -->
<view class="container" wx:if="{{!myCard}}">
<button bindtap="goToForm">创建医疗急救卡</button>
</view>
在JS中添加goToForm函数
// index.js
// 获取应用实例
Page({
/* 页面的初始数据 */
data: {
myCard:true //预览后请改回false
},
/* 打开表单页面 */
goToForm:function(){
wx.navigateTo({
url: '../form/form',
})
},
点击”创建医疗急救卡“按钮跳转急救卡创建页
医疗急救卡创建页的逻辑实现:
form.wxml:为两个组件添加bindchange事件
<!--pages/form/form.wxml-->
<form bindsubmit="submitForm">
<view class="row box">
<label>出生日期</label>
<picker name='date' mode='date' bindchange='dateChange' value='{{date}}'>
<view>{{date}}</view>
</picker>
</view>
.
.
.
.
.
<view class="row box">
<label>血型</label>
<picker name='blood' range='{{bloodItems}}' bindchange='bloodChange' value='{{blood}}'>
<view>
{{blood}}型
</view>
</picker>
</view>
在form.js中添加dateChange和bloodChange
// 更新日期
dateChange:function(e){
let value = e.detail.value; //获得选择的日期
this.setData({date:value}); //将选项名称更新到WXML页面上
},
// 更新血型
bloodChange:function(e){
let i = e.detail.value; //获得血型的序号
this.setData({blood:this.data.bloodItems[i]
}); //将选项名称更新到WXML页面上
},
// 此时可以将滚动选择器修改的内容到当前页面
表单提交
<form bindsubmit="submitForm">
.
.
.
</form>
form.js中添加submitForm函数
// 提交表单
submitForm:function(e){
// 同步保存数据
wx.setStorageSync('myCard', e.detail.value)
// 成功后返回首页
wx.navigateBack()
},
删除医疗急救卡:
form.wxml
<button bindtap="delMyCard">删除医疗急救卡</button>
form.js中添加delMyCard函数
// 删除医疗急救卡
delMyCard:function(){
// 同步删除数据
wx.removeStorageSync('myCard')
// 成功后返回首页
wx.navigateBack()
},
读取本地缓存数据
index.js
onShow:function(){
// 同步获取本地缓存
let myCard = wx.getStorageSync('myCard')
// 更新动态数据
this.setData({myCard:myCard})
}
index.wxml
<!-- 医疗急救卡创建完成后显示该页面 -->
<view wx:else>
<view class="row box">
<label>出生日期</label>
<text>{{myCard.date}}</text>
<label>血型</label>
<text>{{myCard.blood}}</text>
</view>
<view class="row box">
<label>身高</label>
<text>{{myCard.height}}厘米</text>
<label>体重</label>
<text>{{myCard.weight}}千克</text>
</view>
<view class="col box">
<label>医疗状况</label>
<text>{{myCard.ylzk}}</text>
</view>
<view class="col box">
<label>医疗笔记</label>
<text>{{myCard.ylbj}}</text>
</view>
<view class="col box">
<label>过敏反应</label>
<text>{{myCard.gmfy}}</text>
</view>
<view class="col box">
<label>用药</label>
<text>{{myCard.yy}}</text>
</view>
<view class="row box">
<label>器官捐赠者</label>
<text>{{myCard.qgjz?'是':'否'}}</text>
</view>
<view class="row box">
<label>紧急联系人</label>
<text>{{myCard.tel}}</text>
</view>
打电话给紧急联系人:
在index.wxml紧急联系人按钮,为其绑定自定义的tap事件
<button bindtap="makeCall">打电话给紧急联系人</button>
index.js
// 打电话给紧急联系人
makeCall:function(){
let tel = this.data.myCard.tel
wx.makePhoneCall({
phoneNumber: tel,
})
},
已实现拨打电话的模拟效果,如果使用带有电话卡的真机测试,就可以拨打真的电话
编辑医疗急救卡:
index.wxml
<button bindtap="goToForm">编辑医疗急救卡</button>
form.js
onLoad:function(){
let myCard = wx.getStorageSync('myCard')
// 有数据
if(myCard!=''){
this.setData({
date:myCard.date,
ylzk:myCard.ylzk,
ylbj:myCard.ylbj,
gmfy:myCard.gmfy,
yy:myCard.yy,
blood:myCard.blood,
qgjz:myCard.qgjz,
height:myCard.height,
weight:myCard.weight
})
}
}
打开医疗急救卡创建页时先读取一下本地缓存,如果有数据,则显示已经保存的数据等待新一轮编辑
完整代码:
app.json
{
"pages":[
"pages/index/index",
"pages/form/form"
],
"window": {
"navigationBarBackgroundColor": "#FF2D55",
"navigationBarTitleText": "医疗急救卡"
}
}
app.wxss
/**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
<!--index.wxml-->
<!-- 尚未创建医疗急救卡显示该页面 -->
<view class="container" wx:if="{{!myCard}}">
<button bindtap="goToForm">创建医疗急救卡</button>
</view>
<!-- 医疗急救卡创建完成后显示该页面 -->
<view wx:else>
<view class="row box">
<label>出生日期</label>
<text>{{myCard.date}}</text>
<label>血型</label>
<text>{{myCard.blood}}</text>
</view>
<view class="row box">
<label>身高</label>
<text>{{myCard.height}}厘米</text>
<label>体重</label>
<text>{{myCard.weight}}千克</text>
</view>
<view class="col box">
<label>医疗状况</label>
<text>{{myCard.ylzk}}</text>
</view>
<view class="col box">
<label>医疗笔记</label>
<text>{{myCard.ylbj}}</text>
</view>
<view class="col box">
<label>过敏反应</label>
<text>{{myCard.gmfy}}</text>
</view>
<view class="col box">
<label>用药</label>
<text>{{myCard.yy}}</text>
</view>
<view class="row box">
<label>器官捐赠者</label>
<text>{{myCard.qgjz?'是':'否'}}</text>
</view>
<view class="row box">
<label>紧急联系人</label>
<text>{{myCard.tel}}</text>
</view>
<button bindtap="makeCall">打电话给紧急联系人</button>
<button bindtap="goToForm">编辑医疗急救卡</button>
</view>
index.wxss
/**index.wxss**/
.container{
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
index.js
// index.js
// 获取应用实例
Page({
/**
* 页面的初始数据
*/
data: {
myCard:false //预览后请改回false
},
/* 打开表单页面 */
goToForm:function(){
wx.navigateTo({
url: '../form/form',
})
},
onShow:function(){
// 同步获取本地缓存
let myCard = wx.getStorageSync('myCard')
// 更新动态数据
this.setData({myCard:myCard})
},
// 打电话给紧急联系人
makeCall:function(){
let tel = this.data.myCard.tel
wx.makePhoneCall({
phoneNumber: tel,
})
},
})
form.wxml
<!--pages/form/form.wxml-->
<form bindsubmit="submitForm">
<view class="row box">
<label>出生日期</label>
<picker name='date' mode='date' bindchange='dateChange' value='{{date}}'>
<view>{{date}}</view>
</picker>
</view>
<view class="col box">
<label>医疗状况</label>
<textarea name='ylzk' auto-height value="{{ylzk}}" ></textarea>
<!-- aoto-height 自适应高度 -->
<!-- <textarea> 多行文本框 -->
</view>
<view class="col box">
<label>医疗笔记</label>
<textarea name='ylbj' auto-height value="{{ylbj}}" ></textarea>
</view>
<view class="col box">
<label>过敏反应</label>
<textarea name='gmfy' auto-height value="{{gmfy}}" ></textarea>
</view>
<view class="col box">
<label>用药</label>
<textarea name='yy' auto-height value="{{yy}}" ></textarea>
</view>
<view class="row box">
<label>血型</label>
<picker name='blood' range='{{bloodItems}}' bindchange='bloodChange' value='{{blood}}'>
<view>
{{blood}}型
</view>
</picker>
</view>
<view class="row box">
<label>器官捐赠者</label>
<switch name='qgjz' color="#FF2D55" checked="{{qgjz}}" auto-height value="qgjz" ></switch>
</view>
<view class="row box">
<label>身高</label>
<input name='height' class='shortInput' type="digit" value="{{height}}"></input>
<text>厘米</text>
<label>体重</label>
<input name='weight' class="shortInput" type="digit" value="{{weight}}"></input>
<text>千克</text>
</view>
<view class="row box">
<label>紧急联系人</label>
<input name='tel' class="longInput" type="number" value="{{tel}}"></input>
</view>
<button form-type="submit">完成创建</button>
<button bindtap="delMyCard">删除医疗急救卡</button>
</form>
form.wxss
/* pages/form/form.wxss */
/* 单表,多行文本框样式 */
form,textarea{
width: 100%;
}
/* 文本输入框样式 */
.shortInput{
width: 100rpx;
}
.longInput{
width: 100rpx;
}
form.js
// pages/form/form.js
Page({
/**
* 页面的初始数据
*/
data: {
date:'2000-01-01',
ylzk:'无',
ylbj:'无',
gmfy:'无',
yy:'无',
blood:'A',
qgjz:false, /* 器官捐赠者 */
height:'100',
weight:'50',
bloodItems:['未知','A','B','C','O']
},
// 更新日期
dateChange:function(e){
let value = e.detail.value; //获得选择的日期
this.setData({date:value}); //将选项名称更新到WXML页面上
},
// 更新血型
bloodChange:function(e){
let i = e.detail.value; //获得血型的序号
this.setData({blood:this.data.bloodItems[i]
}); //将选项名称更新到WXML页面上
},
// 此时可以将滚动选择器修改的内容到当前页面
// 提交表单
submitForm:function(e){
// 同步保存数据
wx.setStorageSync('myCard', e.detail.value)
// 成功后返回首页
wx.navigateBack()
},
// 删除医疗急救卡
delMyCard:function(){
// 同步删除数据
wx.removeStorageSync('myCard')
// 成功后返回首页
wx.navigateBack()
},
onLoad:function(){
let myCard = wx.getStorageSync('myCard')
// 有数据
if(myCard!=''){
this.setData({
date:myCard.date,
ylzk:myCard.ylzk,
ylbj:myCard.ylbj,
gmfy:myCard.gmfy,
yy:myCard.yy,
blood:myCard.blood,
qgjz:myCard.qgjz,
height:myCard.height,
weight:myCard.weight
})
}
}
})