使用TypeScript和NativeScript创建Weather App

最新推荐文章于 2024-04-09 09:14:06 发布

cunjie3951

最新推荐文章于 2024-04-09 09:14:06 发布

阅读量235

点赞数

文章标签： python java vue javascript 编程语言 ViewUI

在本教程中，我将向您展示如何使用TypeScript语言在NativeScript中构建天气应用。

在本系列的上一篇文章中，我们使用纯JavaScript创建了一个笔记应用程序。这次，我们将使用TypeScript。首先，让我们找出为什么TypeScript是构建NativeScript应用程序的好选择。

1.为什么使用TypeScript？

TypeScript是NativeScript中的一等公民。核心NativeScript团队使用它来构建NativeScript框架本身。为什么要使用TypeScript开发NativeScript应用程序的原因有两个：

TypeScript编译为JavaScript。编译器运行时，它将捕获您的代码中可能存在的所有错误，以便您可以立即对它们进行操作，而无需等待NativeScript编译器完成。这对您作为开发人员来说意味着更高的生产力。
使用TypeScript，您可以使用ES6功能，例如类，模块，箭头功能，模板文字等。这意味着您可以使用更多工具来组织和编写更好的代码。

如果我在说服您方面做得很差，或者您想进一步了解TypeScript为什么适合使用NativeScript进行开发，则可以查看使用TypeScript构建更好的NativeScript应用程序。

2.工具

为了充分利用TypeScript提供的功能，我建议您使用Visual Studio Code文本编辑器。它具有IntelliSense功能，可在您编写TypeScript代码时提供智能自动完成功能，它与Git集成，并且还具有调试功能。

最重要的是，还有一个NativeScript插件，可以在开发NativeScript应用程序时提高您的工作效率。我发现有用的一项功能是模拟器集成。这使您可以直接从文本编辑器运行模拟器，并从文本编辑器本身调试应用程序。 Visual Studio Code是免费的，并且可在所有主要平台（Windows，Linux，OS X）上使用。

但是，如果您不想放任文本编辑器的便利，还可以安装扩展程序，以更好地使用TypeScript进行编码。对于Atom，有一个atom-typescript插件。对于Sublime Text，有TypeScript Sublime插件。

3.应用概述

我们将要创建的应用程序是天气应用程序。它将具有以下页面：

主页显示当前天气以及一些相关信息，例如温度，气压和湿度。
预报页面显示了未来五天的五天天气预报。

这是主页的外观：

这是预测页面：

您可以在其GitHub repo上找到此应用程序的完整源代码。

4. OpenWeatherMap

天气数据将来自OpenWeatherMap API ，与其他任何API一样，您需要注册一个API密钥才能使用它。继续并注册一个帐户，我将等待。登录后，进入“ API密钥”页面，复制密钥字段的值，并将其保存在安全的地方。一旦开始创建应用程序，您以后将需要它。

5.创建应用

现在您已经知道了应用程序的外观，是时候开始实际创建它了。首先创建一个使用TypeScript模板的新NativeScript项目：

tns create weatherApp --template typescript

完成后，导航到app文件夹并创建以下文件夹和文件。为了方便起见，您还可以下载或克隆GitHub存储库，然后从app文件夹复制文件。

- common
    + constants.ts
    + navigation.ts
    + requestor.ts
    + utilities.ts
- fonts
- pages
    + forecast
        * forecast.css
        * forecast.ts
        * forecast.xml
        * forecast-view-model.ts
    + main
        * main.css
        * main.ts
        * main.xml
        * main-view-model.ts
- stores
    + location.ts
- app.css
- app.ts

我们将永远只在app目录中工作，因此，每次我引用文件路径或文件夹时，都假定app目录是根目录。

安装依赖项

该应用程序需要几个依赖项： NativeScript Geolocation Module和Moment 。您可以使用以下命令安装Geolocation模块：

tns plugin add nativescript-geolocation

并使用以下命令安装Moment：

npm install moment

地理位置模块用于确定用户的当前位置。 Moment允许轻松格式化Unix时间戳，稍后我们将从API中获得该格式。

通用模块

在查看应用程序每个页面的代码之前，我们先来看一下将在整个应用程序中使用的自定义模块。

常数

