ios開發 catransition_使用 Scriptable 為自己開發一個 iPhone 小元件吧
技術標籤：ios開發 catransition一個隨機數生成0-2 一個 生成 0-6
最近蘋果的 iOS 系統升級到了 iOS 14，這次的更新我比較關注的就是升級的小元件功能，這次更新我們可以將小元件放置在主螢幕中的任何位置，可以讓我們更加便捷的檢視一些資訊，從而省去了還需要開啟APP去檢視訊息的步驟，感覺很方便。
看到這裡一些同學可能會說，功能是挺不錯的，如果我自己也能開發一個小元件展示自己想看的內容就好了。是呀，哪一個小男孩不想擁有一個專屬於自己的 iOS 小元件。
別慌，最近發現了一個APP可以讓我們通過使用JavaScript來建立我們自己想要的小元件。這個APP的名字就是Scriptable
Scriptable的簡單介紹
工欲善其事，必先利其器，我們先來了解一下Scriptable有哪些作用吧，從上面官網上的介紹我們可以知道，這個APP可以讓我們使用JavaScript來自動化iOS。這句話是什麼意思呢？就是我們可以提前編寫好一些程式碼去執行一些特定的任務，比如：獲取GitHub上面的Trending專案的名字和介紹、瞭解Hacker News
上面列舉的是一些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小元件的程式碼了：
//VariablesusedbyScriptable.
//Thesemustbeattheverytopofthefile.Donotedit.
//icon-color:cyan;icon-glyph:greater-than-equal;
//以下程式碼僅供學習交流使用
//判斷是否是執行在桌面的元件中
if(config.runsInWidget){
//建立小部件
constwidget=newListWidget();
//新增文字
consttext=widget.addText("Hello,World!");
text.textColor=newColor("#000000");
text.font=Font.boldSystemFont(36);
text.centerAlignText();
//新增漸變色背景
constgradient=newLinearGradient();
gradient.locations=[0,1];
gradient.colors=[newColor("#F5DB1A"),newColor("#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再搞一個統一的開發平臺，前端開發者又可以揚帆遠航了，想想是不是有點小激動呢。。。
注：“今天吃點啥”小元件的圖示使用的是https://undraw.co/網站上的，相關食物的圖片來自https://unsplash.com/，每張圖片來自哪個創作者在程式碼的註釋中有說明。
交流討論
歡迎關注公眾號「前端試煉」，公眾號平時會分享一些實用或者有意思的東西，發現程式碼之美。專注深度和最佳實踐，希望打造一個高質量的公眾號。
公眾號後臺回覆「加群」，拉你進交流面試群。
如果你不想加群，只是想加我也是可以的。
如果覺得這篇文章還不錯，來個【分享、點贊、在看】三連吧，讓更多的人也看到~
