最近蘋果的 iOS 系統升級到了 iOS 14，這次的更新我比較關注的就是升級的小組件功能，這次更新我們可以將小組件放置在主屏幕中的任何位置，可以讓我們更加便捷的查看一些信息，從而省去了還需要打開APP去查看消息的步驟，感覺很方便。

看到這里一些同學可能會說，功能是挺不錯的，如果我自己也能開發一個小組件展示自己想看的內容就好了。是呀，哪一個小男孩不想擁有一個專屬于自己的 iOS 小組件。

別慌，最近發現了一個APP可以讓我們通過使用JavaScript來創建我們自己想要的小組件。這個APP的名字就是Scriptable，還是驗證了Jeff Atwood那句話，任何可以使用JavaScript來編寫的應用，最終會由JavaScript編寫。作為一個前端有沒有感覺很開心，又有一個地方可以讓你來大展身手了，那就趁熱趕緊來了解一下吧。

Scriptable的簡單介紹

Scriptable

工欲善其事，必先利其器，我們先來了解一下Scriptable有哪些作用吧，從上面官網上的介紹我們可以知道，這個APP可以讓我們使用JavaScript來自動化iOS。這句話是什么意思呢？就是我們可以提前編寫好一些代碼去執行一些特定的任務，比如：獲取GitHub上面的Trending項目的名字和介紹、了解Hacker News的最新資訊、獲取自己的最近日程、以及自己的TODO列表等等。當然這都只是一些最基本的使用場景，你肯定有自己的想法，看完這篇文章之后就去自己去實現一個獨一無二的小應用吧。

Scriptable

上面列舉的是一些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再搞一個統一的開發平臺，前端開發者又可以揚帆遠航了，想想是不是有點小激動呢。。。

總結

以上是生活随笔為你收集整理的android桌面小组件开发_快使用Scriptable自己开发一个iPhone小组件吧的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。