作者：知曉雲 - 小程序開發快人一步
來源：知曉課堂
醫療急救卡小程序是什麼？
該小程序主要爲一個表單的填寫與提交。示例表單的內容包括姓名、性別、血型、醫療情況、服藥情況、是否爲器官捐獻者和緊急聯繫人電話號碼。提交成功後表單顯示用戶已填寫的信息，如果用戶想更新，直接更改表單內容再次提交即可。
我們所用到的組件和 API
所需組件
- 表單：form，將組件內用戶輸入的
等提交； 按鈕：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 組件，用以在表單內添加輸入框 等組件。
<!-- 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，當點擊 表單中的 組件時，將會觸發該事件。
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: 選中一項時觸發 中的 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 事件。
相關閱讀
第一章：一文了解小程序
第二章：手把手，動手編寫一個簡單小程序（上）
第三章：手把手，動手編寫一個簡單小程序（下）
第四章：如何開發一款內容展示類小程序（上）
第五章：如何開發一款內容展示類小程序（下）
第六章：小程序多媒體相關能力
第七章：在小程序裏查詢天氣（上）
第八章：在小程序裏查詢天氣（下）
關注「知曉雲」公衆號，點擊菜單欄「知曉雲」-「知曉課堂」，獲取更多開發教程。