使用 NativeScript 基于 JavaScript 構建原生應用
有很多可供利用 HTML CSS 和 JavaScript，來創建跨平臺的應用程序，我已經在這些之前找到了很多。在這篇文章中我將討論 Telerik 所說的比許多現有的更容易創建跨平臺的應用程序 ——nativescript。
從官方文檔來看
開發者使用 nativescript 對 iOS、Android、Windows 建立通用本地應用程序，跨平臺共享應用程序代碼。構建應用程序 UI 時，開發者使用我們的庫文件，它抽象出本地平臺之間的差異。
</blockquote>創建一個圖片搜索 flicker app
本教程中，我們將創建一個簡單的 APP，用 flickr 搜索圖片并且顯示結果，我們將利用 flicker 開發者 API 搜索圖片。
本教程源碼在 GitHub。
入門
安裝 nodejs 并使用 node 包管理器 (npm) 安裝 native script。
npm install -g nativescript裝好之后，創建一個新的項目，叫做 NativeApp。
tns create NativeApp導航至項目路徑，使用命令行添加移動開發平臺。
tns platform add android在 android 模擬器上運行應用程序。
tns run android --emulator
項目結構
項目目錄里面有 3 個子目錄：app, lib 和 platforms。應用程序代碼位于 app 目錄。應用程序代碼是使用 JavaScript 寫的，而用戶界面則使用 XML 進行設計。
app 目錄里面是一個叫做 main-page.xml 的文件，它是用戶界面的默認代碼。在 main-view-model.js 中是默認的模型代碼，而 main-page.js 定義了應用程序邏輯。最后 app.js 包含了使用定義好的模型啟動應用程序的代碼。
設計應用
讓我們先從使用 XML 設計應用開始吧。打開 main-page.xml 并觀察默認代碼。除了 page 標記以外其它都刪除。page 標記有一個叫做 loaded 的屬性，它會在應用一加載就執行 pageLoaded 函數。pageLoaded 函數位于 main-page.js 文件中。
本項目使用了一個棧布局來設計我們的應用。還有許多的 NativeScript布局。
在page標記中添加棧布局。
<StackLayout orientation="vertical"> </StackLayout>使用一個豎向（vertical）的 orientation 定義棧布局。在棧布局立面加入一個文本框和一個按鈕。
<TextField width="300px" hint="search keyword" /> <Button text="Search" height="50px" style="background-color:green;width:300px;border:none;font-size:20px;" />保存并運行應用。看起來一個像下面這樣。
從 flickr 獲取數據
在搜索按鈕中加入一個叫做 tap 的屬性
tap="signin"現在，當用戶觸摸搜索按鈕時，signin 函數就會被調用。讓我們在 main-page.js 中定義 signin 函數。
exports.signin = function() { // Code would be here ! };為了能使用 flickr 的開發者 API，你需要一個免費的 flickr 賬戶。請求一個 API key 以發起 API 請求。
在 main-page.js 定義 API key。
var api_key = 'replacewithyourkey';調用 API 需要用到 http 模塊，所以把模塊導入 main-page.js。
var http = require("http");在 sigin 函數里面，使用 http 模塊，發起 API 調用請求。
http.getJSON("https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=" + api_key + "&text=hello&format=json&nojsoncallback=1&per_page=5").then(function(r) { console.log(JSON.stringify(r)); }, function(e) { console.log(e); });上面代碼暫時使用硬編碼的搜索文本發起 API 調用請求，教程中稍后會變成動態獲取的文本.
在模擬器運行應用時，你會需要運行 ‘adb logcat’ 來檢查日志消息。
保存并運行. 點擊搜索按鈕，從 Flickr 返回的結果應該在終端上可見了.
接下來使用返回的響應創建圖像的 url，并將其放入圖像數組.
可觀察的數據被用來創建一些事物的集合，并監聽變化的發生。將相同的同一個可觀察的數組綁定到視圖，那樣變化發生時視圖就會更新了。
要創建可觀察數據，可以在 main-page.js 中添加如下的變量聲明 :
var observableArray = require("data/observable-array"); var images = new observableArray.ObservableArray([]);基于從 API 請求返回的響應，下一步是創建 flickr 圖片 URL。可以從這兒找到有關創建 flickr URL 的相關信息。
接下來我們對返回的數據進行遍歷, 創建圖像 URL 并放入圖像數組。在 signin 函數中放入這些代碼。
var imgUrl = ''; var photoList = r.photos.photo; for (var i = 0; i < photoList.length; i++) { imgUrl = "https://farm" + photoList[i].farm + ".staticflickr.com/" + photoList[i].server + "/" + photoList[i].id + "_" + photoList[i].secret + ".jpg"; images.push({ img: imgUrl }); }將數據綁定到 UI
圖像數組里面有了數據，就可以綁定到UI了。為了能展現數據，在 main-page.xml 中創建一個 ListView , 就在現有的 Button 元素底下。
<ListView> <ListView.itemTemplate> <Image stretch="fill" height="200px" /> </ListView.itemTemplate> </ListView>將圖像數組綁定到 list 視圖，設置圖片的來源（src）。
<ListView items="{{ images }}"> <ListView.itemTemplate> <Image stretch="fill" height="200px" src="{{img}}" /> </ListView.itemTemplate> </ListView>為了讓圖像數組在整個視圖上可用，在 observable 模塊中設置圖像數組。為此導入 observable 模塊，并用它來創建一個 observable 對象。
var observableModule = require("data/observable"); var pageData = new observableModule.Observable();在 pageLoaded 函數中將圖像數組設置到 observable 模塊，并將模塊添加到頁面上下文中。
function pageLoaded(args) { var page = args.object; pageData.set("images", images); page.bindingContext = pageData; }使用相同的 pageData observable 對象，來自搜索文本框的值就可以被讀取。修改文本域，加入 text 屬性。
<TextField width="300px" text="{{txtKeyword}}" hint="search keyword"/>signin 函數中要刪除硬編碼的 hello 搜索文本，并像下面這樣替換它：
pageData.get('txtKeyword')保存并運行。點擊搜索按鈕，從 Flickr API 收到的圖像就可以被看到了。請求返回了 5 張圖片，因此向下滑動應該能看到所有的圖片。
總結
教程展示了如何開始使用 NativeScript 創建一個簡單的移動應用。有關使用 NatieScript 的詳細信息，我建議閱讀 官方文檔。
你有使用 NativeScript 進行移動開發的經歷嗎? 使用它時你有什么感想 ? 讓我們在評論中知道你的觀點，建議以及修改意見。