作者:知晓云 - 小程序开发快人一步
来源:知晓课堂
该小程序主要为一个表单的填写与提交。示例表单的内容包括姓名、性别、血型、医疗情况、服药情况、是否为器官捐献者和紧急联系人电话号码。提交成功后表单显示用户已填写的信息,如果用户想更新,直接更改表单内容再次提交即可。
首次使用小程序,页面将显示一个 「创建医疗急救卡」 的按钮,效果图如下:
点击该按钮后显示表单,效果图如下:
当用户提交过表单后,按钮 “提交” 变为 “更新”,再次加载小程序直接显示表单,此时表单默认信息为上次用户所提交的信息,效果图如下:
首次使用小程序,默认显示按钮,隐藏表单(点击按钮后,隐藏按钮,显示表单)
`<!-- ./pages/index.index.wxml -->
<view wx:if="{{!isShowMedicalCard}}">
<button size="mini" bindtap="showMedicalCard">创建医疗急救卡</button>
</view>
// pages/index/index.js
Page({
data: {
isShowMedicalCard: false,
},
showMedicalCard: function () {
this.setData({
isShowMedicalCard: true,
})
},
}) `
该 button 按钮中,我们绑定了一个点击事件 showMedicalCard,通过改变 isShowMedicalCard 的值,来控制表单的显示(值为 true)与隐藏(值为 false)。
添加表单 form 组件,用以在表单内添加输入框 <input/> 等组件。
`<!-- pages/medical-card/medical-card.wxml -->
<view wx:else>
<form bindsubmit="formSubmit">
</form>
</view>
// pages/index/index.js
pages({
formSubmit: function (e) {
let data = e.detail.value
},
}) `
表单 form 组件中,有 bindsubmit 的属性,它携带表单中各组件的值(需要在相应的组件中加上 name 来作为 key)触发 formSubmit 事件。
该 form 组件绑定的点击事件是 formSubmit,当点击 <form/> 表单中的 <button formType="submit"></button> 组件时,将会触发该事件。
接下来,我们就要添加输入框 input 组件,用以让用户在小程序中输入姓名。
`<!-- pages/index/index.wxml -->
<view wx:else>
<form bindsubmit="formSubmit">
<view>
<view>姓名:</view>
<input name="name" placeholder="请输入姓名" placeholder-class />
</view>
</form>
</view> `
input 的组件属性,如下所示:
接下来,我们要添加单选 radio 组件,用以选择性别。
`<!-- pages/index/index.wxml -->
<view>
<view>性别:</view>
<radio-group name="gender">
<label><radio value="男">男</radio></label>
<label><radio value="女">女</radio></label>
</radio-group>
</view> `
在单选容器 radio-group 组件中,内部会由多个 radio 组成。
每个 radio-group 组件,可能会有 bindchange 属性,它代表 radio-group 中的选中项发生变化时,触发 change 事件。
每个 radio 组件都可能有以下属性:
接下来,我们添加 picker 组件(从底部滑起的滚动选择器),用以填写血型。
`<!-- pages/index/index.wxml -->
<view>
<view>血型:</view>
<picker name="bloodType" bindchange="bloodTypeChange" range="{{bloodTypes}}">
<view>当前选择:{{bloodTypes[index]}}</view>
</picker>
</view>
// pages/index/index.js
page({
data: {
bloodTypes: ['A', 'B', 'AB', 'O', 'RH+', 'RH-', 'Hh/孟买血型', '亚孟买血型', 'P血型'],
index: 0,
},
bloodTypeChange: function (e) {
let value = e.detail.value
this.setData({
index: value,
})
},
})`
在每个 picker 组件(普通选择器)中,都可能有这些属性:
在实例中,该 picker 组件绑定的事件是 bloodTypeChange,滚动选项列表将会改变 value 值,从而触发事件。
checkbox 多选框组件
添加多项选择器 checkbox 组件,用以选择医疗情况。
`<!-- pages/index/index.wxml -->
<view>
<view>选择医疗情况:</view>
<checkbox-group name="medicalConditions">
<label>
<checkbox wx:for="{{medicalConditions}}" wx:key="{{index}}" value="{{item.name}}" checked="{{item.checked}}">{{item.name}}</checkbox>
</label>
</checkbox-group>
</view>
// pages/index/index.js
pages({
data: {
medicalConditions: [
{ name: '有过敏史', checked: false },
{ name: '有过大型手术', checked: false },
{ name: '有家族遗传病', checked: false }
],
},
}) `
每个多项选择器,内部由多个 checkbox 组成,并使用 checkbox-group 进行组织。
每个 chheckbox-group 都可能有 bindChange 属性,它的意义是当 checkbox-group 中选中项发生改变时触发,将会执行特定函数。
在每个 checkbox 组件中,有可能有以下属性:
添加多行输入框 textarea 组件,用以填写服药情况。
`<!-- pages/index/index.wxml -->
<view>
<view>填写服药情况:</view>
<textarea name="medicationCompliance" placeholder="请填写服药情况" auto-height="true"></textarea>
</view> `
在 textarea 多行输入框属性中,有可能有这些属性:
添加开关选择器 switch 组件,用以选择是否为器官捐献者。
`<!-- pages/index/index.wxml -->
<view>
<view>是否为器官捐献者:</view>
<switch name="isOrganDonor"></switch>
</view> `
每个开关选择器 switch 组件,都可能有这些属性:
关注「知晓云」公众号,点击菜单栏「知晓云」-「知晓课堂」,获取更多开发教程。![]()