提示用户输入一个高考_Scriptable神器实战 11 —— 利用弹窗输入设计一个用户登录系统...

●Scriptable 神器试玩，创建一个显示自定义标题内容的 iOS14桌面组件

●Scriptable 神器实战2 —— 给桌面组件添加自定义背景图片

●Scriptable 神器实战3 —— 夜间模式动态展示

●Scriptable 神器实战4 —— 获取桌面组件的大小以自动展示内容

●Scriptable 神器实战5 —— 给桌面组件添加一个渐变色背景

●Scriptable神器实战6 —— 给背景图片加上半透明遮罩

●Scriptable神器实战7 —— 获取用户添加组件时的自定义参数

●Scriptable神器实战 8 —— 本地存储 Keychain 用法

●Scriptable神器实战 9 —— Base64 数据编码/解码操作

●Scriptable神器实战 10 —— MD5 加密字符串

本期讲解

我们这期讲解和桌面组件开发有点没关系又有点用的功能：

弹框提示用户输入账号密码，进行账号验证登录操作。

开始编码

上边功能只需要一个接口：Alert

Alert 接口可以弹窗一个消息框，也可以弹出一个列表选择框，还可以弹出如上图所示表单，完成更多用户交互操作。

Alert 的用法很简单，我们先初始化一个对象：

const alert = new Alert()

然后设置标题和说明文字：

alert.title = "登录系统"alert.message = "请输入用户登录信息"

接着我们使用 addTextField 方法，设置一个文本输入框：

alert.addTextField("用户名")

针对密码等不可见表单输入框，用 addSecureTextField 方法：

alert.addSecureTextField("密码")

最后呢，我们再添加几个按钮操作，就完成如图表单效果了：

alert.addAction("验证")alert.addCancelAction("取消")

用 present 方法触发弹框：

alert.present()

获取输入

上边的代码，只是弹出了一个框，但是我们需要的是获取到用户的输入，然后进行下一步如登录验证等操作。

怎么获取呢？

Alert 接口有一个 textFieldValue(index) 方法，作用就是获取用户输入表单的第n个输入框的值。

我们上边的代码放置了两个输入框，所以 index 的值分别为 0 和 1

相应的获取代码就是：

const username = alert.textFieldValue(0)const password = alert.textFieldValue(1)

那么，我们怎么获取用户点击的按钮是哪个按钮呢？

也很简单，present 方法返回一个 Promise，就是用户点击的按钮的 id，如果是第一个按钮则返回 0 ，取消按钮则是 -1，代码如下：

const btnidx = await alert.present()

最后，我们通过判断 btnidx 的值，看用户是否点击了验证按钮，然后再获取用户输入的表单信息，就可以继续下一步登录、验证、存储 token 等操作了。

特别需要注意：获取按钮id、表单值的代码，应该放在 present 后边(等待输入交互完成)才能正确获取。

完整示例代码如下：

const alert = new Alert()alert.title = "登录系统"alert.message = "请输入用户登录信息"alert.addTextField("用户名")alert.addSecureTextField("密码")alert.addAction("验证")alert.addCancelAction("取消")const btnidx = await alert.present()const username = alert.textFieldValue(0)const password = alert.textFieldValue(1)console.log('点击的按钮：' + btnidx)console.log('输入的用户：' + username)console.log('输入的密码：' + password)