基于Swift语言及JSON的天气预报APP的设计与实现

敬件打茨与窓用信Q与电1BChina

Computer

&

Communication2021年第5期基于Swift语言及JSON的天气预报APP的设计与实现任健（上海信息技术学校，上海200331

）摘

要：随着大数据时代的来临，各类智能终端在人们的日常生活中发挥着日益重要的作用.本文研究的基于Swift

语言及JSON的天气预报APP是上海信息技术学校信息技术系软件与信息服务专业《程序设计特长（1）》课程的项目教

学实例，通过一体化的教学引导学生完成界面设计、天气预报API的使用、JSON数据包的解析等，最终将天气信息呈现

给用户。关键词：Swift;

JSON;天气预报；项目教学实例中图分类号：TP311.56

文献标识码：A

文章编号：1003-9767

（2021）

05-170-04Design

and

implementation

of

weather

forecast

APP

based

on

Swift

language

and

JSONREN

Jian(Shanghai

Information

Technology

College,

Shanghai

200331,

China)Abstract：

With

the

advent

of

the

Internet

+

big

data

era,

various

smart

terminals

are

playing

an

increasingly

important

role in

people's

daily

lives.

The

weather

forecast

app

based

on

Swift

language

and

JSON

studied

in

this

paper

is

a

project

teaching

example

of

the

program

design

specialty

(1)

course

for

the

Software

and

Information

Service

Department

of

the

Information

Technology

Department

of

Shanghai

Information

Technology

School.

It

guides

students

through

integrated

teaching.

Complete

interface

design,

use

of

weather

forecast

API,

analysis

of

JSON

data

package,

etc.,

and

finally

present

weather information

to

ds:

Swift;

JSON;

weather

forecast;

project

teaching

examples0引言上海信息技术学校的软件与信息服务专业的学制为四

统叫

苹果公司生产的Mac电脑采用了

macOS操作系统，

而macOS的核心是Unix操作系统，比较安全旳。相较于学

年，三年级的学生已经完成了一系列专业课程的学习，具备

生熟悉的Windows操作系统，macOS系统的稳定性和安全

性更好，随着时代的发展，已经有越来越多的人选择使用

较好的编码能力。作为2000年后出生的互联网原住民，他

们的成长伴随着互联网的飞速发展，电脑、手机已经成为他

们生活中不可或缺的一部分，其中iPhone因其无与伦比的安

Mac电脑，从Windows系统转为使用macOS系统需要适应

一段时间，且两者间的应用程序互不兼容，macOS的APP

可以使用Xcode和Swift语言进行开发。全性、独特的工业设计风格和成熟稳定的操作系统获得不少

人的青睐叫1.2

Xcode

和

Swift

语言Xcode是运行在操作系统macOS上的集成开发环境

（IDE）,开发人员可以使用Xcode为苹果系列产品开发应用

程序，包括

iPad、iPhone、Apple

Watch、Apple

TV

和

Maco

在现实生活中，天气预报对人们的生活非常重要，很多

人一天的计划和行动都会根据天气预报进行决定冏。因此，

基于Swift语言及JSON的天气预报APP的项目开发实践贴

近真实生活，能够较好地激发学生的学习兴趣，进一步提高

他们的编程开发能力、团队合作能力以及职场生存能力。Xcode为人们提供了完善的用户界面，绝大多数编码调试工作

都可以在一个窗口内完成。通过使用Storyboard可以定义多个

视图，并将它们连接在一起，构成完整的用户界面。1开发环境概述1.1

macOSmacOS是首个应用在商用领域的图形用户界面操作系

目前，Swift语言作为苹果公司主推的iOS开发的主

流语言，在iOS应用开发中占据着重要的地位冏。Swift是

苹果公司于2014年推出的一种全新语言，正在逐步替代

作者简介：任健（1989—）,男，浙江舟山人，本科，中级讲师。研究方向：软件工程、职业教育。170

2021年第5期信息与电HChina

Computer

&

Communication後件开找与窓用Objective-C语言进行iOS应用开发［6］o相较于Objective-C

冗长的代码、复杂的符号和表达式,Swift语言更为简洁、快速、

Text

Field用于接收用户输入的城市名称。相关控件添加完成

之后，可以通过Xcode的属性窗格进行控件大小、字体参数、

安全、高效，也更容易上手，相较于Objective-C更容易被

中职学生理解和接受。对齐方式、颜色等的具体设置，同时需要根据控件在视图界

面的显示顺序对所有控件进行排序。1.3心知天气互联网上有各种各样的天气API接口，但不同API接口

2.2使用心知天气API获取天气信息是向某天气站点发起带有地点参数的

的请求方式、返回数据、相关资源等都存在或多或少的差异。

URL地址连接以请求数据，站点将返回携带天气预报信

息、地址和日期的JSON格式或XML格式的字符串［训。

在网络上传输数据时最常用的格式为XML和JSON,均是通

用数据交换格式，JSON的主要优势是体积小⑺。心知天气

返回的数据采用的就是JSON格式。为了统一教学标准，使

JSON作为一种轻量级的数据交换格式，具有安全、快速、

