swift实战小程序1天气预报

简介:        在有一定swift基础的情况下,让我们来做一些小程序练练手,今天来试试做一个简单地天气预报。

       在有一定swift基础的情况下,让我们来做一些小程序练练手,今天来试试做一个简单地天气预报。新建一个工程,命名为Weather,然后上网找一个天气预报的API,百度搜索“天气预报 api”,打开一个网站,如下图:

  

我们最好找json的格式的api,比如这样的



找到API之后,我们来制作一个用户界面,打开storyboard,加载一个按钮,命名为北京的天气信息:



    在按钮下方加一个text view来呈现天气信息:


       现在添加一个按钮的点击事件,打开ViewController,输入以下代码:

 @IBAction func btnPressed(sender:AnyObject){
    println("Button Clicked")
    }
 
       再回到storyboard中,右键点击,把Touch up inside拖到view controller中可以看到我们刚刚定义的btnPressed,点击关联,效果如下:



运行看一下效果,点击按钮,显示:


     然后我们来加载天气信息,为了让我们的程序更好,在工程中建立一个playground,targets勾选Weather,建好的playground如图:


   playground中的代码如下:

var url = NSURL(string: "http://api.k780.com:88/?app=weather.today&weaid=1&appkey=10003&sign=b59bc3ef6191eb9f747dd4e83c99f2a4&format=json")
var data:NSData = NSData(contentsOfURL: url!, options: NSDataReadingOptions.DataReadingUncached, error: nil)!
var str = NSString(data: data, encoding: NSUTF8StringEncoding)

    接着我们来解析JSON,使用swift自带的解析工具,代码如下:


var json: AnyObject! = NSJSONSerialization.JSONObjectWithData(data, options: NSJSONReadingOptions.AllowFragments, error: nil)

var weatherInfo: AnyObject? = json?.objectForKey("result")
var city = weatherInfo?.objectForKey("citynm")

     效果如图:


可以从右边看到我们得到了Json中的城市信息,补全我们需要的所有信息:

var city = weatherInfo?.objectForKey("citynm")

var temp = weatherInfo?.objectForKey("temperature")

var day = weatherInfo?.objectForKey("days")

   现在我们在ui中呈现天气信息,把刚才playground中写的部分拷贝,然后在viewcontroller中新建一个方法loadWeather,把代码拷进去,再在viewDid方法中调用loadWeather,最后增加一个IBOutlet与storyboard相关联,方法依旧是拖动,拖动storyboard中的New Referencing Outlet与tv相关联。然后在btnPressed方法中依旧增加loadWeather方法.

    在loadWeather方法中加上信息的显示语句:

 tv?.text = "城市:\(city)\n温度:\(temp)\n日期:\(day)"

运行一下看看效果,如图:


    虽然显示出来了,但是我们的text是可编辑状态的,在storyboard中勾选Editable,再次运行:



     大功告成,而且现在每次单击按钮,就会重新请求天气情况,大家也来试试吧。

目录
相关文章
|
2月前
|
数据处理 Swift
Swift 中的运算符和表达式是构建程序逻辑的基础,包括算术、关系、逻辑、位运算符及赋值运算符,用于数值计算、条件判断、位操作、赋值与更新等
Swift 中的运算符和表达式是构建程序逻辑的基础,包括算术、关系、逻辑、位运算符及赋值运算符,用于数值计算、条件判断、位操作、赋值与更新等。掌握这些工具是编写高效代码的关键。
44 1
|
3月前
|
JavaScript 小程序 开发者
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
673 0
|
6月前
|
小程序 安全 搜索推荐
【微信小程序开发实战项目】——个人中心页面的制作
本文介绍了如何设计和实现一个网上花店的微信小程序,包括个人中心、我的订单和我的地址等功能模块。个人中心让用户能够查看订单历史、管理地址和与客服互动。代码示例展示了`own.wxml`、`own.wxss`和`own.js`文件,用于构建个人中心界面,包括用户信息、订单链接、收藏、地址、客服和版本信息。我的订单部分展示了订单详情,包括商品图片、名称、销量、价格和订单状态,用户可以查看和管理订单。我的地址功能允许用户输入和编辑收货信息,包括联系人、性别、电话、城市和详细地址。每个功能模块都附有相应的WXML和WXSS代码,以及简洁的样式设计。
350 0
【微信小程序开发实战项目】——个人中心页面的制作
|
6月前
|
小程序 开发者
uniapp实战 —— 开发微信小程序的调试技巧
uniapp实战 —— 开发微信小程序的调试技巧
582 1
|
6月前
|
前端开发 小程序
【微信小程序-原生开发】实用教程20 - 生成海报(实战范例为生成活动海报,内含生成指定页面的小程序二维码,保存图片到手机,canvas 系列教程)
【微信小程序-原生开发】实用教程20 - 生成海报(实战范例为生成活动海报,内含生成指定页面的小程序二维码,保存图片到手机,canvas 系列教程)
440 0
|
6月前
|
小程序
【微信小程序】实战案例 -- 向订阅用户发送消息(范例:报名提醒)
【微信小程序】实战案例 -- 向订阅用户发送消息(范例:报名提醒)
323 0
|
6月前
|
小程序 前端开发
【微信小程序-原生开发】TDesign 实战模板——聊天气泡
【微信小程序-原生开发】TDesign 实战模板——聊天气泡
135 0
|
6月前
|
小程序
【微信小程序-原生开发】TDesign 实战模板——带性别图标的头像
【微信小程序-原生开发】TDesign 实战模板——带性别图标的头像
85 0
|
6月前
|
小程序 定位技术
【微信小程序-原生开发】TDesign 实战模板——个人信息编辑页
【微信小程序-原生开发】TDesign 实战模板——个人信息编辑页
75 0
|
6月前
|
JSON 小程序 JavaScript
【微信小程序-原生开发】TDesign 实战模板——账号密码登录页(含密码显示隐藏的技巧)
【微信小程序-原生开发】TDesign 实战模板——账号密码登录页(含密码显示隐藏的技巧)
184 0