《手把手教你写天气预报.doc》由会员分享，可在线阅读，更多相关《手把手教你写天气预报.doc（71页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、此文档供上网不便的朋友使用，仅供学习交流使用。此文档不能复制，鼓励手敲代码，毕竟拖控件粘代码始终是不好的事情。如果实在是需要，可以到博客上面来复制代码另外，此文档由于做得倡促，写博客的时候随便粘过来的。没有好好排版，如果看得不爽请到博客里看原文。（一）手把手教你写天气预报程序：序言 先来展示下程序的效果图吧 这个程序虽小，但是基本的东西都是具有的。说下用到的具有特色的知识点（简单的不说了）：UserControl，WebClient请求，Json数据解析，XML数据解析，TombStone，IsolatedStorage存储，本地数据库SQL CE。上面的每个知识点要写都是一个Demo。此例子
2、展示怎么将所有知识点联系到一块做一个实在的应用。Window phone开发，我感觉现在这样的中文实例教程很少。我的英语水平也不好，按照教育部的说法，六级没过，那些神马英文教程，勉强能看，但那也是相当纠结的事情。我估计还有不少不爱看英文教程，看到英文就头疼的爱好WP7开发的入门者，所以打算写这么一个教程，尽量详细到每一步，尽量把分析思考写出来。如写的不好，尽请见谅。 写一个新手看的懂，让他们能做出这么一个可以用的应用增加一点自信心。最后一句：新手请进，老鸟飘过（二）手把手教你写天气预报程序：UserControl的运用 那么，开始吧。首先确认安装了window phone SDK（没有的先去安
3、装，SDK自带VS2010 Express版，还有就是电脑系统要是win7，XP不支持微软原版的模拟器，不过可以使用传智播客做的模拟器，具体自己百度）。如果本来安装了VS2010 ultimate的。可以用之开发，但是确认升级到了SP1版，不然不能使用，而且，如果本来的VS2010是中文版，那么需要到C:Program FilesMicrosoft Visual Studio 10.0Common7IDEProjectTemplatesCSharp（C盘为SDK安装目录）,复制Silverlight for Windows Phone文件夹（此为window phone模板）到C:Users用
4、户名DocumentsVisual Studio 2010TemplatesProjectTemplatesVisual C#下，这样原来的中文版VS2010就能识别window phone模板了。 打开VS2010。无论你打开的是中文版的还是英文版的，我用的是中文版的，我下面所说的操作大部分都是中文的。如果你英文不好还要用英文版的（虽然基本没几个英文单词），如果找不到我也没办法了（不过大部分应该都附图）。 点击文件-新建-项目，在左边的模板里面选择visual C#，然后再选择silverlight for window phone，然后在右边选择 window phone applicat
5、ion。填入名称：WeatherForecast 具体如下图：点击确定。然后在这个弹窗，选择OS 7.1，点击OK。现在也可以点击运行。 运行方法：先看这 绿色三角后面选择的是Emulator，就是模拟器。还有一个选项是Device，就是手机。确认选择的是模拟器，点击绿色三角或者按F5运行。运行成功！ 我觉得这么一个程序，首先应该要能够获取到天气信息展示到界面。先分析下界面应该怎么做吧。新手看到这么复杂的界面大部分还真是无从入手。 观察界面，就是一个Grid的布局。但是麻烦的是右边的预报后几天天气的布局。单靠grid布局达不到如此效果。所以把这做成UserControl。这样更容易布局。也可以
6、展示下UserControl的应用。现在，先添加一个UserControl。在右边的解决方案管理器，在WeatherForecast上右键，添加，新建项。添加一个window phone user control。命名为ForecastTemplate，点击添加，如图：在ForecastTemplate.xaml。里面的name为LayoutRoot的grid里面添加两个TextBlock，一个Image。具体代码如下： 现在在左边的设计框显示的是这样的： 我们需要从外部给这个UserControl的Textblock或者Image的属性赋值，那么需要给ForecastTemplate这个类添
7、加成员变量来控制Textblock或者Image的属性。那么。转到ForecastTemplate.xaml.cs页面。也就是在ForecastTemplate.xaml的代码页面，右键，查看代码。就看到了。在ForecastTemplate.xaml.cs页面，在ForecastTemplate类中添加如下的成员。/定义Image的Source属性。这样这个用户控件就能从外面访问到这个Image控件的Source属性了 private string _imageUri; public string ImageUri get return _imageUri; set _imageUri =
8、value; BitmapImage bmp = new BitmapImage(new Uri(value, UriKind.Relative); WImg.Source = bmp; /定义了TextBlock的Text属性。外头就可以给这个Text属性赋值了 private string _weekday; public string Weekday get return _weekday; set _weekday = value; ; weekday.Text = value; private string _temp; public string Temp get return _
9、temp; set _temp = value; temp.Text = value; 是否发现在这显示红色波浪线？ 因为没有引入命名空间。在BitmapImage上右键。解析，选择第一个Using。这样就引入了命名空间。这里提这个主要是给新手提个醒，遇到错误不要着急。先看清楚是什么状况。解决就好了。现在转到MainPage.xaml页面。先添加命名空间。xmlns:my=clr-namespace:WeatherForecast贴图展示命名空间添加位置 正确添加命名空间。智能提示就能访问到Usercontrol 现在添加一些图片资源文件到工程。我这工程添加的图片资源可以到这下载：直接右键解压
10、到Images文件夹。然后复制整个Images文件夹到工程里，具体操作：复制文件夹，然后解决方案资源管理器右键WeatherForecast这个工程，选择粘贴就完成了引入资源到工程。现在到MainPage.xaml中添加代码：Name为contentPanel的grid添加代码。一开始ForecastTemplate下面会显示蓝色波浪线，而且在设计框里也不显示控件。运行一次就好。运行一次后，在设计框里显示如下：好了，这一节就到这吧。省得篇幅太长了。这节主要介绍了UserControl的运用。如有问题可以直接留言。这节工程代码下载： （三）手把手教你写天气预报程序：运用WebClient获取天气
11、和json数据解析 上一节我们练习了UserControl，这次我们就要把UserControl运用到实际的布局上面来。 首先，把MainPage中的原来的测试UserControl的代码删除，在ContentPanel添加代码： 在设计框显示如下： 这样界面就这样吧。感觉也没啥好说的。现在看WebClient。在点击图中的右下角用红框选择的小按钮或者点击文档大纲。选择PhoneApplicationPage。选择好了。随意找个地点击一下，就成了图中的显示样子。然后选择属性 这里显示的是PhoneApplication的属性。如果不是。重新点击 然后在属性页面选择事件： 然后找到Loaded，
12、在右边的框框双击，生成了一个PhoneApplicationPage_Loaded事件。编译器自动帮你导向了事件处理在这个Loaded事件中，我打算用WebClient获取天气信息。并且显示到界面上。获取天气，就要用到天气预报API。免费的API可以看我写的这个：这节我们就获取北京的天气。用到的Url是：返回的数据相当的多（因为详细，json数据）：weatherinfo:city:北京,city_en:beijing,date_y:2012年3月11日,date:,week:星期日,fchh:11,cityid:,temp1:6-6,temp2:9-2,temp3:130,temp4:11-
13、1,temp5:91,temp6:103,tempF1:42.821.2,tempF2:48.228.4,tempF3:55.432,tempF4:51.830.2,tempF5:48.233.8,tempF6:5037.4,weather1:晴,weather2:晴,weather3:多云转晴,weather4:晴转多云,weather5:多云转阴,weather6:阴,img1:0,img2:99,img3:0,img4:99,img5:1,img6:0,img7:0,img8:1,img9:1,img10:2,img11:2,img12:99,img_single:0,img_title
14、1:晴,img_title2:晴,img_title3:晴,img_title4:晴,img_title5:多云,img_title6:晴,img_title7:晴,img_title8:多云,img_title9:多云,img_title10:阴,img_title11:阴,img_title12:阴,img_title_single:晴,wind1:微风,wind2:微风,wind3:微风,wind4:微风,wind5:微风,wind6:微风,fx1:微风,fx2:微风,fl1:小于3级,fl2:小于3级,fl3:小于3级,fl4:小于3级,fl5:小于3级,fl6:小于3级,index:
15、冷,index_d:天气冷，建议着棉衣、皮夹克加羊毛衫等冬季服装。年老体弱者宜着厚棉衣或冬大衣。,index48:凉,index48_d:天气凉，建议着厚外套加毛衣等春秋服装。体弱者宜着大衣、呢外套。因昼夜温差较大，注意增减衣服。,index_uv:中等,index48_uv:中等,index_xc:适宜,index_tr:适宜,index_co:较舒适,st1:6,st2:-4,st3:8,st4:0,st5:13,st6:2,index_cl:较不宜,index_ls:基本适宜,index_ag:易发我们先新建一个类老保存需要的天气信息。在工程上右键。添加。类。命名为WeatherInfo
16、.cs，点击添加。 添加如下成员变量： public string city get; set; public string cityid get; set; public string date_y get; set; public string week get; set; public string temp1 get; set; public string temp2 get; set; public string temp3 get; set; public string temp4 get; set; public string temp5 get; set; public str
17、ing weather1 get; set; public string weather2 get; set; public string weather3 get; set; public string weather4 get; set; public string weather5 get; set; public string wind1 get; set; public string info get; set; /index48_dPS：展示一个小技巧，添加成员变量快捷方式：prop + tab + tab.编译器就能自动完成，剩下的修改下类型和命名就行了，如图： 保存。现在回到M
18、ainPage.xaml.cs。给PageLoad添加代码： WebClient wb = new WebClient(); /添加下载完成后的处理事件 wb.DownloadStringCompleted+=newDownloadStringCompletedEventHandler(wb_DownloadStringCompleted); /开始异步下载 wb.DownloadStringAsync(new Uri( UriKind.Absolute);在这里敲wb.DownloadStringCompleted的时候，后面的+= ，然后是tab ,tab,编译器就能帮助你自动生成处理函数
19、。如下：void wb_DownloadStringCompleted(object sender, DownloadStringCompletedEventArgs e) throw new NotImplementedException(); 现在要在下载完成的事件里做json数据处理并且赋值给控件。Json数据处理我用的是Jobject类，这个类使用起来很方便。其他的也做过尝试，但是由于要处理的数据的复杂性，使用起来相当麻烦。要用到JObject这类要到具体操作如下：工程-右键-添加引用-浏览，找到刚才解压的目录，并且到BinWindowsPhone下-选择哪个dll文件-确定在Main
20、Page.xaml.cs中引入命名空间using Newtonsoft.Json;using Newtonsoft.Json.Linq;并且为MainPage类添加两个城员变量。WeatherInfo weather = null; /定义星期属性，以便能得出后面的日期 string weekMsg = 星期一, 星期二, 星期三, 星期四, 星期五, 星期六, 星期日 ;然后给下载完成函数添加如下代码：void wb_DownloadStringCompleted(object sender, DownloadStringCompletedEventArgs e) if (e.Result.
21、Length = 0 | e.Error != null | e.Cancelled) MessageBox.Show(获取天气预报失败！); return; JObject json = JObject.Parse(e.Result);/用Jobject解析json数据 weather = new WeatherInfo /由上面需要解析的数据可知，我们需要的数据在在weatherinfo这个节点的下一个节点 city = (string)jsonweatherinfocity, cityid = (string)jsonweatherinfocityid, date_y = (string
22、)jsonweatherinfodate_y, week = (string)jsonweatherinfoweek, info = (string)jsonweatherinfoindex48_d, wind1 = (string)jsonweatherinfowind1, temp1 = (string)jsonweatherinfotemp1, temp2 = (string)jsonweatherinfotemp2, temp3 = (string)jsonweatherinfotemp3, temp4 = (string)jsonweatherinfotemp4, temp5 = (
23、string)jsonweatherinfotemp5, weather1 = (string)jsonweatherinfoweather1, weather2 = (string)jsonweatherinfoweather2, weather3 = (string)jsonweatherinfoweather3, weather4 = (string)jsonweatherinfoweather4, weather5 = (string)jsonweatherinfoweather5 ; MessageBox.Show(weather.city); PS：天气信息很多。只获取5天预报，这
24、里展示J的简单应用，Json.NET还支持XML数据解析，XML，json数据相互转化等。具体参考JSON.NET的帮助文档。点击运行。 成功获取到了天气。现在添加一个函数来更新控件。两位添加一个函数来判断该天气匹配的图片的URI。PS：这个图片问题。由于我对天气专有名词不熟悉，天气相关图片不熟悉。所以这个图片显示就做得马虎了。显示天气信息的图片也很少。如果显示有错，那多包涵。这里也提供一些关于天气的图片资源（如果不嫌麻烦就自己慢慢做）：代码如下： / / 下载完成后的处理事件 / / / void wb_DownloadStringCompleted(object sender, Downl
25、oadStringCompletedEventArgs e) /判断是否下载成功 if (e.Result.Length = 0 | e.Error != null | e.Cancelled) MessageBox.Show(获取天气预报失败！); return; JObject json = JObject.Parse(e.Result);/用Jobject解析json数据 weather = new WeatherInfo city = (string)jsonweatherinfocity, cityid = (string)jsonweatherinfocityid, date_y
26、= (string)jsonweatherinfodate_y, week = (string)jsonweatherinfoweek, info = (string)jsonweatherinfoindex48_d, wind1 = (string)jsonweatherinfowind1, temp1 = (string)jsonweatherinfotemp1, temp2 = (string)jsonweatherinfotemp2, temp3 = (string)jsonweatherinfotemp3, temp4 = (string)jsonweatherinfotemp4,
27、temp5 = (string)jsonweatherinfotemp5, weather1 = (string)jsonweatherinfoweather1, weather2 = (string)jsonweatherinfoweather2, weather3 = (string)jsonweatherinfoweather3, weather4 = (string)jsonweatherinfoweather4, weather5 = (string)jsonweatherinfoweather5 ; UpdateUI(); / / 更新UI信息 / void UpdateUI() day1.Temp = weather.temp2; day2.Temp = weather.temp3; day3.Temp = weather.temp4; day4.Temp = weather.temp5; todaytemp.Text = weather.temp1; todayWhe.Text = weather.weather1 + Environment.NewLine + weather.wind1; todaydate.Text = weather