关于javascript:快使用Scriptable自己开发一个iPhone小组件吧

最近苹果的 iOS 系统升级到了 iOS 14，这次的更新我比拟关注的就是降级的 小组件 性能，这次更新咱们能够将 小组件 搁置在 主屏幕中的任何地位，能够让咱们更加便捷的查看一些信息，从而省去了还须要关上 APP 去查看音讯的步骤，感觉很不便。

看到这里一些同学可能会说，性能是挺不错的，如果我本人也能开发一个小组件展现本人想看的内容就好了。是呀，哪一个小男孩不想领有一个专属于本人的 iOS 小组件。

别慌，最近发现了一个 APP 能够让咱们通过应用 JavaScript 来创立咱们本人想要的 小组件 。这个 APP 的名字就是Scriptable，还是验证了Jeff Atwood 那句话，任何能够应用 JavaScript 来编写的利用，最终会由 JavaScript 编写。作为一个前端有没有感觉很开心，又有一个中央能够让你来大展身手了，那就趁热连忙来理解一下吧。

Scriptable 的简略介绍

工欲善其事，必先利其器 ，咱们先来理解一下 Scriptable 有哪些作用吧，从下面官网上的介绍咱们能够晓得，这个 APP 能够让咱们 应用 JavaScript 来自动化 iOS。这句话是什么意思呢？就是咱们能够提前编写好一些代码去执行一些特定的工作，比方：获取 GitHub 下面的 Trending 我的项目的名字和介绍、理解 Hacker News 的最新资讯、获取本人的最近日程、以及本人的 TODO 列表等等。当然这都只是一些最根本的应用场景，你必定有本人的想法，看完这篇文章之后就去本人去实现一个举世无双的小利用吧。

下面列举的是一些 Scriptable 的个性，这些个性包含：

• 反对 ES6 语法
• 能够应用 JavaScript 调用一些原生的 API
• Siri 快捷方式
• 欠缺的文档反对
• 共享表格扩大
• 文件系统继承
• 编辑器的自定义
• 代码样例
• 以及通过 x -callback-url 和其它 APP 交互

是不是感觉还是挺不错的，这些个性曾经能够让咱们去做很多能够自动化的事件了。

开始前的筹备工作

• 一台降级到 iOS 14 的 iPhone 手机
• 装置 Scriptable 应用程序

下载实现之后关上利用，咱们能够看到一些曾经写好的例子：

点击小卡片会间接运行相应的程序，点击小卡片右上角的 更多 按钮进入相应程序的代码编辑模式。

底部有一个悬浮的操作栏，右边第一个按钮是一个设置按钮，你能够为以后的小程序设置图标，色彩，等等：

右边第二个按钮是一个文档提醒按钮，点击能够搜寻想要应用的相干的 API：

最左边是一个运行按钮，点击会间接在手机上运行你编写的应用程序。这个大家应该一看就晓得了：

我认为通过在手机上的编辑器进行代码的编写会比拟吃力和吃力，然而试了一下发现还好。因为手机上的编辑器也有比较完善的语法提醒性能，编写代码的体验尽管不如在电脑上那般难受，但也是在能够承受的范畴之内。

下面是一些对于 Scriptable APP 的简略的介绍，你能够本人在手机上好好体验一下。我感觉整个 APP 很简洁，然而性能还是很弱小的。

第一个 Hello World 小组件

咱们学习编程语言的第一步就是输入Hello World，所以咱们应用 Scriptable 的第一个小利用就是在主屏幕上展现Hello Wolrd。

我集体感觉在你开始真正的开发本人想要的小组件之前，开发一个 Hello World 的小组件还是很有必要的，因为这个过程绝对容易一点，能够减少咱们的自信心。咱们能够通过这个小程序来建设起咱们开发小组件的 手感，并且咱们是能够间接在手机的屏幕上看到这个后果的，是不是还蛮有成就感的。

在编码的过程中有几个抉择，你能够抉择间接在手机的编辑器上进行编码，也能够通过 Mac 的 iCloud 云盘 的同步性能，在 Mac 电脑上用本人相熟的编辑器开发。如果你有蓝牙的键盘，能够间接应用蓝牙键盘连贯到手机上应用本人的键盘进行编码。依据本人的条件抉择一个本人难受的形式进行编码。

接下来就是 Hello World 小组件的代码了：