常数模块（ common/constants.ts ）包含整个应用程序中使用的所有常数值：诸如OpenWeatherMap API的基本URL，您之前获得的API密钥，将要使用的端点的路径，天气图标的字符代码以及风向。

export const WEATHER_URL = 'http://api.openweathermap.org/data/2.5/';
export const WEATHER_APIKEY = 'YOUR OPENWEATHERMAP API KEY';
export const CURRENT_WEATHER_PATH = 'weather/';
export const WEATHER_FORECAST_PATH = 'forecast/daily/';

export const WEATHER_ICONS = {
  day: {
    'clear': 0xf00d,
    'clouds': 0xf002,
    'drizzle': 0xf009,
    'rain': 0xf008,
    'thunderstorm': 0x010,
    'snow': 0xf00a,
    'mist': 0xf0b6
  },
  night: {
    'clear': 0xf02e,
    'clouds': 0xf086,
    'drizzle': 0xf029,
    'rain': 0xf028,
    'thunderstorm': 0xf02d,
    'snow': 0xf02a,
    'mist': 0xf04a
  },
  neutral: {
    'temperature': 0xf055,
    'wind': 0xf050,
    'cloud': 0xf041,
    'pressure': 0xf079,
    'humidity': 0xf07a,
    'rain': 0xf019,
    'sunrise': 0xf046,
    'sunset': 0xf052
  }
};

export const WIND_DIRECTIONS = [
  "North", "North-northeast", "Northeast",
  "East-northeast", "East", "East-southeast", "Southeast",
  "South-southeast", "South", "South-southwest", "Southwest",
  "West-southwest", "West", "West-northwest", "Northwest", "North-northwest"
];

实用工具

实用程序模块包括各种实用程序功能：诸如将度数转换为方向，确定风速的描述性文本，将开尔文转换为摄氏以及将字符代码转换为字符之类的事情。您将在稍后的页面中看到如何使用所有这些功能。

import constants = require('./constants');

export function degreeToDirection(num) {
  var val= Math.floor((num / 22.5) + .5);
  return constants.WIND_DIRECTIONS[(val % 16)];
}

export function describeWindSpeed(speed) {
  if(speed < 0.3) {
    return 'calm';
  } else if(speed >= 0.3 && speed < 1.6) {
    return 'light air';
  } else if (speed >= 1.6 && speed < 3.4) {
    return 'light breeze';
  } else if (speed >= 3.4 && speed < 5.5) {
    return 'gentle breeze';
  } else if (speed >= 5.5 && speed < 8) {
    return 'moderate breeze';
  } else if(speed >= 8 && speed < 10.8) {
    return 'fresh breeze';
  } else if(speed >= 10.8 && speed < 13.9) {
    return 'strong breeze';
  } else if(speed >= 13.9 && speed < 17.2) {
    return 'moderate gale';
  } else if (speed >= 17.2 && speed < 20.8) {
    return 'gale';
  } else if (speed >= 20.8 && speed < 24.5) {
    return 'strong gale';
  } else if (speed >= 24.5 && speed < 28.5) {
    return 'storm';
  } else if (speed >= 28.5 && speed < 32.7) {
    return 'violent storm';
  } else if (speed >= 32.7 && speed < 42) {
    return 'hurricane force';
  }
  return 'super typhoon';
}

export function describeHumidity(humidity) {
  if (humidity >= 0 && humidity <= 40) {
    return 'very dry';
  } else if (humidity >= 40 && humidity <= 70) {
    return 'dry';
  } else if (humidity >= 85 && humidity <= 95) {
    return 'humid';
  }
  return 'very humid';
}

export function describeTemperature(temp) {
  var celsius = convertKelvinToCelsius(temp);
  if (celsius >= 0 && celsius < 7) {
    return 'very cold';
  } else if (celsius >= 8 && celsius < 13) {
    return 'cold';
  } else if (celsius >= 13 && celsius < 18) {
    return 'cool';
  } else if (celsius >= 18 && celsius < 23) {
    return 'mild';
  } else if (celsius >= 23 && celsius < 28) {
    return 'warm';
  } else if (celsius >= 28 && celsius < 32) {
    return 'hot';
  }
  return 'very hot';
}

export function convertKelvinToCelsius(celsius) {
  return celsius - 273.15;
}

export function getTimeOfDay() {
  var hour = (new Date()).getHours();
  var time_of_day = 'night';
  if(hour >= 5 && hour <= 18){
    time_of_day = 'day';
  }
  return time_of_day;
}

