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

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

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

特殊功能开发

小程序请求呼出电话

添加输入框 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.valuethis.setData({phoneNumber: phone})},makePhoneCall: function() {let {phoneNumber} = this.datawx.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.valuelet tableID = 4066let 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// 判断数据表有数据时，设置表单内组件的默认 valueif (obj) {let medical = this.data.medicalConditionsfor (let i = 0; i < medical.length; i++) {if (obj.medicalConditions.includes(medical[i].name)) {medical[i].checked = truethis.setData({medicalConditions: medical,})}}this.setData({index: obj.bloodType,isShowMedicalCard: true,form: { ...obj },isShowUpdate: true,})}}, err => {wx.showToast({title: '获取数据出错'})})},
})

相关阅读

第一章：一文了解小程序
第二章：手把手，动手编写一个简单小程序（上）
第三章：手把手，动手编写一个简单小程序（下）
第四章：如何开发一款内容展示类小程序（上）
第五章：如何开发一款内容展示类小程序（下）
第六章：小程序多媒体相关能力
第七章：在小程序里查询天气（上）
第八章：在小程序里查询天气（下）
第九章：小程序表单与医疗急救卡（上）

关注「知晓云」公众号，点击菜单栏「知晓云」-「知晓课堂」，获取更多开发教程。