自动化脚本ui开发基础入门

自动化脚本ui采用XML 描述界面 + JS 处理逻辑的模式，零基础也能快速上手自定义可视化界面，本文结合官方文档，从核心概念、开发规则、基础控件、全局函数到完整 Demo，全面讲解冰狐 UI 开发入门知识，助力开发者快速搭建实用的自动化脚本界面。

一、UI开发核心认知

冰狐智能辅助自动化脚本UI开发的核心是分离与结合并存：用 XML 搭建界面 "骨架"，负责控件布局、样式、属性定义；用 JS 充当界面 "大脑"，处理点击、选择等交互事件、动态修改控件、执行自动化任务，两者写在同一脚本中，既保证结构清晰，又避免多文件管理麻烦。

1. 核心技术栈

XML ：专属 UI 描述语言，所有界面代码必须包裹在<template></template>标签内，定义线性布局、文本、按钮、输入框等元素，控制界面结构与样式。
JavaScript：平台标准脚本语言，处理 UI 事件、调用全局函数、执行耗时任务，实现界面与业务逻辑的联动。
布局与控件：布局负责容纳控件、控制位置（如线性布局 linear、帧布局 frame）；控件负责具体展示与交互（如 text、edit、button、spinner），与 Android 原生控件逻辑高度一致，降低学习成本。

2. 开发前提与环境配置

设备要求 ：Android 7.0（API 24）及以上手机，安装最新版冰狐智能辅助 APP，开启无障碍服务、后台运行、自启动权限，关闭省电模式防止应用被清理。
账户配置 ：登录冰狐网页端，进入「管理中心 - 账户信息」，设置主 UI 脚本，设置后需重启冰狐 APP 才能生效，这是 UI 显示的必要前提。
开发规则 ：UI 描述与 JS 逻辑必须同文件；不可直接执行 UI 脚本，需通过网页端 "调试运行" 生效；UI 线程禁止耗时操作，必须用runTask开启新线程执行任务。

3. 关键UI规则

UI 描述必须放在<template>标签中，首个子元素必须是布局（如 linear）。
main函数首行必须调用setupUI()，否则无法创建界面。
用ui(控件id)获取控件对象，实现动态操作。
事件绑定支持 XML 直接绑定（如onClick="onClick"）和 JS 动态绑定（ui(id).on(事件名, 处理函数)）两种方式。
耗时任务（如网络请求、批量操作）禁止在 UI 脚本中直接执行，必须用runTask调用独立任务脚本。

二、UI 基础布局与常用控件

冰狐 UI 布局简化了 Android 原生逻辑，核心用线性布局（linear） 即可满足绝大多数场景，常用控件覆盖文本、输入、按钮、选择、图片等基础交互需求，以下是核心用法详解。

1. 核心布局：线性布局（linear）

线性布局是冰狐最常用布局，支持水平（horizontal）和垂直（vertical）两种排列方向，通过layoutWeight实现控件权重分配，适配不同屏幕尺寸。

关键属性：
- orientation：布局方向，vertical 垂直、horizontal 水平。
- width/height：尺寸，matchParent填充父容器，wrapContent自适应内容，也可设固定数值。
- layoutWeight：权重，按比例分配剩余空间，实现自适应布局。
- gravity：子元素对齐方式，center 居中、left 左对齐、right 右对齐。

2. 常用基础控件

（1）文本控件（text）

用于展示静态文字，支持设置文本内容、大小、对齐、颜色等属性。

XML 复制代码

<text id="show" text="demo" size="26" gravity="center" layoutWeight="1"/>

核心属性：id（唯一标识）、text（显示内容）、size（字体大小）、gravity（对齐方式）。

（2）输入控件（edit）

用于接收用户输入，支持默认文本、权重、对齐等设置，适用于参数输入、内容编辑。

XML 复制代码

<edit text="默认文本" gravity="center" layoutWeight="2"/>

（3）按钮控件（button）

