阅读 689

Angular+ionic+cordova实现天气App

开发环境及工具

参考教程:Cordova+Vue实现Android APP开发中的环境配置(https://www.jianshu.com/p/fd7448e2985a)

Angular,ionic,cordova版本

angualr@5.0.0 ionic@3.16.0 cordova@8.0.0

创建项目

1.安装ionic和cordova CLI npm install -g ionic@3.16.0 cordova 不建议安装最新版的ionic,经过测试有些未知bug

2.生成项目 ionic start iweather tabs tabs为可选项,若不输入tabs命令行会提示安装你想要的app布局。

3.用浏览器运行项目 cd iweather ionic serve 运行成功浏览器会出现如下界面

Hello Ionic.png

到这里基本的开发环境都搭建好了,现在开始开发程序。

开发之前请在阿里云申请天气服务API,天气图片可以通过墨迹天气官方网站抓取数据,并封装成自己的天气服务API。

项目需求及预览效果

1.显示城市天气情况

2.查询全国各地天气

预览1.jpg

预览2.jpg

预览3.jpg

开发三个页面主页,关于,设置,主页面显示天气信息,关于页面显示开发者信息,设置页面通过设置城市名称获取不同城市的天气。

本次主要任务是首页和设置页面的开发以及天气服务数据的开发

天气服务数据开发

之所以先开发天气服务数据,是因为首页的数据都依赖于天气服务数据。

用ionic命令行创建一个获取天气的http服务

ionic g provider weather

创建此服务需要以下几步:

1.引入HttpClient, HttpHeaders两个模块,实现获取天气数据的http服务

2.使用 Injectable 装饰器,该服务需要在其他使用此服务的构造函数中注入依赖对象。

3.获取天气的相关数据

weather.ts
此时获取天气的数据服务就完成了,数据获取完毕后就需要将数据渲染到页面上。

APP首页开发

首页需要显示当前城市的天气数据,包括城市,天气图标,温度,风向等信息。

用ionic命令行创建一个首页页面。

ionic g page home

构建此页面需要以下几步

1.页面布局的开发。

2.页面数据的展示。

3.页面数据的控制。

页面布局使用ionic提供的UI组件进行布局,页面数据展示主要通过插值表达式显示数据,对页面的数据进行控制主要在angualr的控制器中进行控制。 在home.html里面进行代码编写展示组件代码,和HTML标签一样,你也可以理解为一个个ionic封装好的UI组件,使用非常方便。具体参考文档(https://ionicframework.com/docs/components/#overview)这里面基本包括了一些常用的页面控件。(代码:https://github.com/Xutaotaotao/ionic_weather/blob/master/src/pages/home/home.html) 在home.sass里面编写页面样式代码来控制页面样式。这部分代码较为简单就不做相应的展示,最后会附上github地址。 在home.ts里面编写代码进行对展示数据的控制。 控器主要实现对页面数据进行初始化,根据设置界面设置的城市名从新渲染主页的数据,获取设置城市名通过本地存储的方式获取,以便第二次进入App还是设置时的城市数据。

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
// 引入WeatherProvider服务
import { WeatherProvider } from '../../providers/weather/weather';
// 引入数据存储
import { Storage } from '@ionic/storage'

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  // 定义控制器中需要用到的数据及类型
  weatherResult:any;
  weather:any
  weatherImg:string;
  location:{
    city:string,
  };
  // 使用构造注入的方式注入依赖对象
  constructor(
    public navCtrl: NavController,
    private weatherProvider:WeatherProvider,
    private storage:Storage
  ){}
  // 初始化视图数据
  ionViewWillEnter(){
    // 获取本地储存的数据并根据城市名称初始化城市数据
    this.storage.get('location').then((val) => {
      // 如果本地储存的数据不为空
      if(val != null){
        this.location = JSON.parse(val);
      }else{
        this.location = {
          city:'北京',
        }
      }
      // 用天气服务获得当前城市的天气数据
      this.weatherProvider.getWeather(this.location.city)
        .subscribe(weatherResult => {
         this.weatherResult = weatherResult;
         // 天气对象
         this.weather = this.weatherResult.result;
         // 天气图片使用墨迹天气的链接拼接imgurl
         this.weatherImg = 'http://www.moji.com//templets/mojichina/images/weather/weather/w'+this.weather.img+".png";
        }
      )
    })
  }
}
复制代码

关于页面开发

用ionic命令行创建一个关于页面。 ionic g page about 关于页面不涉及逻辑,直接贴代码

<!-- 头部 -->
<ion-header>
  <ion-navbar>
    <ion-title>
      关于
    </ion-title>
  </ion-navbar>
</ion-header>

<!-- 页面主体 -->
<ion-content padding>
  <ion-grid>
    <ion-row>
      <ion-col width-100>
        <ion-list>
          <ion-item>
            <strong>应用名称:</strong>涛焘的天气
          </ion-item>
          <ion-item>
            <strong>应用版本:</strong>1.0.0
          </ion-item>
          <ion-item>
            <strong>应用描述:</strong>一个简单的天气
          </ion-item>
        </ion-list>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>
复制代码

设置页面开发

用ionic命令行创建一个设置页面。 ionic g page setting 设置页面的主要功能是设置城市的名称并将设置值存储到本地。

  • 设置界面UI控件 主要就是一个输入框和提交按钮 通过表单提交的方式将数据保存在本地存储数据中。
<ion-header>
  <ion-navbar>
    <ion-title>设置</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-grid>
    <ion-row>
      <ion-col width-100>
        <form (ngSubmit)="saveFrom()">
          <ion-item>
            <ion-label fixed>
              城市
            </ion-label>
            <ion-input [(ngModel)]="city" name="city" type="text">   
            </ion-input>
          </ion-item>
          <button ion-button type="submit" class="ion">保存更改</button>            
        </form>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>
复制代码
  • 设置组件的控制器
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
// 引入数据存储
import { Storage } from '@ionic/storage';
import { HomePage } from '../home/home'

@IonicPage()
@Component({
  selector: 'page-settings',
  templateUrl: 'settings.html',
})
export class SettingsPage {
  // 初始城市数据类型
  city:string;
  // 使用构造注入的方式注入依赖对象
  constructor(
    public navCtrl: NavController, 
    public navParams: NavParams,
    private storage:Storage) {
      // 获取本地储存的数据并根据城市名称初始化城市数据,和主页逻辑一样
      this.storage.get('location').then((val) => {
        if(val != null){
          let location = JSON.parse(val);
          this.city = location.city;
        }else{
          this.city = "北京";
        }
      })
  }
  // 模板中form表单绑定的saveFrom方法
  saveFrom(){
    let location = {
      city:this.city,
    }
     // 保存输入框的数据到本地存储中
    this.storage.set('location',JSON.stringify(location));
    // 设置提交后返回主页
    this.navCtrl.push(HomePage)
  }
}
复制代码

到这里,一个简单的天气APP就完成了。通过此实例你可以学习到,ionic基本的UI控件使用,以及angualr创建一个服务实例的基本过程。

如果需要生成APP 执行一下命令

  • Android APP

ionic cordova platform add android

ionic cordova build android

  • IOS APP

ionic cordova platform add ios

ionic cordova build ios

项目Demo的Github地址:https://github.com/Xutaotaotao/ionic_weather

关注下面的标签,发现更多相似文章
评论