📊 利用 Scriptable 实现 iOS 小组件实时查看网站访问数据（基于 51LA）
你是否想随时在 iPhone 主屏查看自己网站的访问数据？
如果你使用的是 51LA 网站统计，配合 iOS 上的 Scriptable 工具，只需几十行代码，就能实现一个美观实用的小组件，实时显示网站的访问统计数据。
本文将手把手教你实现这个小工具。
🧰 所需工具
Scriptable
一个可以通过使用JavaScript来创建我们自己想要的小组件的应用（App Store 免费下载）
51.LA访问统计
国内网站访问统计平台
你的网站
可以添加自定义 <script> 标签的网站
⚙️ 第一步：获取 51LA 统计代码（如有即可跳过）
- 前往 v6.51.la/report/setu...，根据网站教程安装统计代码
🧑💻 第二步：在 Scriptable 中创建脚本
打开 Scriptable，点击右上角「+」新建脚本，粘贴以下代码，并将其中的 你的ID 替换为你的统计代码 ID（即第一步图中打码的ID）
javascript
// 获取访问数据
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统计美化
Scriptable 官方文档
docs.scriptable.app/
我有一个设计周刊
每周，我都会塞几样小东西进这封信里：
一个页面的转角、一个工具的灵性、一段话的温度。 没人知道它会改变谁的哪一天。
