開(kāi)發(fā)環(huán)境及工具
參考教程：Cordova+Vue實(shí)現(xiàn)Android APP開(kāi)發(fā)中的環(huán)境配置（http://www.reibang.com/p/fd7448e2985a）
Angular，ionic枕稀，cordova版本
angualr@5.0.0
ionic@3.16.0
cordova@8.0.0
創(chuàng)建項(xiàng)目
1.安裝ionic和cordova CLI
npm install -g ionic@3.16.0 cordova
不建議安裝最新版的ionic埠戳，經(jīng)過(guò)測(cè)試有些未知bug
2.生成項(xiàng)目
ionic start iweather tabs
tabs為可選項(xiàng)傍衡，若不輸入tabs命令行會(huì)提示安裝你想要的app布局褒脯。
3.用瀏覽器運(yùn)行項(xiàng)目
cd iweather
ionic serve
運(yùn)行成功瀏覽器會(huì)出現(xiàn)如下界面
到這里基本的開(kāi)發(fā)環(huán)境都搭建好了圈暗，現(xiàn)在開(kāi)始開(kāi)發(fā)程序康聂。
開(kāi)發(fā)之前請(qǐng)?jiān)诎⒗镌粕暾?qǐng)?zhí)鞖夥?wù)API啡邑，天氣圖片可以通過(guò)墨跡天氣官方網(wǎng)站抓取數(shù)據(jù)产徊，并封裝成自己的天氣服務(wù)API昂勒。
項(xiàng)目需求及預(yù)覽效果
1.顯示城市天氣情況
2.查詢(xún)?nèi)珖?guó)各地天氣
開(kāi)發(fā)三個(gè)頁(yè)面主頁(yè)，關(guān)于舟铜，設(shè)置戈盈，主頁(yè)面顯示天氣信息，關(guān)于頁(yè)面顯示開(kāi)發(fā)者信息谆刨，設(shè)置頁(yè)面通過(guò)設(shè)置城市名稱(chēng)獲取不同城市的天氣塘娶。
本次主要任務(wù)是首頁(yè)和設(shè)置頁(yè)面的開(kāi)發(fā)以及天氣服務(wù)數(shù)據(jù)的開(kāi)發(fā)
天氣服務(wù)數(shù)據(jù)開(kāi)發(fā)
之所以先開(kāi)發(fā)天氣服務(wù)數(shù)據(jù)，是因?yàn)槭醉?yè)的數(shù)據(jù)都依賴(lài)于天氣服務(wù)數(shù)據(jù)痊夭。
用ionic命令行創(chuàng)建一個(gè)獲取天氣的http服務(wù)
ionic g provider weather
創(chuàng)建此服務(wù)需要以下幾步：
1.引入HttpClient, HttpHeaders兩個(gè)模塊刁岸，實(shí)現(xiàn)獲取天氣數(shù)據(jù)的http服務(wù)
2.使用 Injectable 裝飾器，該服務(wù)需要在其他使用此服務(wù)的構(gòu)造函數(shù)中注入依賴(lài)對(duì)象她我。
3.獲取天氣的相關(guān)數(shù)據(jù)
此時(shí)獲取天氣的數(shù)據(jù)服務(wù)就完成了,數(shù)據(jù)獲取完畢后就需要將數(shù)據(jù)渲染到頁(yè)面上虹曙。
APP首頁(yè)開(kāi)發(fā)
首頁(yè)需要顯示當(dāng)前城市的天氣數(shù)據(jù)，包括城市番舆，天氣圖標(biāo)酝碳，溫度，風(fēng)向等信息恨狈。
用ionic命令行創(chuàng)建一個(gè)首頁(yè)頁(yè)面疏哗。
ionic g page home
構(gòu)建此頁(yè)面需要以下幾步
1.頁(yè)面布局的開(kāi)發(fā)。
2.頁(yè)面數(shù)據(jù)的展示禾怠。
3.頁(yè)面數(shù)據(jù)的控制沃斤。
頁(yè)面布局使用ionic提供的UI組件進(jìn)行布局圣蝎，頁(yè)面數(shù)據(jù)展示主要通過(guò)插值表達(dá)式顯示數(shù)據(jù)，對(duì)頁(yè)面的數(shù)據(jù)進(jìn)行控制主要在angualr的控制器中進(jìn)行控制衡瓶。
在home.html里面進(jìn)行代碼編寫(xiě)展示組件代碼徘公，和HTML標(biāo)簽一樣，你也可以理解為一個(gè)個(gè)ionic封裝好的UI組件,使用非常方便哮针。具體參考文檔（https://ionicframework.com/docs/components/#overview）這里面基本包括了一些常用的頁(yè)面控件关面。（代碼：https://github.com/Xutaotaotao/ionic_weather/blob/master/src/pages/home/home.html）
在home.sass里面編寫(xiě)頁(yè)面樣式代碼來(lái)控制頁(yè)面樣式。這部分代碼較為簡(jiǎn)單就不做相應(yīng)的展示十厢，最后會(huì)附上github地址等太。
在home.ts里面編寫(xiě)代碼進(jìn)行對(duì)展示數(shù)據(jù)的控制。
控器主要實(shí)現(xiàn)對(duì)頁(yè)面數(shù)據(jù)進(jìn)行初始化蛮放，根據(jù)設(shè)置界面設(shè)置的城市名從新渲染主頁(yè)的數(shù)據(jù)缩抡，獲取設(shè)置城市名通過(guò)本地存儲(chǔ)的方式獲取，以便第二次進(jìn)入App還是設(shè)置時(shí)的城市數(shù)據(jù)包颁。
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
// 引入WeatherProvider服務(wù)
import { WeatherProvider } from '../../providers/weather/weather';
// 引入數(shù)據(jù)存儲(chǔ)
import { Storage } from '@ionic/storage'
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
// 定義控制器中需要用到的數(shù)據(jù)及類(lèi)型
weatherResult:any;
weather:any
weatherImg:string;
location:{
city:string,
};
// 使用構(gòu)造注入的方式注入依賴(lài)對(duì)象
constructor(
public navCtrl: NavController,
private weatherProvider:WeatherProvider,
private storage:Storage
){}
// 初始化視圖數(shù)據(jù)
ionViewWillEnter(){
// 獲取本地儲(chǔ)存的數(shù)據(jù)并根據(jù)城市名稱(chēng)初始化城市數(shù)據(jù)
this.storage.get('location').then((val) => {
// 如果本地儲(chǔ)存的數(shù)據(jù)不為空
if(val != null){
this.location = JSON.parse(val);
}else{
this.location = {
city:'北京',
}
}
// 用天氣服務(wù)獲得當(dāng)前城市的天氣數(shù)據(jù)
this.weatherProvider.getWeather(this.location.city)
.subscribe(weatherResult => {
this.weatherResult = weatherResult;
// 天氣對(duì)象
this.weather = this.weatherResult.result;
// 天氣圖片使用墨跡天氣的鏈接拼接imgurl
this.weatherImg = 'http://www.moji.com//templets/mojichina/images/weather/weather/w'+this.weather.img+".png";
}
)
})
}
}
關(guān)于頁(yè)面開(kāi)發(fā)
用ionic命令行創(chuàng)建一個(gè)關(guān)于頁(yè)面瞻想。
ionic g page about
關(guān)于頁(yè)面不涉及邏輯，直接貼代碼
<!-- 頭部 -->
<ion-header>
<ion-navbar>
<ion-title>
關(guān)于
</ion-title>
</ion-navbar>
</ion-header>
<!-- 頁(yè)面主體 -->
<ion-content padding>
<ion-grid>
<ion-row>
<ion-col width-100>
<ion-list>
<ion-item>
<strong>應(yīng)用名稱(chēng)：</strong>濤燾的天氣
</ion-item>
<ion-item>
<strong>應(yīng)用版本：</strong>1.0.0
</ion-item>
<ion-item>
<strong>應(yīng)用描述：</strong>一個(gè)簡(jiǎn)單的天氣
</ion-item>
</ion-list>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
設(shè)置頁(yè)面開(kāi)發(fā)
用ionic命令行創(chuàng)建一個(gè)設(shè)置頁(yè)面娩嚼。
ionic g page setting
設(shè)置頁(yè)面的主要功能是設(shè)置城市的名稱(chēng)并將設(shè)置值存儲(chǔ)到本地蘑险。
- 設(shè)置界面UI控件
主要就是一個(gè)輸入框和提交按鈕
通過(guò)表單提交的方式將數(shù)據(jù)保存在本地存儲(chǔ)數(shù)據(jù)中。
<ion-header>
<ion-navbar>
<ion-title>設(shè)置</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>
- 設(shè)置組件的控制器
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
// 引入數(shù)據(jù)存儲(chǔ)
import { Storage } from '@ionic/storage';
import { HomePage } from '../home/home'
@IonicPage()
@Component({
selector: 'page-settings',
templateUrl: 'settings.html',
})
export class SettingsPage {
// 初始城市數(shù)據(jù)類(lèi)型
city:string;
// 使用構(gòu)造注入的方式注入依賴(lài)對(duì)象
constructor(
public navCtrl: NavController,
public navParams: NavParams,
private storage:Storage) {
// 獲取本地儲(chǔ)存的數(shù)據(jù)并根據(jù)城市名稱(chēng)初始化城市數(shù)據(jù)岳悟，和主頁(yè)邏輯一樣
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,
}
// 保存輸入框的數(shù)據(jù)到本地存儲(chǔ)中
this.storage.set('location',JSON.stringify(location));
// 設(shè)置提交后返回主頁(yè)
this.navCtrl.push(HomePage)
}
}
到這里佃迄，一個(gè)簡(jiǎn)單的天氣APP就完成了。通過(guò)此實(shí)例你可以學(xué)習(xí)到贵少，ionic基本的UI控件使用呵俏，以及angualr創(chuàng)建一個(gè)服務(wù)實(shí)例的基本過(guò)程。
如果需要生成APP
執(zhí)行一下命令
- Android APP
ionic cordova platform add android
ionic cordova build android
- IOS APP
ionic cordova platform add ios
ionic cordova build ios
項(xiàng)目Demo的Github地址：https://github.com/Xutaotaotao/ionic_weather
