手把手教你写天气预报.doc

1、此文档供上网不便的朋友使用，仅供学习交流使用。此文档不能复制，鼓励手敲代码，毕竟拖控件粘代码始终是不好的事情。如果实在是需要，可以到博客上面来复制代码http:/ 写天气预报程序：序言 先来展示下 程序的效果 图吧 这个程序虽小，但是基本的东西都是具有的。说下用到的具有特色的知识点（简单的不说了）：UserControl，WebClient 请求，Json 数据解析，XML 数据解析，TombStone，IsolatedStorage存储，本地数据库SQL CE。上面的每个知识点要写都是一个 Demo。此例子展示怎么将所有知识点联系到一块做一个实在的应用。Window phone开发，我感觉现

2、在这样的中文实例教程很少。我的英语水平也不好，按照教育部的说法，六级没过，那些神马英文教程，勉强能看，但那也是相当纠结的事情。我估计还有不少不爱看英文教程，看到英文就头疼的爱好WP7开发的入门者，所以打算写这么一个教程，尽量详细到每一步，尽量把分析思考写出来 。如写的不好 ，尽请见谅。 写一个新手看的懂，让他们能做出这么一个可以用的应用增加一点自信心。最后一句：新手请进，老鸟飘过（二）手把手教你写天气预报程序：UserControl 的运用那么，开始吧。首先确认安装了 window phone SDK（没有的先去安装，SDK 自带VS2010 Express 版，还有就是电脑系统要是win7，

3、XP 不支持微软原版的模拟器，不过可以使用传智播客做的模拟器，具体自己百度） 。如果本来安装了 VS2010 ultimate的。可以用之开发，但是确认升级到了 SP1版，不然不能使用，而且，如果本来的VS2010是中文版，那么需要到C:Program FilesMicrosoft Visual Studio 10.0Common7IDEProjectTemplatesCSharp（C 盘为 SDK 安装目录）,复制 Silverlight for Windows Phone文件夹（此为 window phone模板）到 C:Users用户名DocumentsVisual Studio 201

4、0TemplatesProjectTemplatesVisual C#下，这样原来的中文版VS2010就能识别 window phone模板了。打开 VS2010。无论你打开的是中文版的还是英文版的，我用的是中文版的，我下面所说的操作大部分都是中文的。如果你英文不好还要用英文版的（虽然基本没几个英文单词） ，如果找不到我也没办法了（不过大部分应该都附图） 。点击文件-新建- 项目，在左边的模板里面选择visual C#，然后再选择silverlight for window phone，然后在右边选择 window phone application。填入名称：WeatherForecast

5、具体如下图：点击确定。然后在这个 弹窗，选择 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 的属性赋值，那么

7、需要给ForecastTe mplate 这个类添 加成员变量来控制Textblock 或者 Image 的属性。那么。转到 ForecastTemplate.xaml.cs页面。也就是在 ForecastTemplate.xaml 的代码页面，右键，查看代码。就看到了。在 ForecastTemplate.xaml.cs 页面，在 ForecastTemplate类中添加如下的成员。/定义 Image 的 Source 属 性。这样这个用 户控件就能 从外面访问 到这个 Image 控件 的Source 属性了private string _imageUri;public string Im

