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

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

在上一节，我们了解了许多表单组件的用法。在这一节，我们将会继续对小程序进行开发。

特殊功能开发

小程序请求呼出电话

添加输入框 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"