Angular+ionic+cordova實現天氣App

Xutaotaotao發表於2019-03-04
AngularAPP

開發環境及工具

參考教程：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

相關文章