触发点击事件，绑定交互函数，是自动化脚本的核心交互控件。

XML 复制代码

<button id="btn" text="按钮" gravity="center" layoutWeight="1" onClick="onClick"/>

核心属性：onClick（绑定点击处理函数）。

（4）下拉选择控件（spinner）

实现下拉菜单选择，支持预设选项，适用于分类选择、参数切换场景。

XML 复制代码

<spinner id="select" entries="苹果|香蕉|橘子" onSelected="onSpinnerSelected"/>

核心属性：entries（选项列表，用|分隔）、onSelected（选择回调函数）。

（5）图片控件（image）

展示网络图片，支持设置宽高、来源，适用于图标、logo 展示。

XML 复制代码

<image src="https://www.baidu.com/img/bd_logo1.png" width="30" height="50"/>

三、UI 核心全局函数详解

全局函数是冰狐 UI 开发的核心工具，涵盖界面创建、控件操作、弹窗、多线程、界面切换等功能，以下是高频函数用法：

函数名	作用	调用说明
setupUI()	创建并显示 UI	必须在 main 函数首行调用，无参数
ui(id)	根据 id 获取控件	参数为控件 id 字符串，返回控件对象
openUI (脚本名)	打开新 UI 界面	参数为目标 UI 脚本名称，实现多界面切换
closeUI()	关闭当前 UI 界面	无参数，退出当前界面
runTask (任务脚本)	开启新线程执行耗时任务	避免 UI 阻塞，参数为任务脚本名
showDialog()	显示对话框	支持消息框、输入框，自定义按钮与回调
onUIResume()	UI 显示回调	界面加载完成自动调用，用于初始化
onUIPause()	UI 消失回调	界面退出自动调用，用于释放资源
onBackPressed()	返回键回调	按下手机返回键自动调用

函数关键注意点

setupUI()是 UI 显示的核心，缺少则界面无法渲染，必须放在main函数第一行。
runTask()是避免 UI 卡顿的关键，所有耗时自动化任务（如批量点击、数据采集）必须通过该函数调用独立脚本，不可直接写在 UI 逻辑中。
回调函数onUIResume、onUIPause无需手动调用，系统自动触发，适合做界面初始化与资源清理。

四、完整 UI Demo 源码

以下是结合官方示例优化的完整自动化脚本 UI Demo，实现文本展示、输入框、按钮点击、下拉选择、弹窗提示、多线程任务等功能，复制到冰狐网页 IDE 即可调试运行。

Demo 功能说明

界面包含文本、输入框、按钮、下拉选择、图片，垂直 + 水平线性布局组合。
按钮点击触发弹窗，下拉选择打印选中项，界面显示 / 消失打印日志。
按钮点击通过runTask调用后台任务，避免 UI 阻塞，符合平台规范。

完整源码

XML 复制代码

<!-- UI布局：XML描述界面 -->
<template>
    <!-- 垂直线性布局：根布局 -->
    <linear orientation="vertical" width="matchParent" height="matchParent">
        <!-- 水平线性布局：放置文本、输入框、按钮 -->
        <linear orientation="horizontal" width="matchParent" height="wrapContent">
            <!-- 文本控件：展示动态内容 -->
            <text id="showText" text="初始文本" size="28" gravity="center" layoutWeight="1"/>
            <!-- 输入控件：接收用户输入 -->
            <edit id="inputEdit" text="请输入内容" gravity="center" layoutWeight="2"/>
            <!-- 按钮控件：触发点击事件 -->
            <button id="actionBtn" text="点击执行" gravity="center" layoutWeight="1" onClick="onBtnClick"/>
        </linear>
        <!-- 下拉选择控件：选项选择 -->
        <spinner id="selectSpinner" entries="选项1|选项2|选项3" onSelected="onSpinnerSelect"/>
        <!-- 图片控件：展示网络图片 -->
        <image src="https://www.baidu.com/img/bd_logo1.png" width="40" height="60" gravity="center"/>
    </linear>
