文章
文章商铺文档快讯

Autojs模块：对话框

脚本内如何弹出对话框

哔哩哔哩：https://www.bilibili.com/video/BV16yfiYREtk/

– 对话框 –

1、对话框中的回调和Promise

alert（str）

alert（"hello"）

confirm（str）

var clear = confirm("要清除所有缓存吗?");
if(clear){
    alert("清除成功!");
}

"ui";
//回调的形式
confirm('你确定吗？','这里是要写的内容',function(bool){
    if(bool){
        toast('你点击了确定')
    }else{
        toast('你点击了取消')
    }
})
​
//Promise形式
confirm("要清除所有缓存吗?")
    .then(clear => {
        if(clear){
          alert("清除成功!");
        }
});

2、对话框：alert和confirm

dialogs.alert(title[, content, callback])

  • title {string} 对话框的标题。
  • content {string} 可选，对话框的内容。默认为空。
  • callback {Function} 回调函数，可选。当用户点击确定时被调用,一般用于ui模式。

显示一个只包含“确定”按钮的提示对话框。直至用户点击确定脚本才继续运行。

该函数也可以作为全局函数使用。

alert("出现错误~", "出现未知错误，请联系脚本作者”);

在ui模式下该函数返回一个Promise。例如:

"ui";
​
alert("嘿嘿嘿").then(()=>{
    //当点击确定后会执行这里
    
});

dialogs.confirm(title[, content, callback])

  • title {string} 对话框的标题。
  • content {string} 可选，对话框的内容。默认为空。
  • callback {Function} 回调函数，可选。当用户点击确定时被调用,一般用于ui模式。

显示一个包含“确定”和“取消”按钮的提示对话框。如果用户点击“确定”则返回 true ，否则返回 false 。

该函数也可以作为全局函数使用。

在ui模式下该函数返回一个Promise。例如:

"ui";
confirm("确定吗").then(value=>{
    //当点击确定后会执行这里, value为true或false, 表示点击"确定"或"取消"
    
});

3、对话框：rawInput和input

dialogs.rawInput(title[, prefill, callback])

  • title {string} 对话框的标题。
  • prefill {string} 输入框的初始内容，可选，默认为空。
  • callback {Function} 回调函数，可选。当用户点击确定时被调用,一般用于ui模式。

显示一个包含输入框的对话框，等待用户输入内容，并在用户点击确定时将输入的字符串返回。如果用户取消了输入，返回null。

该函数也可以作为全局函数使用。

var name = rawInput("请输入您的名字", "小明");
alert("您的名字是" + name);

在ui模式下该函数返回一个Promise。例如:

"ui";
rawInput("请输入您的名字", "小明").then(name => {
    alert("您的名字是" + name);
});

当然也可以使用回调函数，例如:

rawInput("请输入您的名字", "小明", name => {
     alert("您的名字是" + name);
});

dialogs.input(title[, prefill, callback])

等效于 eval(dialogs.rawInput(title, prefill, callback)), 该函数和rawInput的区别在于，会把输入的字符串用eval计算一遍再返回，返回的可能不是字符串。

可以用该函数输入数字、数组等。例如：

var age = dialogs.input("请输入您的年龄", "18");
​
// new Date().getYear() + 1900 可获取当前年份
​
var year = new Date().getYear() + 1900 - age;
​
alert("您的出生年份是" + year);

在ui模式下该函数返回一个Promise。例如:

"ui";
dialogs.input("请输入您的年龄", "18").then(age => {
    var year = new Date().getYear() + 1900 - age;
    alert("您的出生年份是" + year);
});

4、对话框：选项列表

dialogs.select(title, items, callback)

  • title {string} 对话框的标题。
  • items {Array} 对话框的选项列表，是一个字符串数组。
  • callback {Function} 回调函数，可选。当用户点击确定时被调用,一般用于ui模式。

显示一个带有选项列表的对话框，等待用户选择，返回用户选择的选项索引(0 ~ item.length – 1)。如果用户取消了选择，返回-1。

var options = ["选项A", "选项B", "选项C", "选项D"]
​
var i = dialogs.select("请选择一个选项", options);
​
if(i >= 0){
    toast("您选择的是" + options[i]);
}else{
    toast("您取消了选择");
}

在ui模式下该函数返回一个Promise。例如:

"ui";
​
dialogs.select("请选择一个选项", ["选项A", "选项B", "选项C", "选项D"])
    .then(i => {
        toast(i);
});

5、对话框：单选和多选

dialogs.singleChoice(title, items[, index, callback])

  • title {string} 对话框的标题。
  • items {Array} 对话框的选项列表，是一个字符串数组。
  • index {number} 对话框的初始选项的位置，默认为0。
  • callback {Function} 回调函数，可选。当用户点击确定时被调用,一般用于ui模式。

显示一个单选列表对话框，等待用户选择，返回用户选择的选项索引(0 ~ item.length – 1)。如果用户取消了选择，返回-1。

dialogs.multiChoice(title, items[, indices, callback])

  • title {string} 对话框的标题。
  • items {Array} 对话框的选项列表，是一个字符串数组。
  • indices {Array} 选项列表中初始选中的项目索引的数组，默认为空数组。
  • callback {Function} 回调函数，可选。当用户点击确定时被调用,一般用于ui模式。

显示一个多选列表对话框，等待用户选择，返回用户选择的选项索引的数组。如果用户取消了选择，返回[]。

在ui模式下该函数返回一个Promise。

6、对话框：自定义对话框

dialogs.build(properties)

  • properties {Object} 对话框属性，用于配置对话框。
  • 返回 {Dialog}

创建一个可自定义的对话框，例如：

dialogs.build({
    //对话框标题
    title: "发现新版本",
    //对话框内容
    content: "更新日志: 新增了若干了BUG",
    //确定键内容
    positive: "下载",
    //取消键内容
    negative: "取消",
    //中性键内容
    neutral: "到浏览器下载",
    //勾选框内容
    checkBoxPrompt: "不再提示"
}).show()

选项properties可供配置的项目为:

  • title {string} 对话框标题
  • titleColor {string} | {number} 对话框标题的颜色
  • buttonRippleColor {string} | {number} 对话框按钮的波纹效果颜色
  • icon {string} | {Image} 对话框的图标，是一个URL或者图片对象
  • content {string} 对话框文字内容
  • contentColor{string} | {number} 对话框文字内容的颜色
  • contentLineSpacing{number} 对话框文字内容的行高倍数，1.0为一倍行高
  • items {Array} 对话框列表的选项
  • itemsColor {string} | {number} 对话框列表的选项的文字颜色
  • itemsSelectMode{string} 对话框列表的选项选择模式，可以为:
    • select 普通选择模式
    • single 单选模式
    • multi 多选模式
  • itemsSelectedIndex {number} | {Array} 对话框列表中预先选中的项目索引，如果是单选模式为一个索引；多选模式则为数组
  • positive {string} 对话框确定按钮的文字内容(最右边按钮)
  • positiveColor {string} | {number} 对话框确定按钮的文字颜色(最右边按钮)
  • neutral {string} 对话框中立按钮的文字内容(最左边按钮)
  • neutralColor {string} | {number} 对话框中立按钮的文字颜色(最左边按钮)
  • negative {string} 对话框取消按钮的文字内容(确定按钮左边的按钮)
  • negativeColor {string} | {number} 对话框取消按钮的文字颜色(确定按钮左边的按钮)
  • checkBoxPrompt {string} 勾选框文字内容
  • checkBoxChecked {boolean} 勾选框是否勾选
  • progress{Object} 配置对话框进度条的对象：
    • max {number} 进度条的最大值，如果为-1则为无限循环的进度条
    • horizontal {boolean} 如果为true, 则对话框无限循环的进度条为水平进度条
    • showMinMax {boolean} 是否显示进度条的最大值和最小值
  • cancelable {boolean} 对话框是否可取消，如果为false，则对话框只能用代码手动取消
  • canceledOnTouchOutside {boolean} 对话框是否在点击对话框以外区域时自动取消，默认为true
  • inputHint {string} 对话框的输入框的输入提示
  • inputPrefill {string} 对话框输入框的默认输入内容

通过这些选项可以自定义一个对话框，并通过监听返回的Dialog对象的按键、输入事件来实现交互。

7、对话框事件：显示和消失事件

事件: show

  • dialog {Dialog} 对话框

对话框显示时会触发的事件。例如：

dialogs.build({
    title: "标题"
}).on("show", (dialog)=>{
    toast("对话框显示了");
}).show();

事件: dismiss

  • dialog {Dialog} 对话框

对话框消失时会触发的事件。对话框被取消或者手动调用dialog.dismiss()函数都会触发该事件。例如：

var d = dialogs.build({
    title: "标题",
    positive: "确定",
    negative: "取消"
}).on("dismiss", (dialog)=>{
    toast("对话框消失了");
}).show();
​
setTimeout(()=>{
    d.dismiss();
}, 5000);

8、对话框事件：按钮事件

事件: positive

  • dialog {Dialog} 对话框

确定按钮按下时触发的事件。例如：

var d = dialogs.build({
    title: "标题",
    positive: "确定",
    negative: "取消"
}).on("positive", (dialog)=>{
    toast("你点击了确定");
}).show();

事件: negative

  • dialog {Dialog} 对话框

取消按钮按下时触发的事件。例如：

var d = dialogs.build({
    title: "标题",
    positive: "确定",
    negative: "取消"
}).on("negative", (dialog)=>{
    toast("你点击了取消");
}).show();

事件: cancel

  • dialog {Dialog} 对话框

对话框被取消时会触发的事件。一个对话框可能按取消按钮、返回键取消或者点击对话框以外区域取消。例如：

dialogs.build({
    title: "标题",
    positive: "确定",
    negative: "取消"
}).on("cancel", (dialog)=>{
    toast("对话框取消了");
}).show();

事件: neutral

  • dialog {Dialog} 对话框

中性按钮按下时触发的事件。例如：

var d = dialogs.build({
    title: "标题",
    positive: "确定",
    negative: "取消",
    neutral: "稍后提示"
}).on("positive", (dialog)=>{
    toast("你点击了稍后提示");
}).show();

事件: any

  • dialog {Dialog} 对话框
  • action {string} 被点击的按钮，可能的值为:
    • positive 确定按钮
    • negative 取消按钮
    • neutral 中性按钮

任意按钮按下时触发的事件。例如:

var d = dialogs.build({
    title: "标题",
    positive: "确定",
    negative: "取消",
    neutral: "稍后提示"
}).on("any", (action, dialog)=>{
    if(action == "positive"){
        toast("你点击了确定");
    }else if(action == "negative"){
        toast("你点击了取消");
    }
}).show();

9、对话框事件：单选多选事件

事件: item_select

  • index {number} 被选中的项目索引，从0开始
  • item {Object} 被选中的项目
  • dialog {Dialog} 对话框

对话框列表(itemsSelectMode为”select”)的项目被点击选中时触发的事件。例如：

var d = dialogs.build({
    title: "请选择",
    positive: "确定",
    negative: "取消",
    items: ["A", "B", "C", "D"],
    itemsSelectMode: "select"
}).on("item_select", (index, item, dialog)=>{
    toast("您选择的是第" + (index + 1) + "项, 选项为" + item);
}).show();

事件: single_choice

  • index {number} 被选中的项目索引，从0开始
  • item {Object} 被选中的项目
  • dialog {Dialog} 对话框

对话框单选列表(itemsSelectMode为”singleChoice”)的项目被选中并点击确定时触发的事件。例如：

dialogs.build({
    title: '这是选择框事件',
    items: ['A','B','C','D'],
    itemsSelectMode: 'single',
    itemsSelectedIndex: 0,
    positive: '确定'
}).on('single_choice',function(index,item,dialog){
​
    toastLog(index+"----"+item)
    // 3----D
​
    toastLog("你选择的是第"+(index+1).toString()+"个选项："+item)
}).show()

事件: multi_choice 【失效】

  • indices {Array} 被选中的项目的索引的数组
  • items {Array} 被选中的项目的数组
  • dialog {Dialog} 对话框

对话框多选列表(itemsSelectMode为”multiChoice”)的项目被选中并点击确定时触发的事件。例如：

var d = dialogs.build({
    title: "请选择",
    positive: "确定",
    negative: "取消",
    items: ["A", "B", "C", "D"],
    itemsSelectMode: "multiChoice"
}).on("item_select", (indices, items, dialog)=>{
    toast(util.format("您选择的项目为%o, 选项为%o", indices, items);
}).show();

10、对话框事件：输入事件

事件: input

  • text {string} 输入框的内容
  • dialog {Dialog} 对话框

带有输入框的对话框当点击确定时会触发的事件。例如：

dialogs.build({
    title: "请输入",
    positive: "确定",
    negative: "取消",
    inputPrefill: ""
}).on("input", (text, dialog)=>{
    toast("你输入的是" + text);
}).show();

事件: input_change

  • text {string} 输入框的内容
  • dialog {Dialog} 对话框

对话框的输入框的文本发生变化时会触发的事件。例如：

dialogs.build({
    title: "请输入",
    positive: "确定",
    negative: "取消",
    inputPrefill: ""
}).on("input_change", (text, dialog)=>{
    toast("你输入的是" + text);
}).show();

11、对话框对象方法

dialog.getProgress()

  • 返回 {number}

获取当前进度条的进度值，是一个整数

dialog.getMaxProgress()

  • 返回 {number}

获取当前进度条的最大进度值，是一个整数

dialog.getActionButton(action)

action {string} 动作，包括:

  • positive
  • negative
  • neutral

– 示例代码 –

1、对话框的简单案例

//菜单
​
while(true){
    var i = dialogs.select("哲学的基本问题是", "社会和自然的关系问题", "思维与存在的关系问题", "政治和经济的关系问题", "实践和理论的关系问题");
    if(i == -1){
        toast("猜一下呗");
        continue;
    }
    if(i == 1){
        toast("答对辣");
        break;
    }else{
        toast("答错辣")
    }
}
​
//单选框
​
var sex = dialogs.singleChoice("请选择性别", ["男", "女", "基佬", "女装", "其他"], 2);
toast("选择了第" + (sex + 1) + "个选项");
​
//多选框
​
var i = dialogs.multiChoice("下列作品出自李贽的是", ["《焚书》", "《西湖寻梦》", "《高太史全集》", "《续焚烧书》", "《藏书》"]);
toast("选择了: " + i);
if(i.length == 2 && i.toString() == [0, 4].toString()){
    toast("答对辣");
}else{
    toast("答错辣");
}
​
//确认框
​
var handsome = confirm("你帅吗？");
if(handsome){
    toast("真不要脸！");
    toast("真不要脸！");
    toast("真不要脸！");
    alert("真不要脸！");
}else{
    toast("嗯");
}
​
//输入框
​
var name = rawInput("请输入名字");
alert("(•́へ•́╬)", "你好~ " + name);
var expr = dialogs.input("请输入简单的算式", "1+1");
alert("计算结果为 " + expr);

2、对话框：简单计算器

var num1 = dialogs.input("请输入第一个数字");
var op = dialogs.singleChoice("请选择运算", ["加", "减", "乘", "除", "幂"]);
var num2 = dialogs.input("请输入第二个数字");
var result = 0;
switch(op){
    case 0:
        result = num1 + num2;
        break;
    case 1:
        result = num1 - num2;
        break;
    case 2:
        result = num1 * num2;
        break;
    case 3:
        result = num1 / num2;
        break;
    case 4:
        result = Math.pow(num1, num2);
        break;
}
alert("运算结果", result);

3、对话框：模拟更新下载对话框（一）

4、对话框：模拟更新下载对话框（二）

5、对话框：模拟更新下载对话框（三）

var releaseNotes = "版本 v7.7.7\n"
    + "更新日志:\n"
    + "* 新增 若干Bug\n";
​
dialogs.build({
    title: "发现新版本",
    content: releaseNotes,
    positive: "立即下载",
    negative: "取消",
    neutral: "到浏览器下载"
}).on("positive", download)
.on("neutral", () => {
        app.openUrl("https://www.autojs.org");
}).show();
​
var downloadDialog = null;
var downloadId = -1;
​
function download(){
    downloadDialog = dialogs.build({
        title: "下载中...",
        positive: "暂停",
        negative: "取消",
        progress: {
            max: 100,
            showMinMax: true
        },
        autoDismiss: false
    })
        .on("positive", ()=>{
            if(downloadDialog.getActionButton("positive") == "暂停"){
                stopDownload();
                downloadDialog.setActionButton("positive", "继续");
            }else{
                startDownload();
                downloadDialog.setActionButton("positive", "暂停");
            }
        })
        .on("negative", ()=>{
            stopDownload();
            downloadDialog.dismiss();
            downloadDialog = null;
        })
        .show();
    startDownload();
}
​
function startDownload(){
    downloadId = setInterval(()=>{
        var p = downloadDialog.getProgress();
        if(p >= 100){
            stopDownload();
            downloadDialog.dismiss();
            downloadDialog = null;
            toast("下载完成");
        }else{
            downloadDialog.setProgress(p + 1);
        }
    }, 100);
}
​
function stopDownload(){
    clearInterval(downloadId);
}

6、对话框：UI模式下使用对话框

"ui";
​
ui.layout(
    <vertical>
        <button id="callback" align="center">回调形式</button>
        <button id="promise" align="center">Promise形式</button>
        <button id="calc" align="center">简单计算器</button>
    </vertical>
);
​
ui.callback.click(()=>{
    dialogs.confirm("要弹出输入框吗?", "", function(b){
        if(b){
            dialogs.rawInput("输入", "", function(str){
                alert("您输入的是:" + str);
            });
        }else{
            ui.finish();
        }
    });
});
​
ui.promise.click(()=>{
    dialogs.confirm("要弹出输入框吗")
        .then(function(b){
            if(b){
               return dialogs.rawInput("输入");
            }else{
                ui.finish();
            }
        }).then(function(str){
            alert("您输入的是:" + str);
        });
});
​
​
ui.calc.click(()=>{
    let num1, num2, op;
    dialogs.input("请输入第一个数字")
        .then(n => {
            num1 = n;
            return dialogs.singleChoice("请选择运算", ["加", "减", "乘", "除", "幂"]);
        })
        .then(o => {
            op = o;
            return dialogs.input("请输入第二个数字");
         })
        .then(n => {
            num2 = n;
            var result;
            switch(op){
                case 0:
                    result = num1 + num2;
                    break;
                case 1:
                    result = num1 - num2;
                    break;
                case 2:
                    result = num1 * num2;
                    break;
                case 3:
                    result = num1 / num2;
                    break;
                case 4:
                    result = Math.pow(num1, num2);
                    break;
            }
            alert("运算结果", result);
        });
});

0 条回复 A文章作者 M管理员
    暂无讨论，说说你的看法吧