export function getIcons(icon_names) {
  var icons = icon_names.map((name) => {
    return {
      'name': name,
      'icon': String.fromCharCode(constants.WEATHER_ICONS.neutral[name])
    };
  });
  return icons;
}

请求者

Requestor模块执行对OpenWeatherMap API的实际请求。如NativeScript简介一文中提到的，NativeScript使用JavaScript虚拟机来运行JavaScript代码。这意味着我们还可以使用浏览器中可用的功能。

其中之一就是fetch ，它允许我们向远程服务器发出HTTP请求。该参数是您要发出请求的URL。它返回一个承诺，因此我们使用then()等待原始响应。注意使用“原始”一词； fetch函数返回带有标头和其他低层信息的响应-这就是为什么我们需要调用json()函数以获取实际的JSON数据。这将返回另一个promise，因此我们then()使用then()一次来获取实际对象。

export function get(url){
  return fetch(
    url
  ).then(function(response){
    return response.json();
  }).then(function(json){
    return json;
  });
}

另外，您可以使用Http模块，这是在NativeScript中发出HTTP请求的更可靠的方法。

位置商店

位置存储充当位置信息的存储。这使我们可以从导入此模块的任何文件中更新并获取当前位置。

export var location;

export function saveLocation(loc) {
  location = loc;
}

export function getLocation() {
  return location;
}

主页

现在是时候查看应用程序每个页面的代码了。但是在执行此操作之前，请先打开入口点文件（ app.ts ）。这使用导航模块来获取应用程序的起始页面：

import application = require("application");
import navigation = require('./common/navigation');
application.mainModule = navigation.getStartPage();
application.start();

接下来，让我们分解pages/main/main.xml文件。

每次用户导航到该特定页面时， navigatingTo事件用于在TypeScript文件中执行类似名称的函数。 CSS类也是根据TypeScript文件动态确定的。

<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo" class="{{ background_class }}">
...
</Page>

ScrollView组件用于包装所有内容，以便在内容超出屏幕大小可以显示的范围时自动生成垂直滚动条。

并且由于我们要从远程服务器加载数据，因此ActivityIndicator组件用于显示平台的默认加载动画。这要求您提供一个busy属性，该属性接受一个布尔值，该布尔值控制是否启动动画。默认情况下，此参数设置为true并且仅在应用程序完成向服务器的请求后才更新为false 。

visibility属性还用于确保组件在不进行动画处理时不占用任何空间。

<StackLayout>
  <ScrollView>
    <ActivityIndicator busy="{{ is_loading }}" visibility="{{ is_loading ? 'visible' : 'collapsed' }}" />
    <StackLayout visibility="{{ !is_loading ? 'visible' : 'collapsed' }}">
      ...
    </StackLayout>
  </ScrollView>
</StackLayout>

对于主要内容，我们在顶部有当前天气的一般概述，在下面有详细信息。总体概览显示一个图标，代表当前天气，当前温度，天气描述和地点。

<Label text="{{ icon }}" class="icon" />
<Label text="{{ temperature }}" class="temperature" />
<Label text="{{ weather }}" class="weather" textWrap="true"/>
<Label text="{{ place }}" class="place" textWrap="true"/>

有关详细信息，有很多有关当前天气的信息，您可以通过查看text属性来猜测。每个图标还带有自己的图标。

在我之前显示的屏幕快照中，您看到它在两个页面上都使用两列布局。这就是为什么我们使用GridLayout的原因。但是从下面的代码中可以看到，我们还在每行的第一列中使用了GridLayout 。

您可能会问为什么我们要这样做，而不是仅仅创建一个三列的布局，而第一列为图标，第二列为weather属性，第三列为值。这是完全可以理解的，它将使代码更加简洁。

但是问题在于，NativeScript 2.1版目前不允许其GridLayout使用百分比单位。这意味着我们不能为图标使用10%的内容，而其他两列则各占45％。

我们下面使用的布局通过使用GridLayout来包装icon和weather属性来解决该问题，其中Icon占用30像素，而weather属性占用包含文本所需的空间。注意在GridLayout上也使用row和col属性。

