NativeScript - 模組

---

---

一個 NativeScript 模組包含一組相關的功能，打包成單個庫。讓我們學習 NativeScript 框架提供的模組。

它包含 NativeScript 框架的核心功能。讓我們在本章中瞭解核心模組。

應用

Application 包含移動應用程式的平臺特定實現。下面定義了一個簡單的核心模組：

const applicationModule = require("tns-core-modules/application");

控制檯

Console 模組用於記錄訊息。它具有以下方法：

console.log("My FirstApp project"); 
console.info("Native apps!"); 
console.warn("Warning message!"); 
console.error("Exception occurred");

application-settings

application-settings 模組包含管理應用程式設定的方法。要新增此模組，我們需要新增以下程式碼：

const appSettings = require("tns-core-modules/application-settings");

application-setting 中的一些可用方法如下：

• setBoolean(key: string, value: boolean) - 設定布林物件

• setNumber(key: string, value: number) - 設定數字物件

• setString(key: string, value: string) - 設定字串物件

• getAllKeys() - 包含所有儲存的鍵

• hasKey(key: string) - 檢查鍵是否存在

• clear - 清除儲存的值

• remove - 基於鍵刪除任何條目。

使用應用程式設定的一個簡單示例如下：

function onNavigatingTo(args) { 
   appSettings.setBoolean("isTurnedOff", false);
   appSettings.setString("name", "nativescript"); 
   appSettings.setNumber("locationX", 54.321); 
   const isTurnedOn = appSettings.getBoolean("isTurnedOn"); 
   const username = appSettings.getString("username"); 
   const locationX = appSettings.getNumber("locationX"); 
   // Will return "not present" if there is no value for "noKey" 
   const someKey = appSettings.getString("noKey", "not present"); 
}
exports.onNavigatingTo = onNavigatingTo; 
function onClear() {
   // Removing a single entry via its key name 
   appSettings.remove("isTurnedOff"); 
   // Clearing the whole settings 
   appSettings.clear(); 
}

http

此模組用於處理http請求和響應。要在您的應用程式中新增此模組，請新增以下程式碼：

const httpModule = require("tns-core-modules/http");

我們可以使用以下方法傳送資料：

getString − 它用於發出請求並從 URL 下載資料作為字串。其定義如下：

httpModule.getString("https://.../get").then(
   (r) => { 
      viewModel.set("getStringResult", r); 
   }, (e) => 
   { 
   }
);

getJSON − 它用於訪問 JSON 中的資料。其定義如下：

httpModule.getJSON("https://.../get").then((r) => { 
}, (e) => { 
});

getImage − 從指定的 URL 下載內容並返回 ImageSource 物件。其定義如下：

httpModule.getImage("https://.../image/jpeg").then((r) => { 
}, (e) => { 
});

getFile − 它有兩個引數 URL 和檔案路徑。

• URL − 下載資料。

• 檔案路徑 − 將 URL 資料儲存到檔案。其定義如下：

httpModule.getFile("https://").then((resultFile) => { 
}, (e) => { 
});

request − 它具有 options 引數。它用於請求選項並返回 HttpResponse 物件。其定義如下：

httpModule.request({ 
   url: "https://.../get", 
   method: "GET" 
}).then((response) => { 
}, (e) => { 
});

Image-source

image-source 模組用於儲存影像。我們可以使用以下語句新增此模組：

const imageSourceModule = require("tns-core-modules/image-source");

如果要從資源載入影像，請使用以下程式碼：

const imgFromResources = imageSourceModule.fromResource("icon");

要從本地檔案新增影像，請使用以下命令：

const folder = fileSystemModule.knownFolders.currentApp(); 
const path = fileSystemModule.path.join(folder.path, "images/sample.png"); 
const imageFromLocalFile = imageSourceModule.fromFile(path);

要將影像儲存到檔案路徑，請使用以下命令：

const img = imageSourceModule.fromFile(imagePath); 
const folderDest = fileSystemModule.knownFolders.documents(); 
const pathDest = fileSystemModule.path.join(folderDest.path, "sample.png"); 
const saved = img.saveToFile(pathDest, "png"); if (saved) { 
   console.log(" sample image saved successfully!"); 
}

計時器

此模組用於在特定時間間隔執行程式碼。要新增它，我們需要使用require：

const timerModule = require("tns-core-modules/timer");

它基於兩種方法：

setTimeout − 用於延遲執行。它以毫秒錶示。

setInterval − 用於以特定間隔重複應用。

跟蹤

此模組對於除錯很有用。它提供日誌資訊。此模組可以表示為：

const traceModule = require("tns-core-modules/trace");

如果要在您的應用程式中啟用它，請使用以下命令：

traceModule.enable();

ui/image-cache

image-cache 模組用於處理影像下載請求和快取下載的影像。此模組可以表示如下：

const Cache = require("tns-core-modules/ui/image-cache").Cache;

連線性

此模組用於接收已連線網路的連線資訊。它可以表示為：

const connectivityModule = require("tns-core-modules/connectivity");

功能模組

功能模組包括許多特定於系統/平臺的模組。一些重要的模組如下：

platform − 用於顯示有關您的裝置的資訊。它可以定義為如下所示：

const platformModule = require("tns-core-modules/platform");

fps-meter − 用於捕獲每秒幀數。它可以定義為如下所示：

const fpsMeter = require("tns-core-modules/fps-meter");

file-system − 用於處理您的裝置檔案系統。其定義如下：

const fileSystemModule = require("tns-core-modules/file-system");

ui/gestures − 用於處理 UI 手勢。

UI 模組

UI 模組包含 UI 元件及其相關功能。一些重要的 UI 模組如下：

• 框架

• 頁面

• 顏色

• text/formatted-string

• xml

• 樣式

• 動畫