通用、数据通信量小等优点何。天气实况信息的请求地

学生较好地掌握相关的知识点和技能点，笔者选择心知天气

址为(其中包含API密钥-key、所查询位置-locationA语

言-language、单位-unit

四个参数):rse.

的免费版。心知天气致力于向心知用户提供准确、稳定、丰

富的天气数据服务，内容包括但不限定于天气数据API、天

气网页插件、微信查询天气服务及网站查询天气服务冈。同时,

com/v3/weather/?key=plser93yuejjopyh&1ocation=s

hanghai&language=zh-Hans&unit=c。同样，通过调整起始

时间(start)和天数(days)的数值，就可以获得更多的信

心知天气提供了详尽的产品文档、天气状况图片素材包、示

例代码等。息，下面这个请求地址请求的就是上海自今天开始3天内的

天气预报信息：/v3/weather/

2软件设计与实现首先，需要通过Xcode的File

—

New

—>

Project菜单

新建工程文件，然后选择macOS下Application模板中的

on?key=plser93yuejjopyh&1ocation=shanghai&language=zh-

Hans&unit=c&start=0&days=3。心知天气还在Github上提供了示例代码，这为实现APP

的相关功能和具体的教学提供了便利。在向心知天气的服务

器发送天气预报信息请求时，需要使用信号量处理事件并发,

Appo

Language

选择

Swift,

Userinterface

选择

Storyboard,

完成工程文件的创建。2.1设计APP界面除语法语义外，Swift的最大优势之一是能够设计用户

即GCD

(

Grand

Central

Dispatch)

o其核心的概念是队列，

需要在一个线程中执行某段代码时，只需要将这段代码提交

给GCD的队列，线程的创建、调度、运行、销毁等操作，

界面。对于大多数开发人员而言，iOS开发的与众不同之处

在于代码(.Swift文件)和用户界面(.storyboard)相分离［9］o

天气预报APP的用户界面如图1所示。均由GCD自动完成。当向心知天气的服务器发起请求时，

初始化信号量为0,服务器接收到请求后，判断请求URL是

否合法。请求合法，则返回天气数据JSON包，否则就报错。

数据包返回后，使用()执行信号量+1操作，

释放相关资源后，使用()执行信号量-1操作,

请求资源分配。核心代码如图2所示。2.3解析JSON数据包从Swift4开始，当获取来自心知天气的JSON数据后，

就可以使用JSONDecoder类进行处理，将JSON字符串转换

为模型。JSONDecoder是Apple官方推出的JSON解析类，

相较第三方JSON解析类，具有可靠、稳定和原生类型支持

广泛等优点，但也存在一个缺点：解析过程中的任一属性解

析失败会导致整个操作失败。图1天气预报APP的用户界面为了解决这一问题，引入第三方工具网站：app.

在Xcode开发中，视图界面的设计在oard中

实现，单页面视图的APP布局在View

Controller

Scene-View

,只需要把心知天气返回的JSON数据输入其

中，选择语言为Swift,就可以获取对应的编解码协议。逐

Controller-View中完成。本APP主要涉及4类控件：Image

日天气预报和昨日天气的JSON数据及对应的编解码协议

如图

3

所示，使用

let

welcome

=

try?

newJSONDecoder().

View、Label、Push

ButtonA

Text

Fieldo

Image

View

主要用

于放置背景图片和天气实况的图片，Label用于呈现城市名

称、温度、天气状况，Push

Button用于实现点击查询的功能，

decode(,

from:

jsonData)即可完成解析。需要注

意的是，根据心知天气的示例代码，需要将lastUpdate的类171

腴件开茨与姦用信@1与电nChina

Computer

&

Communication2021年第5期型定义为String类型，以避免解析失败。let

url

=

