第九章：小程序表单与医疗急救卡（上）

作者：知晓云 - 小程序开发快人一步
来源：知晓课堂

医疗急救卡小程序是什么？

该小程序主要为一个表单的填写与提交。示例表单的内容包括姓名、性别、血型、医疗情况、服药情况、是否为器官捐献者和紧急联系人电话号码。提交成功后表单显示用户已填写的信息，如果用户想更新，直接更改表单内容再次提交即可。

我们所用到的组件和 API

所需组件

• 表单：form，将组件内用户输入的 等提交； 按钮：button，用以提交表单等；
• 输入框：input，用户输入姓名和紧急联系人电话号码； 单项选择器：radio-group 和 radio， 用户选择性别；
• 从底部弹起的滚动选择器：picker， 用户选择血型； 多项选择器：checkbox-group 和 checkbox，用户选择医疗情况；
• 多行输入框：textarea，用户输入自身服药情况； 开关选择器：switch，用户选择是否为器官捐献者。

所需 API

• wx.showToast: 显示消息提示框，当用户提交表单后，给予成功或失败提示； wx.makePhoneCall:
• 拨打紧急联系人电话。

上手开发

卡片展示页面

首次使用小程序，页面将显示一个 「创建医疗急救卡」 的按钮，效果图如下：

点击该按钮后显示表单，效果图如下：

当用户提交过表单后，按钮 “提交” 变为 “更新”，再次加载小程序直接显示表单，此时表单默认信息为上次用户所提交的信息，效果图如下：

首页「创建医疗急救卡」按钮

首次使用小程序，默认显示按钮，隐藏表单（点击按钮后，隐藏按钮，显示表单）