Auto.js UI 布局语法——用类 XML 声明式构建界面

为什么需要 UI

纯脚本自动跑适合简单重复任务，但当你需要：

• 让用户配置参数再执行（比如「签到哪些 APP」）
• 显示进度和状态（比如「当前已完成 3/10」）
• 提供控制按钮（开始 / 暂停 / 停止）
• 打造成给别人用的独立 APK

UI 就是必须的。Auto.js 的 UI 系统用类 XML 语法声明式描述布局，底层自动转成 Android View。

基本结构

"ui"; // 第一行必须声明这是 UI 脚本

ui.layout(
  <vertical bg="#f5f5f5" padding="16">
    <text text="Auto.js 签到助手" textSize="20sp" textColor="#333" gravity="center"/>
    <button id="btn_start" text="开始签到"/>
    <button id="btn_stop" text="停止" visibility="gone"/>
    <text id="status" text="准备就绪" textSize="14sp" textColor="#666"/>
  </vertical>
);

执行后立刻弹出一个界面。"ui" 字符串是第一行必须的声明。

容器组件

属性语法

<button
  id="my_btn"           <!-- 组件 ID，代码里用 ui.my_btn 访问 -->
  text="按钮文字"        <!-- 显示文字 -->
  textSize="16sp"        <!-- 字号 -->
  textColor="#ff0000"    <!-- 文字颜色 -->
  bg="#cccccc"           <!-- 背景色 -->
  w="*"                  <!-- 宽度：*=铺满、auto=自适应、数字=像素 -->
  h="auto"               <!-- 高度 -->
  gravity="center"       <!-- 内部对齐 -->
  padding="10"           <!-- 内边距 -->
  margin="5"             <!-- 外边距 -->
  visibility="gone"      <!-- visible / invisible / gone -->
/>

完整示例：参数配置界面

"ui";

ui.layout(
  <vertical padding="16">
    <text text="每日自动签到" textSize="22sp" textStyle="bold" gravity="center"/>
    
    <checkbox id="chk_taobao" text="淘宝" checked="true"/>
    <checkbox id="chk_jd" text="京东" checked="false"/>
    <checkbox id="chk_alipay" text="支付宝" checked="true"/>
    
    <horizontal>
      <text text="执行时间：" textSize="14sp"/>
      <input id="inp_hour" inputType="number" text="8"/>
      <text text=":"/>
      <input id="inp_minute" inputType="number" text="0"/>
    </horizontal>
    
    <button id="btn_save" text="保存配置"/>
    <button id="btn_run" text="立即执行" bg="#ff6b35"/>
  </vertical>
);

// 点击保存
ui.btn_save.click(function() {
  var config = {
    apps: [],
    hour: parseInt(ui.inp_hour.text()),
    minute: parseInt(ui.inp_minute.text())
  };
  if (ui.chk_taobao.isChecked()) config.apps.push("淘宝");
  if (ui.chk_jd.isChecked()) config.apps.push("京东");
  if (ui.chk_alipay.isChecked()) config.apps.push("支付宝");
  
  files.write("/sdcard/signin_config.json", JSON.stringify(config));
  toast("配置已保存");
});

继续阅读：UI 事件绑定