<GridLayout columns="*,*" rows="auto,auto,auto,auto,auto,auto,auto" cssClass="details">

  <GridLayout columns="30,auto" rows="auto" row="0" col="0">
    <Label text="{{ wind_icon }}" class="small-icon" row="0" col="0" />
    <Label text="Wind" textWrap="true" row="0" col="1" class="label" />
  </GridLayout>
  <Label text="{{ wind }}" textWrap="true" row="0" col="1" />

  <GridLayout columns="30,auto" rows="auto" row="1" col="0">
    <Label text="{{ cloud_icon }}" class="small-icon" row="0" col="0" />
    <Label text="Cloudiness" textWrap="true" row="1" col="1" class="label" />
  </GridLayout>
  <Label text="{{ clouds }}" textWrap="true" row="1" col="1" />

  <GridLayout columns="30,auto" rows="auto" row="2" col="0">
    <Label text="{{ pressure_icon }}" class="small-icon" row="0" col="0" />
    <Label text="Pressure" textWrap="true" row="2" col="1" class="label" />
  </GridLayout>
  <Label text="{{ pressure }}" textWrap="true" row="2" col="1" />

  <GridLayout columns="30,auto" rows="auto" row="3" col="0">
    <Label text="{{ humidity_icon }}" class="small-icon" row="0" col="0" />
    <Label text="Humidity" textWrap="true" row="3" col="1" class="label" />
  </GridLayout>
  <Label text="{{ humidity }}" textWrap="true" row="3" col="1" />

  <GridLayout columns="30,auto" rows="auto" row="4" col="0">
    <Label text="{{ rain_icon }}" class="small-icon" row="0" col="0" />
    <Label text="Rain" textWrap="true" row="4" col="1" class="label" />
  </GridLayout>
  <Label text="{{ rain }}" textWrap="true" row="4" col="1" />

  <GridLayout columns="30,auto" rows="auto" row="5" col="0">
    <Label text="{{ sunrise_icon }}" class="small-icon" row="0" col="0" />
    <Label text="Sunrise" textWrap="true" row="5" col="1" class="label" />
  </GridLayout>
  <Label text="{{ sunrise }}" textWrap="true" row="5" col="1" />

  <GridLayout columns="30,auto" rows="auto" row="6" col="0">
    <Label text="{{ sunset_icon }}" class="small-icon" row="0" col="0" />
    <Label text="Sunset" textWrap="true" row="6" col="1" class="label" />
  </GridLayout>
  <Label text="{{ sunset }}" textWrap="true" row="6" col="1" />
  
</GridLayout>

主页的最后标记是指向预测页面的按钮：

<Button text="5 day Forecast" tap="goToForecastPage" />

主页JavaScript

打开pages/main/main.ts文件并添加以下代码：

import { EventData } from "data/observable";
import { Page } from "ui/page";
import { MainViewModel } from "./main-view-model";
import navigation = require('../../common/navigation');

export function navigatingTo(args: EventData) {
  var page = <Page>args.object;
  page.bindingContext = new MainViewModel();
}

export function goToForecastPage () {
  navigation.goToForecastPage();
}

在上面的代码中，我们导入了两个内置的NativeScript模块，主视图模型和导航。

EventData对象是使用对象解构（TypeScript提供的ES6功能）提取的。我们将EventData作为参数传递给navigatingTo函数，以便可以访问导航到该页面的任何页面传递的任何数据。

它具有object属性，基本上是触发事件的任何组件。在这种情况下，我们知道它是在Page组件上触发的，这就是为什么我们使用<Page>作为类型断言的原因。之后，我们将主视图模型绑定到页面。这将允许我们在类中添加或更新属性，并且该属性将立即反映在页面上。

在主视图模型（ pages/main/main-view-model.ts ）中，首先导入我们将要使用的所有模块：

import observable = require("data/observable");
import requestor = require("../../common/requestor");
import constants = require("../../common/constants");
import geolocation = require("nativescript-geolocation");
import moment = require('moment');
import utilities = require('../../common/utilities');
import locationStore = require('../../stores/locationStore');

通过扩展Observable模块创建视图模型，该模块使该类中的所有属性都是可观察的。这意味着，每次在此类中对其进行更改时，UI中每个属性的所有引用都会更新。

export class MainViewModel extends observable.Observable {
  
  constructor() {
    ...
  }

}

