创建带定时刷新功能的小组件

iOS自定义小组件开发
在 Scriptable应用中，你可以创建各种有趣的小组件，用于显示信息、执行任务等。本篇文章将教你如何创建一个小组件，其中包含定时刷新功能，以便定期更新显示的信息。

步骤 1：获取数据

首先，我们需要获取一些数据以在小组件中显示。在本例中，我们从远程API获取数据。下面是获取数据的代码：

// 定义API URL
const url = "https://image.hkiii.cn/api/getData.php";
const request = new Request(url);

// 发起 HTTP GET 请求并等待响应
const response = await request.loadJSON();

步骤 2：创建小组件

接下来，我们将创建一个新的小组件，并将数据添加到小组件中。我们还可以设置背景图和文本样式。以下是创建小组件的代码：

// 创建一个新的小组件
let widget = new ListWidget();

// 获取五个数值
const toDayValue = response.ToDay;
const weekValue = response.Week;
const halfMonthValue = response.HalfMonth;
const oneMonthValue = response.OneMonth;
const halfYearValue = response.HalfYear;

// 添加背景图
const backgroundImage = await getImage("https://example.com/background.jpg");
widget.backgroundImage = backgroundImage;

// 设置标题文本
const titleText = widget.addText("数据统计");
titleText.textColor = new Color("#fff");
titleText.font = Font.boldSystemFont(20);

步骤 3：定时刷新

要实现定时刷新功能，我们需要使用Scriptable的计时器模块。下面是如何设置计时器来定时刷新小组件的代码：

// 导入计时器模块
const Timer = importModule('Timer');

// 定义计时器的时间间隔为5分钟（以毫秒为单位）
const refreshInterval = 5 * 60 * 1000; // 5分钟

// 创建一个新的计时器
const timer = new Timer();

// 安排计时器以在5分钟后刷新小组件
timer.schedule(() => {
    // 重新设置小组件
    if (config.runsInWidget) {
        widget.presentMedium();
    }
}, refreshInterval, true);

步骤 4：显示小组件

最后，我们根据小组件的尺寸使用 widget.present() 方法显示小组件。根据你的需求，你可以选择不同的尺寸（small、medium、large）来显示小组件。

// 使用预览模式显示小组件
if (config.runsInWidget) {
    widget.presentMedium();
} else {
    QuickLook.present(widget);
}

完整代码

const url = "https://image.hkiii.cn/api/getData.php";

const refreshInterval = 5 * 60 * 1000; // 5分钟

const request = new Request(url);

// 发起 HTTP GET 请求并等待响应
const response = await request.loadJSON();

// 获取当前小组件的尺寸
const widgetSize = config.widgetFamily;

// 创建一个新的小组件
let widget = new ListWidget();

// 获取五个数值
const toDayValue = response.ToDay;
const weekValue = response.Week;
const halfMonthValue = response.HalfMonth;
const oneMonthValue = response.OneMonth;
const halfYearValue = response.HalfYear;

// 添加背景图
const backgroundImage = await getImage("https://elf-deco.img.maibaapp.com/content/picture-forum-ugc/20231017/15789373/04147fb69e6e20973b/1697514901_0.png"); // 替换为你的背景图 URL
widget.backgroundImage = backgroundImage;

// 设置标题文本
const titleText = widget.addText("数据统计");
titleText.textColor = new Color("#fff");
titleText.font = Font.boldSystemFont(20);

// 添加间距
widget.addSpacer(10);

// 创建文本行函数
function createTextRow(title, value) {
    const row = widget.addStack();
    row.layoutHorizontally();
    const titleLabel = row.addText(title);
    titleLabel.font = Font.boldSystemFont(16);
    titleLabel.textColor = new Color("#eee");
    const valueLabel = row.addText(value.toString());
    valueLabel.font = Font.systemFont(16);
    valueLabel.textColor = new Color("#eee");
}

createTextRow("今日生成文件数量：", toDayValue);
createTextRow("本周生成文件数量：", weekValue);
createTextRow("半月生成文件数量：", halfMonthValue);
createTextRow("整月生成文件数量：", oneMonthValue);
createTextRow("半年生成文件数量：", halfYearValue);

// 使用预览模式显示小组件
if (config.runsInWidget) {
    if (widgetSize === "small") {
        widget.presentSmall();
    } else if (widgetSize === "medium") {
        widget.presentMedium();
    } else if (widgetSize === "large") {
        widget.presentLarge();
    }
} else {
    QuickLook.present(widget);
}

// 创建定时器以在5分钟后刷新小组件
const timer = new Timer();
timer.schedule(() => {
    // 重新设置小组件
    if (config.runsInWidget) {
        if (widgetSize === "small") {
            widget.presentSmall();
        } else if (widgetSize === "medium") {
            widget.presentMedium();
        } else if (widgetSize === "large") {
            widget.presentLarge();
        }
    }
}, refreshInterval, true);

// 获取背景图函数
async function getImage(imageURL) {
    const req = new Request(imageURL);
    return await req.loadImage();
}