利用 Scriptable 实现 iOS 小组件实时查看网站访问数据

你是否想随时在 iPhone 主屏查看自己网站的访问数据？
如果你使用的是 51LA 网站统计，配合 iOS 上的 Scriptable 工具，只需几十行代码，就能实现一个美观实用的小组件，实时显示网站的访问统计数据。

本文将手把手教你实现这个小工具。

🧰 所需工具

Scriptable

一个可以通过使用JavaScript来创建我们自己想要的小组件的应用（App Store 免费下载）

51.LA访问统计

https://www.51.la/

国内网站访问统计平台

你的网站

可以添加自定义 <script> 标签的网站

⚙️ 第一步：获取 51LA 统计代码（如有即可跳过）

前往 https://v6.51.la/report/setup/params/，根据网站教程安装统计代码。（安装完成后记得在配置——参数设置——数据挂件中开启数据挂件功能）

🧑‍💻 第二步：在 Scriptable 中创建脚本

打开 Scriptable，点击右上角「+」新建脚本，粘贴以下代码，并将其中的你的ID 替换为你的统计代码 ID（即第一步图中打码的ID）

// 获取访问数据
async function fetchVisitorStats() {
  try {
    const url = "https://v6-widget.51.la/v6/你的ID/quote.js?";
    const request = new Request(url);
    const result = await request.loadString();
    const numbers = result.match(/(?<=<\/span><span>).*?(?=<\/span><\/p>)/g);
    return {
      todayVisitors: numbers[1],
      yesterdayVisitors: numbers[3],
      monthlyVisits: numbers[5],
      totalVisits: numbers[6]
    };
  } catch (error) {
    console.error("Failed to fetch visitor stats:", error);
    return {
      todayVisitors: '加载中',
      yesterdayVisitors: '加载中',
      monthlyVisits: '加载中',
      totalVisits: '加载中'
    };
  }
}

// 添加千位分隔符格式化函数
function formatNumberWithCommas(numStr) {
  if (!/^\d+$/.test(numStr)) return numStr;
  return numStr.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

// 渲染 widget
async function createWidget(data) {
  const widget = new ListWidget();

  // 设置背景图片
  const bgImgUrl = "https://img.picui.cn/free/2025/06/06/6842b18d06be0.png";
  const bgReq = new Request(bgImgUrl);
  const bgImage = await bgReq.loadImage();
  widget.backgroundImage = bgImage;

  widget.setPadding(12, 14, 12, 14);

  // 格式化所有数据
  const formattedData = {
    todayVisitors: formatNumberWithCommas(data.todayVisitors),
    yesterdayVisitors: formatNumberWithCommas(data.yesterdayVisitors),
    monthlyVisits: formatNumberWithCommas(data.monthlyVisits),
    totalVisits: formatNumberWithCommas(data.totalVisits)
  };

  // 顶部标签
  const tagStack = widget.addStack();
  tagStack.layoutHorizontally();
  tagStack.setPadding(2, 8, 2, 8);
  tagStack.backgroundColor = new Color("#FFFFFF", 0.2);
  tagStack.cornerRadius = 12;

  const tagText = tagStack.addText("个站数据");
  tagText.font = Font.regularSystemFont(9);
  tagText.textColor = new Color("#FFFFFF");

  widget.addSpacer(6);

  // 总访问量区域
  const countStack = widget.addStack();
  countStack.layoutHorizontally();
  countStack.centerAlignContent();

  // 左边数字
  const totalVisitsText = countStack.addText(formattedData.totalVisits);
  totalVisitsText.font = new Font("DIN Alternate", 30);
  totalVisitsText.textColor = new Color("#FFFFFF");

  countStack.addSpacer(6);

  // 右边文字下移 10px
  const rightStack = countStack.addStack();
  rightStack.layoutVertically();
  rightStack.addSpacer(10);

  const descText = rightStack.addText("总访问量");
  descText.font = Font.regularSystemFont(11);
  descText.textColor = new Color("#698F9F");

  widget.addSpacer(8);

  // 添加访问数据行
  function addVisitRow(label, value) {
    const row = widget.addStack();
    row.layoutHorizontally();

    const left = row.addText(label);
    left.font = Font.regularSystemFont(13);
    left.textColor = new Color("#FFFFFF");

    row.addSpacer();

    const right = row.addText(value.toString());
    right.font = new Font("DIN Alternate", 13);
    right.textColor = new Color("#31BDF9");
  }

  addVisitRow("今日访问", formattedData.todayVisitors);
  widget.addSpacer(4);
  addVisitRow("昨日访问", formattedData.yesterdayVisitors);
  widget.addSpacer(4);
  addVisitRow("本月访问", formattedData.monthlyVisits);

  return widget;
}

// 主逻辑
const data = await fetchVisitorStats();
const widget = await createWidget(data);
Script.setWidget(widget);
Script.complete();
widget.presentSmall();

📱 第三步：添加小组件到桌面

1.长按 iPhone 桌面进入编辑模式

2.点击左上角「+」，搜索并添加 Scriptable 小组件

3.长按组件 → 编辑 → 选择你刚刚创建的脚本

💡 延伸玩法

你可以与AI工具“友好对话”让他帮你创造出更多好玩的小组件。

示例：请你帮我使用 JS 在 Scriptable 中创建一个XXX小组件，请注意查询 Scriptable 官方文档，编写的代码要符合官方文档要求。

参考资料：

51la统计美化

https://blog.leonus.cn/2022/51la.html

Scriptable 官方文档
https://docs.scriptable.app/