Scriptable入门——创建知乎热榜的小组件

最近笔者被IOS上的一个软件迷上了，那就是Scriptable.

这款软件提供了一些易用的API，使用户可以使用Javascript快捷的构建自定义的小组件。

Scriptable可以做什么

根据笔者观察,Scriptable主要有两个用途:

使用小组件API构建优美的小组件。
笔者抱怨快捷指令稀少的API，不能使用JS脚本来进行数据的处理。这在处理字符串的时候十分明显。Scriptable可以执行行内脚本，而无需打开APP，这一点将大大提高快捷指令的可玩性。

准备工作

首先获取知乎热榜的API，这一步很容易，只需要在Chrome中开启检查就可以了。在网络中捕捉异步请求。

API是:

URL:https://www.zhihu.com/api/v3/feed/topstory/hot-lists/total?limit=50&desktop=true
Method:GET

几个关键API

布局:ListWidget
使内容垂直排列
网络:Request
发送请求，获取热榜
类似与canvas:DrawContext
绘制行之间之间的分割线

代码

// width: 分割线的长度
const width = 150;
// h: 分割线的宽度
h=0.1
// 创建组件
let w = await createWidget();
// 将组件显示为中等
await w.presentMedium();
// 如果在快捷指令中运行的话，在弹窗中显示此小组件
Script.setWidget(w);
// 从API获取热榜
async function get_hot() {let req = new Request("https://www.zhihu.com/api/v3/feed/topstory/hot-lists/total?limit=50&desktop=true")req.headers = {"User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/94.0.4606.71 Safari/537.36"}return req.loadJSON()
}async function createWidget() {let list = new ListWidget();list.backgroundColor = new Color("#3ca4fe", 0.6);let stack = list.addStack();// 水平居中stack.centerAlignContent();// 添加知乎的图标let img = stack.addImage(Image.fromData(await load_image("https://static.zhihu.com/heifetz/assets/apple-touch-icon-152.a53ae37b.png")));img.imageSize = new Size(20, 20);stack.addSpacer(5);// 添加主标题let main_title = stack.addText("知乎热榜");main_title.font = new Font("PingFang SC", 20);let hot_list = (await get_hot()).data;for (let i = 0; i < 4; i++) {let title = hot_list[i].target.title;let link = `zhihu://question/${hot_list[i].target.id}`;let w_text = list.addText(`${i + 1}. ${title}`);w_text.font = new Font("PingFang SC", 14)w_text.url = link;// 绘制分割线let context = new DrawContext()context.size = new Size(width, h)context.opaque = falsecontext.respectScreenScale = truecontext.setFillColor(new Color("#48484b",1))let path = new Path()path.addRoundedRect(new Rect(0, 0, width, h), 3, 2)context.addPath(path)context.fillPath()context.setFillColor(new Color("#373737",1))// 添加分割线list.addImage(context.getImage())}return list
}
// 从url获取图片的数据
async function load_image(url) {let req = new Request(url)req.headers = {"User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/94.0.4606.71 Safari/537.36"}return req.load();
}

Scriptable入门——创建知乎热榜的小组件相关推荐

太好玩了，爬虫、部署API、加小程序，一条龙玩转知乎热榜！
作者 | 周萝卜来源 | 萝卜大杂烩一直想做一个从爬虫到数据处理,到API部署,再到小程序展示的一条龙项目,最近抽了些时间,实现了一个关于知乎热榜的,今天就来分享一下! 数据爬取首先我们看下需要 ...
android开发微博搜索,一款帮助用户自动提取微博热搜、知乎热榜、百度实时热点条目中与特定领域...
HotDetector(全网热门探测仪) 全网热门探测仪一款帮助用户自动提取微博热搜.知乎热榜.百度实时热点条目中与特定领域(科技.娱乐.体育.自定义)有关内容的实用App. 它使用Java SE 8 ...
python爬取知乎标题_python爬知乎热榜
爬项目:知乎热榜标题.热度.简介. 第一步浏览网页源代码确认在哪html 还是js里标题和热度在html 标签内容在js 需要用到正则表达式: 第二先爬html 里的内容调用模块-再请求一下url ...
知乎热榜的话题，为什么从阿里巴巴离职，大萌哥汇总了9大理由，看完我先柠檬酸了！
知乎热榜的话题,为什么从阿里巴巴离职,大萌哥汇总了9大理由,看完我先柠檬酸了!
知乎高级操作系统_一款假的国产操作系统被吹上知乎热榜：浮夸只会害了科技创新...
原标题:一款假的国产操作系统被吹上知乎热榜:浮夸只会害了科技创新哈喽大家好欢迎来到丁咚科技秀相信许多玩知乎的用户或者比较关注国产电脑系统发现的网友,应该会发现最近有款国产操作系统"天 ...
知乎热榜“人脸安全”，这些博主怎么看
人脸识别为人们的生产生活带来诸多便利,也带来各类安全风险.近日,一个人脸安全话题登上知乎热榜,引发全社会对人脸安全的关注. 这则"目前生活里处处离不开人脸识别,如何看待它的安全性,出现风险应 ...
python爬取知乎热榜了解时事
python爬取知乎热榜了解时事需求知乎热榜是我们了解时事的一个重要途径,但是如果我们每天没有那么多时间来刷知乎,但是还是想要了解知乎热榜的话,我们该怎么办呢?在这里,我想到了通过知乎爬虫的手 ...
好家伙！清华电子系大一暑假Python课程大作业上知乎热榜！竟是个CV任务
点击下方卡片,关注"CVer"公众号 AI/CV重磅干货,第一时间送达编辑:Amusi | 来源:知乎 https://www.zhihu.com/question/4719 ...
知乎热榜是什么？怎样上知乎热榜？
一.知乎热榜是什么? 我们常见的在品牌的规划中常见的知乎热榜是知乎的一个内容板块,这个热榜里面聚集了知乎全站讨论度最高并且最有价值的内容.最重要的是知乎的热榜面对每一个用户所显示的内容都是统一的,在很 ...

Scriptable入门——创建知乎热榜的小组件

Scriptable可以做什么

准备工作

几个关键API

代码

Scriptable入门——创建知乎热榜的小组件相关推荐

最新文章

热门文章