在构造函数中，检查是否启用了地理定位。如果未启用，则尝试通过调用enableLocationRequest()函数来启用它。这会触发应用程序要求用户启用地理位置。

super(); //call the constructor method of the parent class
//check if geolocation is not enabled
if (!geolocation.isEnabled()) {
  geolocation.enableLocationRequest(); //try to enable geolocation
}

接下来，确定是白天还是晚上，并根据结果设置页面背景。然后在页面中设置图标。

var time_of_day = utilities.getTimeOfDay();
this.set('background_class', time_of_day);
this.setIcons();

之后，尝试确定当前位置。请注意，如果用户不允许地理定位，则该应用程序将根本无法运行，因为天气取决于用户的位置。该应用将尝试在10秒内确定用户的位置。如果这样做失败，则会向用户显示错误消息。

var location = geolocation.getCurrentLocation({timeout: 10000}).
  then(
    (loc) => {
      if (loc) {
        ...
      }
    },
    (e) => {
      //failed to get location
      alert(e.message);
    }
);

如果位置请求成功，则使用locationStore将其保存。这样，我们以后便可以访问其他页面上的位置，而无需再次请求。

locationStore.saveLocation(loc);

供参考，这是在NativeScript中请求位置时可能会得到的示例响应。您可以查看NativeScript的位置文档，以了解有关以下每个属性的更多信息。

{  
   "latitude":51.50853,
   "longitude":-0.12574,
   "altitude":0,
   "horizontalAccuracy":37.5,
   "verticalAccuracy":37.5,
   "speed":0,
   "direction":0,
   "timestamp":"2016-08-08T02:25:45.252Z",
   "android":{  

   }
}

我们可以使用模板文字构造完整的API请求URL，并使用Requestor模块发出请求。

this.set('is_loading', true); //show the loader animation
var url = `${constants.WEATHER_URL}${constants.CURRENT_WEATHER_PATH}?lat=${loc.latitude}&lon=${loc.longitude}&apikey=${constants.WEATHER_APIKEY}`;
requestor.get(url).then((res) => {
  ...
});

响应返回后，提取并设置其格式，然后将结果值设置为该类的属性。并且由于该类是可观察的，因此这将自动更新应用程序的UI。

this.set('is_loading', false); //stop loader animation
var weather = res.weather[0].main.toLowerCase();
var weather_description = res.weather[0].description;

var temperature = res.main.temp;
var icon = constants.WEATHER_ICONS[time_of_day][weather];

var rain = '0';
if(res.rain){
  rain = res.rain['3h'];
}

this.set('icon', String.fromCharCode(icon));
this.set('temperature', `${utilities.describeTemperature(Math.floor(temperature))} (${utilities.convertKelvinToCelsius(temperature).toFixed(2)} °C)`);
this.set('weather', weather_description);
this.set('place', `${res.name}, ${res.sys.country}`);
this.set('wind', `${utilities.describeWindSpeed(res.wind.speed)} ${res.wind.speed}m/s ${utilities.degreeToDirection(res.wind.deg)} (${res.wind.deg}°)`);
this.set('clouds', `${res.clouds.all}%`);
this.set('pressure', `${res.main.pressure} hpa`);
this.set('humidity', `${utilities.describeHumidity(res.main.humidity)} (${res.main.humidity}%)`);
this.set('rain', `${rain}%`);
this.set('sunrise', moment.unix(res.sys.sunrise).format('hh:mm a'));
this.set('sunset', moment.unix(res.sys.sunset).format('hh:mm a'));

供您参考，以下是API可能返回的示例响应：

{  
   "coord":{  
      "lon":-0.13,
      "lat":51.51
   },
   "weather":[  
      {  
         "id":803,
         "main":"Clouds",
         "description":"broken clouds",
         "icon":"04d"
      }
   ],
   "base":"cmc stations",
   "main":{  
      "temp":291.44,
      "pressure":1031.7,
      "humidity":82,
      "temp_min":290.37,
      "temp_max":292.25
   },
   "wind":{  
      "speed":0.3,
      "deg":45,
      "gust":1
   },
   "rain":{  
      "3h":0.075
   },
   "clouds":{  
      "all":68
   },
   "dt":1470545747,
   "sys":{  
      "type":3,
      "id":1462694692,
      "message":0.0043,
      "country":"GB",
      "sunrise":1470544455,
      "sunset":1470598626
   },
   "id":2643743,
   "name":"London",
   "cod":200
}

