Angular+ionic+cordova實現天氣App

時間 2019-11-16

標籤 angular+ionic+cordova angular ionic cordova 實現天氣 app 欄目 AngularJS 简体版

原文原文鏈接

開發環境及工具html

參考教程：Cordova+Vue實現Android APP開發中的環境配置（https://www.jianshu.com/p/fd7448e2985a）android

Angular，ionic，cordova版本ios

angualr@5.0.0 ionic@3.16.0 cordova@8.0.0git

建立項目

1.安裝ionic和cordova CLI npm install -g ionic@3.16.0 cordova 不建議安裝最新版的ionic，通過測試有些未知buggithub

2.生成項目 ionic start iweather tabs tabs爲可選項，若不輸入tabs命令行會提示安裝你想要的app佈局。npm

3.用瀏覽器運行項目 cd iweather ionic serve 運行成功瀏覽器會出現以下界面瀏覽器

到這裏基本的開發環境都搭建好了，如今開始開發程序。sass

開發以前請在阿里雲申請天氣服務API，天氣圖片能夠經過墨跡天氣官方網站抓取數據，並封裝成本身的天氣服務API。bash

項目需求及預覽效果

1.顯示城市天氣狀況app

2.查詢全國各地天氣

開發三個頁面主頁，關於，設置，主頁面顯示天氣信息，關於頁面顯示開發者信息，設置頁面經過設置城市名稱獲取不一樣城市的天氣。

本次主要任務是首頁和設置頁面的開發以及天氣服務數據的開發

天氣服務數據開發

之因此先開發天氣服務數據，是由於首頁的數據都依賴於天氣服務數據。

用ionic命令行建立一個獲取天氣的http服務

ionic g provider weather

建立此服務須要如下幾步：

1.引入HttpClient, HttpHeaders兩個模塊，實現獲取天氣數據的http服務

2.使用 Injectable 裝飾器，該服務須要在其餘使用此服務的構造函數中注入依賴對象。

3.獲取天氣的相關數據

此時獲取天氣的數據服務就完成了,數據獲取完畢後就須要將數據渲染到頁面上。

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)
  }
}
複製代碼