用 20+ 行 JavaScript 程式碼,短暫“變身” iOS 程式設計師!

用 20+ 行 JavaScript 程式碼,短暫“變身” iOS 程式設計師!

摘要:你有沒有嘗試過在 iOS 中建立小部件,感受一把身為 iOS 程式設計師的快樂?本文作者將用二十幾行 JavaScript 程式碼教你構建一個 iOS 小部件,據他所說,這“一點都不難”。

原文連結:https://stackonfire。com/feel-yourself-ios-developer-with-20-lines-of-javascript

作者 | Dimitri Ivashchuk譯者 | 彎月

出品 | CSDN(ID:CSDNnews)

在這篇入門指南中,我們將構建如下軟體,實際所需編寫的 JavaScript 程式碼非常少。

用 20+ 行 JavaScript 程式碼,短暫“變身” iOS 程式設計師!

這個軟體的創意來源有兩個:

1。有人使用這個小部件來顯示收入。

2。頻繁檢查 GitHub 程式碼庫的星星數量很麻煩。

我發現,構建 iOS 小部件一點都不難,只要有合適的工具,再加上非常基礎的 JavaScript 知識即可!

專案簡介

這個專案是一個 iOS 小部件,用來顯示 GitHub 程式碼庫的星星數量。這裡我透過自己的一個開源專案為例進行說明。我們將採用 Scriptable,這個工具可以透過 JavaScript 生成漂亮的小部件,就像上圖一樣。

程式碼// Request// Nothing special here, just an async request function GitHub open APIasync function getGithubData() {const url = “https://api。github。com/repos/lost-pixel/lost-pixel”;const request = new Request(url);const response = await request。loadJSON();return response;}//UI// Function that defines the element of the widgetasync function createWidget() {// Fetching data with the function we prepared beforeconst githubData = await getGithubData();// Create new wdiget & set black background colorlet listwidget = new ListWidget();listwidget。backgroundColor = new Color(“#000000”);// Create heading and style it properlylet heading = listwidget。addText(“⭐ Lost Pixel ⭐”);heading。centerAlignText();heading。font = Font。lightSystemFont(25);heading。textColor = new Color(“#fff”);// Add spacer between elementslistwidget。addSpacer(15);// Create the stars display and style it properly。 We use the data from API herelet stars = listwidget。addText(githubData。stargazers_count);stars。centerAlignText();stars。font = Font。semiboldSystemFont(20);stars。textColor = new Color(“#ffffff”);return listWidget;}// Execute createWidget function that returns us the widgetlet widget = await createWidget();// Show the widget when added to IOS homescreenif (config。runsInWidget) {Script。setWidget(widget);} else {widget。presentMedium();}// finish the execution of the scriptScript。complete();

顯示小部件

1。在 iOS 裝置上安裝 Scriptable for iOS;

2。點選 + 按鈕建立一個新的指令碼。

用 20+ 行 JavaScript 程式碼,短暫“變身” iOS 程式設計師!

3。 將上面的程式碼貼上到空白輸入處。

用 20+ 行 JavaScript 程式碼,短暫“變身” iOS 程式設計師!

4。 儲存,這樣就完成了!

5。 最後一步,只需將這個小部件新增到主螢幕即可:透過 Scriptable 小部件,將剛剛建好的小部件新增到主螢幕。

好了,恭喜你完成了!

頂部