您可以在文档中找到有关当前天气数据的每个属性的详细信息。

最后。有setIcons()函数，用于设置页面中使用的所有图标：

setIcons() {
  var icons = utilities.getIcons([
    'temperature', 'wind', 'cloud',
    'pressure', 'humidity', 'rain',
    'sunrise', 'sunset'
  ]);
  icons.forEach((item) => {
    this.set(`${item.name}_icon`, item.icon);
  });
}

主页样式和图标

这是主页的样式：

.temperature {
  font-size: 40px;
  font-weight: bold;
  text-align: center;
}

.weather {
  font-size: 30px;
  text-align: center;
}

.place {
  font-size: 20px;
  text-align: center;
}

.icon {
  font-family: 'weathericons';
  font-size: 100px;
  text-align: center;
}

.small-icon {
  font-family: 'weathericons';
  font-size: 18px;
  margin-right: 5px;
}

.details {
  margin-top: 20px;
  padding: 30px;
  font-size: 18px;
}

.label {
  font-weight: bold;
}

.details Label {
  padding: 5px 0;
}

Button {
  margin: 20px;
}

请注意，使用weathericons作为icon和small-icon类的font-family 。这就是我们在NativeScript中使用图标字体的方式。如果您在网页上喜欢诸如Font Awesome之类的图标字体，则可以在NativeScript应用程序中以相同的方式使用它们。

首先，下载要使用的图标字体。对于此应用程序，使用Weather Icons字体。解压缩zip存档，并在解压缩的文件夹内进入font目录。将.ttf文件复制到应用程序的fonts目录中，并将其重命名为weathericons.ttf 。文件名是您每次要使用特定字体图标时用作font-family值的名称。除此之外，还必须添加font-size来控制图标的大小。

预测页面

现在，让我们看一下预测页面的标记（ pages/forecast/forecast.xml ）。标头中有一个“后退”按钮，允许用户返回主页。请注意，我们使用的是NavigationButton ，而不是通用的Button组件，它等效于iOS后退按钮和Android导航按钮的NativeScript。

<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo" class="{{ background_class }}">
  <Page.actionBar>
    <ActionBar title="5-day Forecast" class="header">
      <NavigationButton text="Back" android.systemIcon="ic_menu_back" tap="goToMainPage" />
    </ActionBar>
  </Page.actionBar>
  ...
</Page>

对于主要内容，将使用Repeater组件而不是通常的ListView 。这两个组件都可以用于生成列表，但是ListView带有更多的花哨功能。例如，当列表超过屏幕大小时，它将自动生成垂直滚动条。内置无限滚动功能。

在这种情况下，使用Repeater组件是因为没有真正需要的功能。我们需要的只是一个简单的清单。

<StackLayout>
  <ScrollView>
    <ActivityIndicator busy="{{ is_loading }}" visibility="{{ is_loading ? 'visible' : 'collapsed' }}" />
    <Repeater items="{{ forecast }}">
      <Repeater.itemTemplate>
       ...
      </Repeater.itemTemplate>
    </Repeater>
  </ScrollView>
</StackLayout>

在每个Repeater.itemTemplate内部是一个GridLayout ，其中包含两列，一列用于常规天气信息，一列用于详细信息。

第一列是StackLayout其中包含日期，天气图标和天气描述。第二列也是一个StackLayout其中包含四个GridLayouts ，其中将包含四个天气属性（温度，风速，阴天和气压）。

第一个GridLayout具有三列，分别包含图标，白天温度和夜间温度。其他三行只有两列，分别是图标和天气属性的值。