(URLComponents(string:11

api

・

seniverse

・ com/v3/weather/?key=S37CvdUtcqy366EZ-&location="+location+"&language=zh-Hans&unit=c")?.url)!//天气实况谓求地址let

request

=

URLRequest(url:

url)

//发出网络请求let

semaphore

=

DispatchSemaphore(value:

0)

//用信号■处理事件并发let

task

=

sk(with:

request)

{

〃发出谓求，井获得反馈(data,

response,

error)

->

Void

inif

let

jsonData

=

data

{let

weather

=

try?

JSONDecoderC).,

from:

jsonData)//解析JSON数据

print(weather)//输出}

else

if

error

!=

nil

{

print("Error:

(ror)")}

else

{print(”Error■:

(iror)”)

}semaphore

semaphore・wait(

)//谓求资源分配图2天气JSON数据包获取核心代码0

quicktypeNamePlease

Share! O

OptionsSource

typeJSONWelcome//

To

parse

the

JSON,

add

this

file

to

your

project

and

do:////

let welcome =

try?

(,

from:

jsonData)Language Otherimport

Foundation//

MARK:

-

Welcome

struct

Welcome:

Codable

{

let

results:

[Result]//

MARK:

-

Result

struct

Result:

Codable {

let

location:

Location

let

daily:

[Daily]

let lastUpdate:

DateSwiftStructs

or

classesStruct:ion":{

Ld,,:,,W™3SJ5ZBJUY".Plain

types

onlyGenerate

initializers

and

mutatorsCodingKey

{ast_update"Explicit

CodingKey

values

in

Codable

typesURLSession

task

extensions'date":"2021-03-01",•text_dayM:"大雨”,WARK:

-

Dailyuct

Daily:

Codalet

date,

textDay,

codeDay,

textNight:

String

let

codeNight,

high,

low,

rainfall:

St

precip,

windDirection,

windDirecti

ree,

windSpeed:

StringwindScale,

humidity:

Stringum

CodingKeys:

String,

CodingKey

{

case date

case

textDay

=

"text_day"

case

codeDay

=

"code_day"

case

textNight

= "text_night"

case

codeNight

=

"cod

case

high,

low,

rainf

case

windDirection

=

case

windDir

"wind_direction_degree"case

windSpe

_case

windScale

=

"wind_scale"

case

humidityAlamofire extensionsObjects

inherit

from

NSObject

and

@objcMembers

is

added

to

classesRenders

output

in

a

Swift

5

compatible

modeRenders

each

top-level

object

in

its

own

Swift

fileUse

var

instead

of let

for

object

propertiesMake

all

properties

optionalCopy

Code7

：

-

Location

;truct

Location:

Codable

{

let

id,

name,

country,

path:

String

let

timezone,

timezoneoffset:

StringCodingKey

{

__..;ry,

path, timezone

ffset

=

"timezone_offset"图3

JSON数据与对应的编解码协议根据示例代码中天气实况的编解码协议，可以使用以下

代码获取JSON数据包中的城市名称：进行关联，将返回值赋值给控件的stringValue属性、image

属性，以实现更新天气数据和切换图片。核心代码如图4所示。class

ViewController:

NSViewController

{guard

let

CityName:

String

=

weather?.results[O].location,

name

as!

String©IBOutlet

weak

var

InputCN:

NSTextField!//天气査询输入框GIBOutlet

weak

var

NowCN:

NSTextField I//B询的城市-中文else

{print("城市名称未取到")}2.4呈现天气信息根据返回的天气数据包，将城市名称、图像编码、天气

PIBOutlet

weak

var

NowCode:

NSImageView!//天吒图像编码(aiBOutlet

weak

var

NowText:

NSTextFieldl//天代状况(PIBOutlet

weak

var

NowTemperature:

NSTextField!//天气温度@IBAction

func

Search(_

sender:

Any)

{NowCN・

stringValue=rNow(location:

Value)

.CityName

//凰值NowCode・image

=

NSImage(named:

Seniverse・API・weatherNowClocation:

Value)

.Code)

〃切换图片状况、温度等JSON数据按层级依次解析并赋值，然后在查

询按钮的点击事件Search()中调用weatherNow()方法获取对

应的返回值。同时，通过视图化操作的方式，将控件和代码

//部分代码省略}图4天气信息的更新代码172

2021年第5期信IB与电腐China

Computer

&

Communication软件卄域;与惑用3结语本文基于Swift语言及JSON的天气预报APP,通过调

用心知天气网站的API获取用户查询城市的天气情况并呈现

给用户，满足了用户随时随地查看天气情况的需求。APP使

⑶百度百科.macOS

[EB/OL].(2010-03-30)[2021-03-01].ht^sy/baike.

/item/macOS.[4]张伟.面向macOS平台的企业云存储应用系统研究[D],

广州：华南理工大学,2019.⑸张俊晖.高职院校《Swift语言基础》课程设计研究[J],

电脑知识与技术,2016,12(13):167-168.用心知天气官方提供的sk发送服务器

请求，使用信号量DispatchSemaphore处理事件并发，使用

JSONDecoder处理JSON数据。测试发现，该APP的使用效

果良好，能基本满足用户的天气查询需求。绝大多数软件与信

[6]

黑马程序员.基于Swift语言的iOSApp商业实战教程[M].

北京：人民邮电出版社,2017.息服务专业的学生通过学习，能够较好地完成天气预报APP

[7]

周明韬.基于Android

Studio的天气预报APP设计与实

现[J].电子制作,2017(21):的设计、编码、测试与部署，对Sw迅语言的实际应用、

属性设置、心知天气API的使用、网络请求、JSON数据编解

[8]

心知天气.服务协议[EB/OL].(2020-07-20)[2021-03-01].

http

s:///

terms.码协议及解析等掌握得较好，整体反馈良好，教学成效显著。[9]

侯睿哲.Swift编程语言的特点及应用分析[J].电脑知识与

参考文献[1]

赵益泽.浅析安卓系统,iOS,Windows

Phone系统的差异

性[J].数字通信世界,2017(11):155-156.技术,2020,16(3):62-63.[10]

史桂红.基于Android及JSON的天气预报APP设计与

实现[J].苏州市职业大学学报,2019,30(1):27-32.[11]

赵鹏，骆德汉，梅领亮.一种基于JSON的Android终端

远程获取解析数据的方法[J].微型机与应用,2017,36(21):

[2]

刘孝赵，王成.基于API技术的嵌入式天气预报设计[J].

无线互联科技,2018,15(23):126-127.57-60.173