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

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

在上一節，我們瞭解了許多表單組件的用法。在這一節，我們將會繼續對小程序進行開發。

特殊功能開發

小程序請求呼出電話

添加輸入框 input 組件和按鈕 button 組件，用以輸入緊急聯繫人電話號碼和點擊 button 撥打號碼

<!-- pages/index/index.wxml -->
<view>
 <view>緊急聯繫人電話號碼：</view>
 <input name="phoneNumber" type="number" bindinput="phoneNumberChange" placeholder="請輸入緊急聯繫人電話號碼" placeholder-class />
 <button size="mini" bindtap="makePhoneCall">撥打緊急聯繫人號碼</button>
</view>
 
 
// pages/index/index.js
pages({
 data: {
  phoneNumber: '',
 },
 phoneNumberChange: function(e) {
  let phone = e.detail.value
  this.setData({
   phoneNumber: phone
  })
 },
 makePhoneCall: function() {
  let {phoneNumber} = this.data
  wx.makePhoneCall({
   phoneNumber: phoneNumber,
  })
 },
})

在這裏，我們用到了新的 API：wx.makePhoneCall(OBJECT)。先來了解一下它的參數。

• phoneNumber: 需要撥打的電話號碼，是必填的。
• success: 接口調用成功的回調函數。
• fail: 接口調用失敗的回調函數。
• complete: 接口調用結束的回調函數（調用成功、失敗都會執行）。

動態調整按鈕行爲

如果用戶沒有提交過表單，那麼 button 顯示爲「提交」，點擊 button 提交時，後臺會在數據表中新建一行數據，這行數據會有一個唯一的表示 _id；

當用戶提交過表單後，再次提交表單不應該新建數據行，而是應該更新已有數據行的數據（該行數據的 _ id 不會改變），同時 button 顯示爲「更新」；

<!-- pages/index/index.wxml -->
<view>
 <button size="mini" formType="submit" hidden="{{isShowUpdate}}">提交</button>
 <button size="mini" formType="submit" hidden="{{!isShowUpdate}}">更新</button>
</view>
 
// pages/index/index.js
pages({
 data: {
  isShowUpdate: false,
 },
})

提交表單分爲兩種：初次提交和修改表單後提交。

我們可以在 data 中新增一項屬性 form: null，在用戶提交表單成功後，將 form 的值設置爲表單內各組件的值。這樣，我們可以通過 form 是否等於 null 來判斷用戶是否是初次提交。

// pages/index/index.js
pages({
  data: {
    form: null,
  },
 
  formSubmit: function(e) {
    let val = e.detail.value
    let tableID = 4066
    let Product = new wx.BaaS.TableObject(tabelID)
 

  // 判斷如果不是初次提交，則更新數據（更新服務器上已有的數據）
    if (this.data.form !== null) {
      // example 爲訪問自定義服務器接口函數
      example(val).then(res => {
        // 數據更新成功後，提示用戶 “更新成功”
        wx.showToast({
          title: '更新成功'
        })
      }), err => {
        // 數據更新失敗後，提示用戶 “更新失敗”
        wx.showToast({
          title: '更新失敗'
        })
      })
      return
    }
 
    // 用戶未選擇血型，則默認爲 A 型血
    if (!val.bloodType) {
      val.bloodType = this.data.index.toString()
    }
 
    // 初次提交，將數據上傳到服務器
    example(val).then(res => {
      wx.showToast({
        title: '提交成功'
      })
 
      // 將 data 中的 form 值設置爲返回的數據，並且將按鈕 “提交” 改爲 “更新”
      this.setData({
        form: { ...res.data },
        isShowUpdate: true,
      })
    }, err => {
      wx.showToast({
        title: '提交失敗'
      })
    })
  },
})

顯示用戶創建的醫療急救卡

我們想要達到的目的是：用戶已提交成功表單，那麼，小程序啓動後直接顯示錶單，且表單內組件默認值爲已提交表單的數據。

這時，我們就需要在 onLoad 事件中獲取數據表中的表單數據，並且將表單內組件的默認值設置爲獲取到的相應數據。

以下是詳細的 WXML 代碼，每個組件增加默認 value 屬性。

<!-- pages/index/index.wxml -->
<view wx:else>
 <form bindsubmit="formSubmit">
  <view>
   <view>姓名：</view>
   <input name="name" value="{{form.name}}" placeholder="請輸入姓名" placeholder-class />
  </view>
  <view></view>
  <view>
   <view>性別：</view>
   <radio-group name="gender">
    <label><radio value="男" checked="{{form.gender === '男'}}">男</radio></label>
    <label><radio value="女" checked="{{form.gender === '女'}}">女</radio></label>
   </radio-group>
  </view>
  <view></view>
  <view>
   <view>血型：</view>
   <picker name="bloodType" value="{{form.bloodType}}" bindchange="bloodTypeChange" range="{{bloodTypes}}">
    <view>
     當前選擇：{{bloodTypes[index]}}
    </view>
   </picker>
  </view>
  <view></view>
  <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>
  <view></view>
  <view>
   <view>填寫服藥情況：</view>
   <textarea name="medicationCompliance" value="{{form.medicationCompliance}}" placeholder="填寫服藥情況" auto-height="true"></textarea>
  </view>
  <view></view>
  <view>
   <view>是否爲器官捐獻者：</view>
   <switch name="isOrganDonor" checked="{{form.isOrganDonor}}"></switch>
  </view>
  <view></view>
  <view>
   <view>緊急聯繫人電話號碼：</view>
   <input name="phoneNumber" type="number" value="{{form.phoneNumber}}" bindinput="phoneNumberChange" placeholder="請輸入緊急聯繫人電話號碼" placeholder-class />
   <button size="mini" bindtap="makePhoneCall">撥打緊急聯繫人號碼</button>
  </view>
  <view></view>
  <view>
   <button size="mini" formType="submit" hidden="{{isShowUpdate}}">提交</button>
   <button size="mini" formType="submit" hidden="{{!isShowUpdate}}">更新</button>
  </view>
 </form>
</view>
// pages/index/index.js
pages({
  onLoad: function() {
    let medical = this.data.medicalConditions
    // 獲取自定義服務器上的數據
    example().then(res => {
      // 示例，所有數據存儲在 res.data.objects 中
      let obj = res.data.objects
      // 判斷數據表有數據時，設置表單內組件的默認 value
      if (obj) {
        let medical = this.data.medicalConditions
        for (let i = 0; i < medical.length; i++) {
          if (obj.medicalConditions.includes(medical[i].name)) {
            medical[i].checked = true
            this.setData({
              medicalConditions: medical,
            })
          }
        }
        this.setData({
          index: obj.bloodType,
          isShowMedicalCard: true,
          form: { ...obj },
          isShowUpdate: true,
        })
      }
    }, err => {
      wx.showToast({
        title: '獲取數據出錯'
      })
    })
  },
})

相關閱讀

第一章：一文了解小程序
第二章：手把手，動手編寫一個簡單小程序（上）
第三章：手把手，動手編寫一個簡單小程序（下）
第四章：如何開發一款內容展示類小程序（上）
第五章：如何開發一款內容展示類小程序（下）
第六章：小程序多媒體相關能力
第七章：在小程序裏查詢天氣（上）
第八章：在小程序裏查詢天氣（下）
第九章：小程序表單與醫療急救卡（上）

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