<GridLayout class="item" columns="*,*" rows="auto">
  <StackLayout class="day-weather" row="0" col="0">
    <Label text="{{ day }}" class="date" />
    <Label text="{{ icon }}" class="icon" />
    <Label text="{{ description }}" textWrap="true" />
  </StackLayout>

  <StackLayout class="details" row="0" col="1">
    <GridLayout columns="30,auto,auto" rows="auto" row="0" col="0">
      <Label text="{{ $parents['Page'].temperature_icon }}" class="small-icon" row="0" col="0" />
      <Label text="{{ temperature.day }}" class="temp day-temp" row="0" col="1" />
      <Label text="{{ temperature.night }}" class="temp night-temp" row="0" col="2" />
    </GridLayout>

    <GridLayout columns="30,auto" rows="auto" row="1" col="0">
      <Label text="{{ $parents['Page'].wind_icon }}" class="small-icon" row="0" col="0" />
      <Label text="{{ wind }}" row="0" col="1" />
    </GridLayout>

    <GridLayout columns="30,auto" rows="auto" row="2" col="0">
      <Label text="{{ $parents['Page'].cloud_icon }}" class="small-icon" row="0" col="0" />
      <Label text="{{ clouds }}" row="0" col="1" />
    </GridLayout>

    <GridLayout columns="30,auto" rows="auto" row="3" col="0">
      <Label text="{{ $parents['Page'].pressure_icon }}" class="small-icon" row="0" col="0" />
      <Label text="{{ pressure }}" row="0" col="1" />
    </GridLayout>

  </StackLayout>
</GridLayout>

注意$parents['Page'] 。使用Repeater或ListView组件时，您将无权访问为列表指定使用的数组之外的数据-除非您明确指定可用数据的父组件。这就是$parents['Page']传入的地方。 $parents是NativeScript中的一个特殊变量，允许您访问特定组件上的可用数据。在这种情况下，我们指定Page访问每个天气属性的图标。

<GridLayout columns="30,auto" rows="auto" row="1" col="0">
  <Label text="{{ $parents['Page'].wind_icon }}" class="small-icon" row="0" col="0" />
  <Label text="{{ wind }}" row="0" col="1" />
</GridLayout>

预测网页JavaScript

预测页面的代码与主页的代码几乎相同。唯一的区别是导航功能是用于返回主页的，而我们将ForecastViewModel用作视图模型。

import { EventData } from "data/observable";
import { Page } from "ui/page";
import { ForecastViewModel } from "./forecast-view-model";
import navigation = require('../../common/navigation');

export function navigatingTo(args: EventData) {
  var page = <Page>args.object;
  page.bindingContext = new ForecastViewModel();
}

export function goToMainPage() {
  navigation.goToMainPage();
}

这是视图模型的代码（ pages/forecast/forecast-view-model.ts ）：

import observable = require("data/observable");
import requestor = require("../../common/requestor");
import constants = require("../../common/constants");
import moment = require('moment');
import utilities = require('../../common/utilities');
import locationStore = require('../../stores/locationStore');

export class ForecastViewModel extends observable.Observable {

  constructor() {
    super();
    var location = locationStore.getLocation();
    var url = `${constants.WEATHER_URL}${constants.WEATHER_FORECAST_PATH}?cnt=6&lat=${location.latitude}&lon=${location.longitude}&apikey=${constants.WEATHER_APIKEY}`;

    var time_of_day = utilities.getTimeOfDay();
    this.set('is_loading', true);
    this.set('background_class', time_of_day);
    this.setIcons();

    requestor.get(url).then((response) => {
      this.set('is_loading', false);
      var forecast = this.getForecast(response);
      this.set('forecast', forecast);
    });
  }

  private getForecast(response) {
    var forecast = [];
    var list = response.list.splice(1); //remove first item from array of forecasts
    //format and push all the necessary data into a new array
    list.forEach((item) => {
      forecast.push({
        day: moment.unix(item.dt).format('MMM DD (ddd)'),
        icon: String.fromCharCode(constants.WEATHER_ICONS['day'][item.weather[0].main.toLowerCase()]),
        temperature: {
          day: `${utilities.describeTemperature(item.temp.day)}`,
          night: `${utilities.describeTemperature(item.temp.night)}`
        },
        wind: `${item.speed}m/s`,
        clouds: `${item.clouds}%`,
        pressure: `${item.pressure} hpa`,
        description: item.weather[0].description
      })
    });

    return forecast;
  }

  private setIcons() {
    var icons = utilities.getIcons(['temperature', 'wind', 'cloud', 'pressure']);
    icons.forEach((item) => {
      this.set(`${item.name}_icon`, item.icon);
    });
  }

}

在构造函数内部，我们从位置存储中获取当前位置，并为16天天气预报构建URL端点。但是，我们只需要5天而不是16天，因此我们为count（ cnt ）指定6。我们使用6，因为时区取决于服务器，而不取决于指定的位置。这意味着API可能会返回前一天或当天的天气。这就是为什么要多花1天作为填充时间的原因。

