第九章：小程序表單與醫療急救卡（上）

做者：知曉雲 - 小程序開發快人一步
來源：知曉課堂

醫療急救卡小程序是什麼？

該小程序主要爲一個表單的填寫與提交。示例表單的內容包括姓名、性別、血型、醫療狀況、服藥狀況、是否爲器官捐獻者和緊急聯繫人電話號碼。提交成功後表單顯示用戶已填寫的信息，若是用戶想更新，直接更改表單內容再次提交便可。

咱們所用到的組件和 API

所需組件

• 表單：form，將組件內用戶輸入的 <input/> <switch/> <radio> 等提交；
• 按鈕：button，用以提交表單等；
• 輸入框：input，用戶輸入姓名和緊急聯繫人電話號碼；
• 單項選擇器：radio-group 和 radio， 用戶選擇性別；
• 從底部彈起的滾動選擇器：picker， 用戶選擇血型；
• 多項選擇器：checkbox-group 和 checkbox，用戶選擇醫療狀況；
• 多行輸入框：textarea，用戶輸入自身服藥狀況；
• 開關選擇器：switch，用戶選擇是否爲器官捐獻者。

所需 API

• wx.showToast: 顯示消息提示框，當用戶提交表單後，給予成功或失敗提示；
• wx.makePhoneCall: 撥打緊急聯繫人電話。

上手開發

卡片展現頁面

首次使用小程序，頁面將顯示一個 「建立醫療急救卡」 的按鈕，效果圖以下：

點擊該按鈕後顯示錶單，效果圖以下：

當用戶提交過表單後，按鈕 「提交」 變爲 「更新」，再次加載小程序直接顯示錶單，此時表單默認信息爲上次用戶所提交的信息，效果圖以下：

首頁「建立醫療急救卡」按鈕

首次使用小程序，默認顯示按鈕，隱藏表單（點擊按鈕後，隱藏按鈕，顯示錶單）

`<!-- ./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 表單組件

添加表單 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 輸入框組件

接下來，咱們就要添加輸入框 input 組件，用以讓用戶在小程序中輸入姓名。

`<!-- pages/index/index.wxml -->
<view wx:else>
 <form bindsubmit="formSubmit">
  <view>
   <view>姓名：</view>
   <input name="name" placeholder="請輸入姓名" placeholder-class />
  </view>
 </form>
</view> `

input 的組件屬性，以下所示：

• type: input 的類型，例如文字、密碼、郵箱等，以便小程序針對性進行適應。
• placeholder: 輸入框爲空時的佔位符。
• placeholder-class: 置頂 placeholder 的樣式類。
• bindinput: 當鍵盤輸入時，觸發 input 事件。

radio 單選框組件

接下來，咱們要添加單選 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 組件均可能有如下屬性：

• value ，當該 radio 選中時，radio-group 的 change 事件會攜帶 radio 的 value。
• checked: 當前是否選中，默認爲 false。

picker 滾動選擇器組件

接下來，咱們添加 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 組件（普通選擇器）中，均可能有這些屬性：

• mode：從底部彈起的滾動選擇器，現支持五種類型，經過這個屬性來改變，默認是普通選擇器（mode = selector）。示例使用普通選擇器。
• range: mode 爲 selector 或 multiSelector 時， range 有效。
• value: 表示選擇了 range 中的第幾項（下標從 0 開始）。
• bindChange: value 改變時觸發對應的 change 事件。

在實例中，該 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 組件中，有可能有如下屬性：

• value: 選中一項時觸發 <checkbox-group /> 中的 bindChange 事件，並攜帶 checkbox 的 value 值。
• disabled: 是否禁用該 checkbox。
• checked: 設置默認選中項。
• color: checkbox 的顏色。

textarea 多行文本框組件

添加多行輸入框 textarea 組件，用以填寫服藥狀況。

`<!-- pages/index/index.wxml -->
<view>
 <view>填寫服藥狀況：</view>
 <textarea name="medicationCompliance" placeholder="請填寫服藥狀況" auto-height="true"></textarea>
</view> `

在 textarea 多行輸入框屬性中，有可能有這些屬性：

• bindinput: 當鍵盤輸入時，觸發 bindinput 事件。
• auto-height: 是否自動增高，默認爲 false。

switch 開關組件

添加開關選擇器 switch 組件，用以選擇是否爲器官捐獻者。

`<!-- pages/index/index.wxml -->
<view>
 <view>是否爲器官捐獻者：</view>
 <switch name="isOrganDonor"></switch>
</view> `

每一個開關選擇器 switch 組件，均可能有這些屬性：

• checked: 是否選中，默認爲 false。
• bindChange： checked 改變時觸發 bindChange 事件。

關注「知曉雲」公衆號，點擊菜單欄「知曉雲」-「知曉課堂」，獲取更多開發教程。