作者:知晓云 - 小程序开发快人一步
来源:知晓课堂
在上一节,我们了解了许多表单组件的用法。在这一节,我们将会继续对小程序进行开发。
特殊功能开发
小程序请求呼出电话
添加输入框 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"