关键词：
最近苹果的 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 小组件了，你知道你的征途是星辰大海，所以你要做出一些有实际应用价值的小组件。但此时的你已经工作到晚上十点多了，十分想给自己点一个夜宵来犒劳一下自己。但是你特别纠结吃啥？
看了看楼下的炒粉干和山东杂粮煎饼以及烤冷面，你十分纠结要吃啥。所以为了节省时间我决定开发一个帮你选择吃什么的小组件。就叫它：“今天吃点啥”吧。
看看这个组件的图标是不是就很有食欲？当你不确定要吃啥的时候就点击这个小组件，然后我们编写的程序就会运行，它会在面板上列出你这次要吃的选项，你点击选择，马上就知道自己要吃啥了，是不是解决了你迟迟下不定决心要吃啥的纠结状态。
为了明确告诉你这次的选择是什么，我特意在选择之后给你发送一个选择结果的通知，是不是很人性化
java-开发工具快来看看你使用的开发工具在不在内?
前言我们上一文章，成功搭建了JDK，和运行了我们java历险中第一个java程序，相信刚开始学习的兄弟们，都已经自己尝试去做了，要想技术好，无非就是多练习，千万别相信自己是天才，要相信自己资质平庸，需要多练习才是王... 查看详情
iPhone模拟器有时慢，有时快
...MacBookPro2.4ghz8GBRAM，MacBookAir1.4ghz2GBRAM，两者都具有320M）上使用iPhone模拟器有时非常慢，有时非常快。事实上，如果我编译并运行调试 查看详情
iPhone 开发多线程，NSAutoreleasePool
...遍地播放哔哔声，并闪烁显示时间的标签。所以标签闪烁使用了一个NSTimer，而哔哔声在它自己的Thread上进行，这样纯C函数（用于系统声音id完成回调）可以使用[NST 查看详情
如何开发自己的第一个serverlesscomponent(代码片段)
...ssComponent的全栈解决方案介绍ServerlessComponent是什么和如何使用ServerlessComponent开发一个全栈应用。但是目前社区还不够完善，当我们需要一个还没有的组件时，怎么办呢？与其向官方提交issue，说明需求，不如自己动手撸一个，岂... 查看详情
如何在 PHP Scriptable Web Browser 中调用 javascript 函数
】如何在PHPScriptableWebBrowser中调用javascript函数【英文标题】：HowtocalljavascriptfunctioninPHPScriptableWebBrowser【发布时间】：2013-10-2410:07:15【问题描述】：我正在使用PHPScriptableWebBrowser从一个网站下载一些数据。我们必须在表单中为字段... 查看详情
快应用开发的踩坑之旅(代码片段)
...题。可能因为一开始不熟悉文档，导致配置错误，或是api使用错误。当然开发的时候我们也不能确认框架没有问题，是否存在bug。所以在某些出错的情况下，我们也许会不断怀疑自己，怀疑框架，最终怀疑人生。这时候就需要开... 查看详情
ios用xcode开发，怎么打包ipa包，在未越狱的iphone上可以直接安装
...直接安装，而不提示授权失败。用什么证书打包？目前，使用Appstore和Hoc两种发布证书打包的ipa，都无法在没有将UUID添加到设备列表里面的真机上安装。只有加入UUID的和越狱的设备是可以安装的。被安装的机器只能是开发机或... 查看详情
以秒显示 iPhone 锁屏（自己使用）
】以秒显示iPhone锁屏（自己使用）【英文标题】：ShowiPhonelockscreenwithseconds(ownusage)【发布时间】：2018-03-2406:00:05【问题描述】：注意：这不打算由Apple发布-仅供我自己使用查看我的iPhone(iOS11)的锁定屏幕上显示的秒数。似乎没有任... 查看详情
类转换：java.lang.String 不能转换为 org.mozilla.javascript.Scriptable
】类转换：java.lang.String不能转换为org.mozilla.javascript.Scriptable【英文标题】：ClassCast:java.lang.Stringcannotbecasttoorg.mozilla.javascript.Scriptable【发布时间】：2014-04-2106:48:54【问题描述】：在调用http适配器过程时，它会弹出一个包含Procedure... 查看详情
寻找比在 Scriptable Objects 中使用字符串在别处调用特定方法更好的解决方案
】寻找比在ScriptableObjects中使用字符串在别处调用特定方法更好的解决方案【英文标题】：LookingforabettersolutionthanusingstringswithinScriptableObjectstocallspecificmethodselsewhere【发布时间】：2021-01-0611:24:32【问题描述】：我被要求在我的问题... 查看详情
使用 UIRotationGestureRecognizer Cocos2D-iPhone CCSprite 旋转速度非常快
】使用UIRotationGestureRecognizerCocos2D-iPhoneCCSprite旋转速度非常快【英文标题】：CCSpriteRotationSpeedisveryfastusingUIRotationGestureRecognizerCocos2D-iPhone【发布时间】：2013-11-0106:54:12【问题描述】：我正在使用以下代码旋转精灵，但旋转速度非常... 查看详情
被要求开发一个使用 GPS 导航的 iPhone 应用程序 - 现实的期望？
】被要求开发一个使用GPS导航的iPhone应用程序-现实的期望？【英文标题】：AskedtodevelopaniphoneappthatusesGPSnavigation-realisticexpectations?【发布时间】：2011-08-1510:31:33【问题描述】：我是iphone开发的新手，在工作中被问及在Google地图上... 查看详情
AngularJS/Cordova/Phonegap Ipad 3 和 Iphone 4s 不够快？
...描述】：我拥有一个AngularJS应用程序（角度v1.2.19），我使用Cordova/PhoneGap将它转换为iOS应用程序。但是，似乎resolve属性（见下文 查看详情
iphone开机黑屏
...并合并解析。最初，来自Parse.com的一个入门项目。该文件使用xib而不是情节提要；我删除了xib并制作了自己的故事板，并在我的info.plist文件中更改为Mainstoryboard文件名base:Main_iPhone。然后我拖出一个视图控制器 查看详情
ios蓝牙开发：蓝牙的连接和数据的读写
...设备连接iPhone手机；中心者模式一般是大部分情况下都会使用的，使用中心者模式开发相当于iPhone手机作为主机，连接蓝牙外设，下面介绍蓝牙开发的例子就是使用的中心者模式来讲解的。在这里我还是要推荐下我自己建的iOS开... 查看详情
iPhone 开发者计划中的多个帐户
...发人员计划的一名开发人员，负责公司的项目。我想购买自己的许可证以作为独立程序员进行开发。怎么做？我需要另一个AppleID吗？【问题讨论】：【参考方案1】：我强烈建议不要将同一个AppleID用于多个开发者计划。您可以这... 查看详情
如何从 iPhone 默认键盘使用自定义表情符号视图？
】如何从iPhone默认键盘使用自定义表情符号视图？【英文标题】：HowtousecustomemojiviewfromiPhonedefaultkeyboard?【发布时间】：2013-08-1206:04:38【问题描述】：我正在开发一个iPhone应用程序，该应用程序允许用户绘制表情符号并在带有文... 查看详情
iPhone开发——使用CoreData查询相关记录
】iPhone开发——使用CoreData查询相关记录【英文标题】：iPhoneDevelopment-QueryrelatedrecordsusingCoreData【发布时间】：2010-04-1207:03:56【问题描述】：我有一个案例，我有三个具有一对多和一对多关系的实体：EntityA(EntityBrelationhip),EntityB(En... 查看详情