var location = locationStore.getLocation();
var url = `${constants.WEATHER_URL}${constants.WEATHER_FORECAST_PATH}?cnt=6&lat=${location.latitude}&lon=${location.longitude}&apikey=${constants.WEATHER_APIKEY}`;

接下来，发出请求并通过调用getForecast()函数使用API响应更新UI：

requestor.get(url).then((response) => {
  this.set('is_loading', false);
  var forecast = this.getForecast(response);
  this.set('forecast', forecast);
});

这是16天的预测终点返回的示例响应。请注意，为了使示例更简洁，我将count设置为1，这就是为什么list属性仅包含一个对象的原因。

{  
   "city":{  
      "id":2643743,
      "name":"London",
      "coord":{  
         "lon":-0.12574,
         "lat":51.50853
      },
      "country":"GB",
      "population":0
   },
   "cod":"200",
   "message":0.0347,
   "cnt":1,
   "list":[  
      {  
         "dt":1470571200,
         "temp":{  
            "day":24.69,
            "min":17.37,
            "max":24.69,
            "night":17.37,
            "eve":23.29,
            "morn":19.02
         },
         "pressure":1029.77,
         "humidity":0,
         "weather":[  
            {  
               "id":500,
               "main":"Rain",
               "description":"light rain",
               "icon":"10d"
            }
         ],
         "speed":8.27,
         "deg":253,
         "clouds":0
      }
   ]
}

预测页面样式

以下是预测页面的样式（ pages/forecast/forecast.css ）：

Page {
  font-size: 15px;
}

.item {
  padding: 20px 10px;
}

.day-weather {
  text-align: center;
}

.details {
  horizontal-align: left;
}

.date {
  font-size: 20px;
}

.icon {
  font-family: 'weathericons';
  font-size: 30px;
}

.temp {
  padding: 3px;
  text-align: center;
  font-size: 15px;
}

.day-temp {
  background-color: #d0c110;
}

.night-temp {
  background-color: #505050;
}

.small-icon {
  font-family: 'weathericons';
  margin-right: 5px;
  text-align: center;
}

全球应用程式样式

打开app.css文件并添加以下样式：

.header {
  background-color: #333;
  color: #fff;
}

.day {
  background-color: #f48024;
  color: #fff;
}

.night {
  background-color: #924da3;
  color: #fff;
}

6.更改默认应用程序图标

您可以通过转到App_Resources文件夹来更改默认的应用程序图标。在那里，您可以看到一个Android和iOS文件夹。对于Android，您可以替换以下每个文件夹中的图像文件以更改图标：

drawable-hdpi
drawable-ldpi
drawable-mdpi

对于iOS，您要替换的是Assets.xcassets/AppIcon.appiconset文件夹中的图像。

如果您想轻松地为Android和iOS创建图标，请查看MakeAppIcon 。只需选择一个图像文件作为图标，它就会为Android和iOS自动生成不同的大小。然后，您可以将它们移动到上述文件夹中。只要确保您拥有正确的尺寸，并且名称与它们替换的图像相同即可。

7.运行应用

通过执行以下tns命令，您可以照常在设备或仿真器上运行该应用程序：

tns run {platform}
tns livesync {platform} --watch

现在，我们使用TypeScript的唯一区别是，在每个任务的开始还有一个附加步骤，将TypeScript文件编译为JavaScript。 TypeScript强大的类型检查功能可充当安全网，以在NativeScript甚至编译应用程序之前捕获一些错误。

结论

在本教程中，您学习了如何使用TypeScript语言使用NativeScript构建应用程序。具体来说，您学习了以下概念：

我将为您提供一些资源，以继续使用NativeScript开发出色的应用程序的过程：

翻译自: https://code.tutsplus.com/tutorials/create-a-weather-app-with-typescript-and-nativescript--cms-27027

cunjie3951

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用TypeScript和NativeScript创建Weather App

在本教程中，我将向您展示如何使用TypeScript语言在NativeScript中构建天气应用。在本系列的上一篇文章中，我们使用纯JavaScript创建了一个笔记应用程序。这次，我们将使用TypeScript。首先，让我们找出为什么TypeScript是构建NativeScript应用程序的好选择。 1.为什么使用TypeScript？ TypeScript是Native...
复制链接

扫一扫