// Variables used by Scriptable.
// These must be at the very top of the file. Do not edit.
// icon-color: cyan; icon-glyph: greater-than-equal;

// 以下代码仅供学习交换应用

// 判断是否是运行在桌面的组件中
if (config.runsInWidget) {
  // 创立小部件
  const widget = new ListWidget();
  // 增加文本
  const text = widget.addText("Hello, World!");
  text.textColor = new Color("#000000");
  text.font = Font.boldSystemFont(36);
  text.centerAlignText();
  // 增加渐变色背景
  const gradient = new LinearGradient();
  gradient.locations = [0, 1];
  gradient.colors = [new Color("#F5DB1A"), new Color("#F3B626")];
  widget.backgroundGradient = gradient;
  // 设置部件
  Script.setWidget(widget);
}

下面的代码还是比较简单的，置信大家看一下就明确了。我再简略介绍一下，最结尾的正文是 Scriptable 本人生成的，用来设置小卡片的图标和图标色彩；接下来的一个 if 判断表明咱们心愿接下来的代码是在小组件的条件下运行的，用来生成咱们的小组件。

而后接下来的代码就是创立小组件，增加文本，设置本文的色彩、字体以及对齐形式。而后增加了一个突变的背景，最初把下面生成的小组件通过 Script.setWidget() 进行设置。这样咱们的 Hello World 小组件就算实现啦。

“明天吃点啥”小组件

兴许 5 分钟过后你就开始不满足一个简略的 Hello World 小组件了，你晓得你的征途是星辰大海，所以你要做出一些有理论利用价值的小组件。但此时的你曾经工作到早晨十点多了，非常想给本人点一个夜宵来犒劳一下本人。然而你特地纠结吃啥？

看了看楼下的炒粉干和山东杂粮煎饼以及烤冷面，你非常纠结要吃啥。所以为了节省时间我决定开发一个帮你抉择吃什么的小组件。就叫它：“明天吃点啥”吧。

看看这个组件的图标是不是就很有食欲？当你不确定要吃啥的时候就点击这个小组件，而后咱们编写的程序就会运行，它会在面板上列出你这次要吃的选项，你点击抉择，马上就晓得本人要吃啥了，是不是解决了你迟迟下不定信心要吃啥的纠结状态。

为了明确通知你这次的抉择是什么，我特意在抉择之后给你发送一个抉择后果的告诉，是不是很人性化????，你必定还发现了为什么食物的名字与图片不合乎。是的，我是成心这样做的，为了营造一种你行将吃大餐的假象????。

上面是一张动图，能够提前感受一下这个过程：

因为我之前有帮忙过共事应用 Swift 开发原生 iOS 的一些教训，所以这外面跟原生相干的一些 API 我看着还算相熟的，也好上手。就算没有相干的开发教训关系也不大，毕竟文档对于相干 API 的解释都还算清楚的，置信你看一看就能够很快上手的。

因为这个小组件的代码量略微多一点，就不在这里展现了；大家如果有趣味的话能够在 scriptable-scripts 看到这个小组件的源码局部，写的时候比拟仓促，还有很多能够欠缺的中央。如果你有什么好的意见也能够提出来，咱们一起学习提高。

对小组件的一些思考

更新了 iOS 14 之后，发现手机上的很多 APP 都新增了相干的小组件，这让用户能够疾速不便的浏览一些要害的信息，也能够疾速中转具体的服务。对用户来说还是很有帮忙的。

对于开发者来说，这外面也存在一些新的时机。就算不会原生的 iOS 开发，咱们也能够借助像 Scriptable 这样的小组件平台，来发明出一些乏味，有价值，有意义的小组件。

有没有发现小组件是不是跟小程序在某些方面很类似？感觉当前应该会呈现零碎级别的“小程序”平台，如果 Android 和iOS再搞一个对立的开发平台，前端开发者又能够扬帆远航了，想想是不是有点小冲动呢。。。

学习与交换

如果你对应用 Scriptable 开发小组件很有趣味，也欢送大家进 Scriptable 小组件交换群 进行交换探讨。

文章到这里就完结了，如果你有什么意见和倡议欢送给我留言。你还能够关注我的公众号 关山不难越，能够及时获取最新好玩乏味文章的更新。

注：“明天吃点啥”小组件的图标应用的是 https://undraw.co/ 网站上的，相干食物的图片来自 https://unsplash.com/，每张图片来自哪个创作者在代码的正文中有阐明。