8、ageUrigetreturn _imageUri;set_imageUri = value;BitmapImage bmp = new BitmapImage(new Uri(value, UriKind.Relative);WImg.Source = bmp;/定义了 TextBlock 的 Text 属性。外头就可以 给这个 Text 属性赋 值了private string _weekday;public string Weekdaygetreturn _weekday;set_weekday = value; ;weekday.Text = value;private string

9、_temp;public string Tempgetreturn _temp;set_temp = value;temp.Text = value;是否发现在这显示红色波浪线？因为没有引入命名空间。在 BitmapImage 上右键。解析，选择第一个Using。这样就引入了命名空间。这里提这个主要是给新手提个醒，遇到错误不要着急。先看清楚是什么状况。解决就好了。现在转到 MainPage.xaml 页面。先添加命名空间。xmlns:my=“clr-namespace:WeatherForecast“贴图展示命 名空间添加 位置 正确添加命 名空间。智能提示就 能访问到Usercontrol

10、现在添加一些图片资源文件到工程。我这工程添加的图片资源可以到这下载：http:/ Images 文件夹。然后复制整个Images 文件夹到工程里，具体操作：复制文件夹，然后解决方案资源管理器右键 WeatherForecast 这个工程，选择粘贴就完成了引入资源到工程。现在到 MainPage.xaml 中添加代码：Name 为 contentPanel 的 grid 添加代码。一开始 ForecastTemplate 下面会显示蓝色波浪线，而且在设计框里也不显示控件。运行一次就好。运行一次后，在设计框里显示如下：好了，这一节就到 这吧。省得篇幅太 长了。这节主要介 绍了 UserContro

11、l 的运 用。如有问题可 以直接留言 。这节工程代 码下载：http:/ （三）手把手教你写天气预报程序：运用 WebClient 获取天气和 json数据解析上一节我们练习了 UserControl，这次我们就要把UserControl 运用到实际的布 局上面来。首先，把 MainPage 中的原来的测试 UserControl 的代码删除，在 ContentPanel 添加代码：在设计框显示如下：这样界面就这样吧。感觉也没啥好说的。现在看 WebClient。在点击图中 的右下角用红框选择的小按钮或者点击文档大纲。选择 PhoneApplicationPage。选择好了。随意找个地点击一下

12、，就成了图中的显示样子。然后选择属 性 这里显示的 是 PhoneApplication 的属性 。如果不是。重新点击 然后在属性 页面选择事 件： 然后找到 Loaded，在右边的框 框双击，生成了一个PhoneApplicationPage_Loaded 事件。编译器自动 帮你导向了事件处理在这个 Loaded 事件中，我打算用 WebClient 获取天气信息。并且显示到界面上。获取天气，就要用到天气预报 API。免费的 API 可以看我写的这个：http:/ API是中央气象台的。主要是因为 这个 API能够获取到县城的天气信息。而且预报的信息很全。缺点就是我只收集到了大约10个省份的

13、城市代码。这节我们就获取北京的天气。用到的 Url 是：http:/ 数据）：“weatherinfo“:“city“:“北京“,“city_ en“:“beijing“,“date_y“:“2012年 3月11日 “,“date“:“,“week“:“星期日“,“fchh“:“11“,“cityi d“:“101010100“,“temp1“:“6-6“,“temp2“:“9-2“,“temp3“:“130“,“temp4“:“11-1“,“temp5“:“91“,“temp6“:“103“,“tempF1“:“42.821.2“,“tempF2“:“48.228.4“,“tempF3“:“

14、55.432“,“tempF4“:“51.830.2“,“tempF5“:“48.233.8“,“tempF6“:“5037.4“,“weather1“:“晴“,“weath er2“:“晴“,“weath er3“:“多云转晴 “,“weather4“:“晴转多云“,“weather5“:“多云转阴“,“weath er6“:“阴“,“img1“:“0“,“img2“:“99“,“img3“:“0“,“img4“:“99“,“img5“:“1“,“img6“:“0“,“img7“:“0“,“img8“:“1“,“img9“:“1“,“img10“:“2“,“img11“:“2“,“img12

15、“:“99“,“img_single“:“0“,“img_title1“:“晴“,“img_title2“:“晴“,“img_t itle3“:“晴“,“img_t itle4“:“晴“,“img_t itle5“:“多云“,“img_t itle6“:“晴“,“img_title7“:“晴“,“img_t itle8“:“多云“,“img_t itle9“:“多云“,“img_t itle10“:“阴“,“img_t itle11“:“阴“,“img_title12“:“阴“,“img_t itle_single“:“晴“,“wind1 “:“微风“,“wind2 “:“微风“,“wind3

16、 “:“微风“,“wind4“:“微风“,“wind5 “:“微风“,“wind6 “:“微风“,“fx1“:“微风 “,“fx2“:“微风“,“fl1“:“小于3级“,“fl2“:“小于3级“,“fl3“:“ 小于3级“,“fl4“:“小于3级“,“fl5“:“ 小于3级“,“fl6“:“小于3级“,“index “:“冷“,“index_d“:“天气冷，建议着棉衣 、皮夹克加羊 毛衫等冬季 服装。年老体弱者 宜着厚棉衣 或冬大衣。“,“index 48“:“凉“,“index 48_d“:“天气凉，建议着厚外 套加毛衣等 春秋服装。体弱者宜着 大衣、呢外套。因昼夜温差 较大，注意增减衣 服

17、。“,“index _uv“:“中等“,“index 48_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.cs，点击添加。添加如下成员变量：public string city get; set; publ

18、ic 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 string weather1 get; set; public string weather2 get; se

19、t; 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.编译器就能自动完成，剩下的修改下类型和命名就行了，如图：保存。现在回到 MainPage.xaml.cs。给 PageLoad 添加代码：WebClient wb = new

20、WebClient();/添加下载完 成后的处理 事件wb.DownloadStringCompleted+=newDownloadStringCompletedEventHandler(wb_DownloadStringCompleted);/开始异步下 载wb.DownloadStringAsync(new Uri(“http:/ UriKind.Absolute);在这里敲 wb.DownloadStringCompleted 的时候，后面的+= ，然后是 tab ,tab,编译器就能帮助你自动生成处理函数。如下：void wb_DownloadStringCompleted(objec

21、t sender, DownloadStringCompletedEventArgs e)throw new NotImplementedException();现在要在下载完成的事件里做 json 数据处理并且赋值给控件。Json 数据处理我用 的是 Jobject 类，这个类使用起来很方便。其他的也做过尝试，但是由于要处理的数据的复杂性，使用起来相当麻烦。要用到 JObject这类要到 http:/ 的 dll。下载最新版，完成后，解压，现在就添加DLL 到工程里面。具体操作如下：工程-右键- 添加引用- 浏览，找到刚才解压的目录，并且到 BinWindowsPhone 下- 选择哪个 d

22、ll 文件-确定在 MainPage.xaml.cs 中引入 命名空间using Newtonsoft.Json;using Newtonsoft.Json.Linq;并且为 MainPage 类添加两个城员变量。WeatherInfo weather = null;/定义星期属 性，以便能得出 后面的日期string weekMsg = “星期一“, “星期二“, “星期三“, “星期四“, “星期五“, “星期六“, “星期日“ ;然后给下载完成函数添加如下代码：void wb_DownloadStringCompleted(object sender, DownloadStringCom

23、pletedEventArgs e)if (e.Result.Length / 下载完成后 的处理事件/ / / void wb_DownloadStringCompleted(object sender, DownloadStringCompletedEventArgs e)/判断是否下 载成功if (e.Result.Length / 更新 UI 信 息/ void UpdateUI()day1.Temp = weather.temp2;day2.Temp = weather.temp3;day3.Temp = weather.temp4;day4.Temp = weather.temp5

24、;todaytemp.Text = weather.temp1;todayWhe.Text = weather.weather1 + Environment.NewLine + weather.wind1;todaydate.Text = weather.date_y + Environment.NewLine + weather.week;wtInfo.Text = weather.info;PageTitle.Text = weather.city;int i;for (i = 0; i / 返回天气图 片的 Uri。图片的 Building 属性为 Resource/ / / Strin

25、g GetImgUri(string weather)string uri = “/WeatherForecast;component/Images/“;if (weather = “晴“)return uri + “sunday.jpg“;else if (weather = “阴“)return uri + “overcast.jpg“;else if (weather = “雷阵雨“)return uri + “ThunderShower.jpg“;else if (weather.Contains(“多云“)return uri + “cloudy.jpg“;else if (weat

26、her.Contains(“雨“)return uri + “Rain.jpg“;elsereturn uri + “cloudy.jpg“;点击运行：好了。这节就到这 了。如果有任何 问题，就留言吧。 这节代码下 载：http:/ （四）手把手教你写天气预报程序：本地数据库SQL CE，XML 数据解析Windows Phone的本地数据库 SQL Server CE 是7.1版本即芒果更新的新特性，所以你要在应用程序中使用 SQL Server CE 数据库必须使用 Windows Phone 7.1的 API才行 。这个数据库是用 Linq 来执行查询等操作。我们现在用数据库来保存城市的数据，包括所属省份，城市名称，城市代码。在程序中我们只做了简单的插入和查询，需要详细的数据库操作可以参考 http:/ 或者 MSDN。现在回到工程上，先创建一个数据表，CityInfoTable.在工程上右键-添加-类。命名为 CityInfoTable.cs ，接着添加引用。工程-右键-添加引用。找到 System.Data.Linq.点击确定。