快使用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/，每張圖片來自哪一個創做者在代碼的註釋中有說明。