快使用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/，每张图片来自哪一个创做者在代码的注释中有说明。