作者：知晓云 - 小程序开发快人一步
来源：知晓课堂
在上一节，我们了解了许多表单组件的用法。在这一节，我们将会继续对小程序进行开发。
特殊功能开发
小程序请求呼出电话
添加输入框 input 组件和按钮 button 组件，用以输入紧急联系人电话号码和点击 button 拨打号码
`
// 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.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 属性。
`
当前选择：{{bloodTypes[index]}}
// 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: '获取数据出错'
})
})
},
})`
关注「知晓云」公众号，点击菜单栏「知晓云」-「知晓课堂」，获取更多开发教程。