</template>

<script>
// 主函数：程序入口
function main() {
    // 必须首行调用：创建UI
    setupUI();
    // 动态修改文本控件内容
    ui("showText").setText("冰狐UI Demo");
}

// UI显示回调：系统自动调用
function onUIResume() {
    console.log("=== UI界面已显示 ===");
}

// UI消失回调：系统自动调用
function onUIPause() {
    console.log("=== UI界面已消失 ===");
}

// 按钮点击事件：XML绑定
function onBtnClick(event) {
    console.log("按钮被点击");
    // 获取输入框内容
    let inputContent = ui("inputEdit").getText();
    // 弹窗提示：显示输入内容
    showDialog(0, "你输入的内容：" + inputContent, "提示", [
        {type: "positive", text: "确定", fn: onDialogConfirm},
        {type: "negative", text: "取消"}
    ]);
}

// 弹窗确认回调
function onDialogConfirm() {
    console.log("弹窗确认按钮点击");
    // 开启新线程执行后台任务（避免UI阻塞）
    runTask("autoTask");
}

// 下拉选择事件：XML绑定
function onSpinnerSelect(name, position) {
    console.log("选中项：" + name + "，位置：" + position);
    // 动态修改文本为选中项
    ui("showText").setText("选中：" + name);
}

// 返回键事件
function onBackPressed() {
    console.log("按下返回键，关闭UI");
    closeUI();
}
</script>

配套后台任务脚本（autoTask.js）

该脚本为耗时任务示例，模拟自动化操作，通过runTask调用，避免阻塞 UI 线程：

TypeScript 复制代码

// 后台任务脚本：autoTask.js
function main() {
    console.log("=== 开始执行后台自动化任务 ===");
    // 模拟耗时操作（如点击、滑动、数据处理）
    for (let i = 1; i <= 3; i++) {
        console.log("任务执行中：第" + i + "步");
        // 延时模拟操作
        sleep(1000);
    }
    console.log("=== 后台任务执行完成 ===");
}

五、Demo 运行与调试步骤

创建脚本 ：登录冰狐网页端，新建两个脚本，分别命名为mainUI（主 UI 脚本）和autoTask（后台任务脚本），将上述源码分别粘贴对应脚本。
配置主 UI ：进入「管理中心 - 账户信息」，设置mainUI为主 UI 脚本，重启冰狐 APP。
调试运行：在网页 IDE 点击 "调试运行"，手机端自动显示 UI 界面，测试输入、点击、下拉选择等功能。
查看日志：通过控制台查看打印信息，验证事件触发、任务执行是否正常。

六、冰狐 UI 开发常见问题与避坑指南

UI 不显示 ：未设置主 UI 脚本、未重启 APP、main函数未调用setupUI()，逐一排查即可。
界面卡顿 ：UI 线程执行了耗时任务，必须用runTask分离逻辑，UI 只负责轻量交互。
控件无法操作 ：控件id错误、未通过ui(id)获取对象、XML 标签书写错误。
事件不触发 ：函数名绑定错误（如onClick值与 JS 函数名不一致）、回调函数拼写错误。
多设备参数输入 ：优先用自定义数据替代 UI 输入，多设备场景下效率更高、操作更简便。

七、总结

UI 开发是自动化脚本的核心能力，通过XML+JS 的极简模式，无需原生开发经验，即可快速搭建可视化交互界面。本文覆盖了从环境配置、布局控件、全局函数到完整 Demo 的全流程知识，强调setupUI初始化、runTask多线程、事件绑定等核心要点，帮助开发者避开常见坑点。掌握基础 UI 开发后，可进一步学习动态 UI 创建（createUI）、悬浮对话框、悬浮按钮配置、多界面切换等高级功能，结合自动化定位、点击、OCR 等能力，开发出更专业、更实用的 Android 自动化脚本，实现 APP 自动操作、批量处理、自定义快捷工具等场景需求。