利用 Scriptable 实现 iOS 小组件实时查看网站访问数据（基于 51LA）

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

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

所需工具

Scriptable

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

51.LA访问统计

https://www.51.la/

国内网站访问统计平台

你的网站

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

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

  1. 前往 https://v6.51.la/report/setup/params/，根据网站教程安装统计代码

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

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

  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
ounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(line// 获取访问数据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, ",");}
// 渲染 widgetasync 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/