window phone7.1 天气预报教程(二)WebClient获取天气和json数据解析显示

　　上一节，我们已经把显示后四天天气的usercontrol做完了．今天我们来做一点更有意思的，就是把天气真实的显示出来，这里面要用到的知识点是webClient和json这二点．

　　好了，开始，我们先把mainpage.xaml页面的样式简单修改一下．

　　代码如下：(这里我用的是测试页面－Page1.xaml）大家不要直接全页复制

　　

<phone:PhoneApplicationPage 
    x:Class="WeatherForecast.Page1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:my="clr-namespace:WeatherForecast"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    mc:Ignorable="d" d:DesignHeight="768" d:DesignWidth="480"
    shell:SystemTray.IsVisible="True">

    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent" Loaded="LayoutRoot_Loaded">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="240*" />
            <ColumnDefinition Width="240*" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!--TitlePanel contains the name of the application and page title-->
        <StackPanel x:Name="TitlePanel" Margin="12,17,0,28" Grid.ColumnSpan="2">

            <TextBlock x:Name="PageTitle" Text="" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>

        <!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"  Grid.ColumnSpan="2">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="226*" />
                <ColumnDefinition Width="230*" />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="162*" />
                <RowDefinition Height="104*" />
                <RowDefinition Height="112*" />
                <RowDefinition Height="116*" />
                <RowDefinition Height="113*" />
            </Grid.RowDefinitions>

            <my:ForecastTemplate x:Name="day1" Grid.Column="1" Grid.Row="1" Height="100" Width="230" Weekday="" Temp="" imageUrl=""></my:ForecastTemplate>
            <my:ForecastTemplate x:Name="day2" Grid.Column="1" Grid.Row="2" Height="100" Weekday="" Temp="" imageUrl="" ></my:ForecastTemplate>
            <my:ForecastTemplate x:Name="day3" Grid.Column="1" Grid.Row="3" Height="101" Width="230" Weekday="" Temp="" imageUrl="" ></my:ForecastTemplate>
            <my:ForecastTemplate x:Name="day4" Grid.Column="1" Grid.Row="4" Height="101" Width="230" Weekday="" Temp="" imageUrl="" ></my:ForecastTemplate>
            <Image x:Name="todayImage" Height="150" Width="225"></Image>
            <TextBlock x:Name="todaytemp" Text="" Grid.Column="0" Grid.Row="1" Width="225" Height="100" HorizontalAlignment="Left" VerticalAlignment="Center" FontSize="40"></TextBlock>
            <TextBlock x:Name="todaywhe"  Grid.Column="1" Grid.Row="0" Width="230" Height="150" HorizontalAlignment="Left" VerticalAlignment="Center" FontSize="24" TextWrapping="Wrap" Text=""></TextBlock>
            <TextBlock x:Name="todaydate" Text="" Grid.Column="0" Grid.Row="2" Width="225" Height="100" HorizontalAlignment="Left" VerticalAlignment="Center" FontSize="24" TextWrapping="Wrap"></TextBlock>
            <TextBlock x:Name="wtInfo"  Grid.Column="0" Grid.Row="3" TextWrapping="Wrap" Grid.RowSpan="2" FontSize="24"></TextBlock>
        </Grid>
    </Grid>
 
    <!--Sample code showing usage of ApplicationBar-->
    <!--<phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
            <shell:ApplicationBarIconButton IconUri="/Images/appbar_button1.png" Text="Button 1"/>
            <shell:ApplicationBarIconButton IconUri="/Images/appbar_button2.png" Text="Button 2"/>
            <shell:ApplicationBar.MenuItems>
                <shell:ApplicationBarMenuItem Text="MenuItem 1"/>
                <shell:ApplicationBarMenuItem Text="MenuItem 2"/>
            </shell:ApplicationBar.MenuItems>
        </shell:ApplicationBar>
    </phone:PhoneApplicationPage.ApplicationBar>-->

</phone:PhoneApplicationPage>

页面设计比较简单的，　没有什么好多说的，这里只有一点就是我在

<Grid x:Name="LayoutRoot" Background="Transparent" Loaded="LayoutRoot_Loaded">

加了一个loaded事件，就是在页面加载的时候，要实现的事件．

下面我们来看一下后台的代码

这里面，要先说一下前面提到的二个知识点：

１，webClient：提供向 URI 标识的资源发送数据和从 URI 标识的资源接收数据的公共方法。

　　这里呢，我们用到的就是从ＵＲＩ标识的资源接收数据．

２，json：什么时候用到呢，就是把从webClient取来的数据进行解析，因为得到的数据是json形式的，

　　我们要用到一个json的dll文件，大家可以到　http://json.codeplex.com/　去下，然后加载进项目

　　这里的天气情况我是从中央气象台的ＡＰＩ中提取的，它返回的值就是json值，我们看一下

　　

{"weatherinfo":{"city":"哈尔滨","city_en":"haerbin","date_y":"2012年7月6日","date":"","week":"星期五","fchh":"11","cityid":"101050101",
"temp1":"31℃~20℃","temp2":"32℃~22℃","temp3":"33℃~23℃","temp4":"33℃~22℃","temp5":"31℃~22℃","temp6":"30℃~21℃",
"tempF1":"87.8℉~68℉","tempF2":"89.6℉~71.6℉","tempF3":"91.4℉~73.4℉","tempF4":"91.4℉~71.6℉","tempF5":"87.8℉~71.6℉",
"tempF6":"86℉~69.8℉","weather1":"晴","weather2":"晴","weather3":"多云","weather4":"晴转多云","weather5":"多云",
"weather6":"多云转晴","img1":"0","img2":"99","img3":"0","img4":"99","img5":"1","img6":"99","img7":"0","img8":"1",
"img9":"1","img10":"99","img11":"1","img12":"0","img_single":"0","img_title1":"晴","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":"南风3-4级转小于3级",
"wind2":"南风3-4级转西南风小于3级","wind3":"西南风3-4级转小于3级","wind4":"南风3-4级转小于3级","wind5":"东南风3-4级转小于3级",
"wind6":"东南风3-4级转小于3级","fx1":"南风","fx2":"南风","fl1":"3-4级转小于3级","fl2":"3-4级转小于3级","fl3":"3-4级转小于3级",
"fl4":"3-4级转小于3级","fl5":"3-4级转小于3级","fl6":"3-4级转小于3级","index":"炎热","index_d":"天气炎热，建议着短衫、短裙、短裤、
薄型T恤衫、敞领短袖棉衫等清凉夏季服装。","index48":"炎热","index48_d":"天气炎热，建议着短衫、短裙、短裤、薄型T恤衫、
敞领短袖棉衫等清凉夏季服装。","index_uv":"很强","index48_uv":"很强","index_xc":"适宜","index_tr":"适宜","index_co":"较不舒适","st1":"29",
"st2":"21","st3":"30","st4":"23","st5":"32","st6":"23","index_cl":"较适宜","index_ls":"极适宜","index_ag":"不易发"}}

这里简单做一下解释

city:城市名

city_en:城市的英文名

date_y:日期

week:星期

cityid:城市的代码

temp1:当天的温度　temp2不是第二天的，以此类推

weather1:当天天气

wind1:当天风向

index48_d:着装提示．

为了能够显示这些数据，我们需求加一个类文件用来存取这些数据，以便读取和赋值

WeatherInfo.cs

using System;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace WeatherForecast
{
    public class WeatherInfo
    {
        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 string temp6 { get; set; }
        public string 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 weather6 { get; set; }
        public string wind1 { get; set; }
        public string wind2 { get; set; }
        public string wind3 { get; set; }
        public string wind4 { get; set; }
        public string wind5 { get; set; }
        public string wind6 { get; set; }
        public string info { get; set; }
    }
}

好准备工作完事了．我们开始我们的后台编码：

第一步，我们要先进行加载中央气象局的数据，我写了一个方法：

/// <summary>
        /// 加载远程中央气象局数据
        /// </summary>
        public void webclient(string cityid)
        {
            WebClient wc = new WebClient();
            wc.DownloadStringCompleted += new DownloadStringCompletedEventHandler(wc_DownloadStringCompleted);
            wc.DownloadStringAsync(new Uri("http://m.weather.com.cn/data/" + cityid, UriKind.Absolute));
        }

这里说一下，这里的webClient 取数据是异步进行的．我相信大家看到这个wc.DownloadStringArync也就明了．

第二步：这里我们还要实现wc.DownloadStringCompleted这个方法，wc.DownloadStringCompleted这个方法是在异步获取完数据之后执行的．在这个方法里，我们就要把获取的天气数据读出来

/// <summary>
        /// 异步加载完成后，向气象类写数据
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        public void wc_DownloadStringCompleted(object sender, DownloadStringCompletedEventArgs e)
        {
            try
            {
                if (e.Result.Length < 1 || e.Error != null || e.Cancelled)
                {
                    MessageBox.Show("天气预报数据加载失败！原因：" + e.Error.Message);
                    return;
                }

                JObject json = JObject.Parse(e.Result);
                wi = new WeatherInfo
                {
                    city = (string)json["weatherinfo"]["city"],
                    cityid = (string)json["weatherinfo"]["cityid"],
                    date_y = (string)json["weatherinfo"]["date_y"],
                    week = (string)json["weatherinfo"]["week"],
                    info = (string)json["weatherinfo"]["index48_d"],
                    wind1 = (string)json["weatherinfo"]["wind1"],
                    temp1 = (string)json["weatherinfo"]["temp1"],
                    temp2 = (string)json["weatherinfo"]["temp2"],
                    temp3 = (string)json["weatherinfo"]["temp3"],
                    temp4 = (string)json["weatherinfo"]["temp4"],
                    temp5 = (string)json["weatherinfo"]["temp5"],
                    weather1 = (string)json["weatherinfo"]["weather1"],
                    weather2 = (string)json["weatherinfo"]["weather2"],
                    weather3 = (string)json["weatherinfo"]["weather3"],
                    weather4 = (string)json["weatherinfo"]["weather4"],
                    weather5 = (string)json["weatherinfo"]["weather5"]
                };

                
                Update();
            }
            catch (Exception ex)
            {

                MessageBox.Show("连接中央气象局出错！");
                
            }
        }

这里面有一个方法Update()大家一眼就能看出是做什么的，对，它是把得到的数据赋值给前台的控制了．

可是这里有几个问题，我们还是得优先考虑一下，就是图片的显示，这个就需求单独的方法来处理．所以．．．

第三步：图片显示方法　(说实话，天气变化的情况太多了，本人也没有整明白到底有多少，上网查了一下，也没有查全，所以就根据平时自己能遇到的常天气进行了处理)

/// <summary>
        /// 根据天气情况加载图片
        /// </summary>
        /// <param name="weather"></param>
        /// <returns></returns>
        public string Getpic(string weather)
        {
            string uri = "Images/";
            if (weather == "晴")
            {
                uri += "sunday.png";
            }
            else if (weather == "阴")
            {
                uri += "overcast.png";
            }
            else if (weather == "雷阵雨")
            {
                uri += "ThunderShower.png";
            }
            else if (weather.Contains("云"))
            {
                uri += "cloudy.png";
            }
            else if (weather == "雨")
            {
                uri += "Rain.png";
            }
            else if (weather.Contains("雨") && weather != "雨" && weather != "雷阵雨")
            {
                uri += "Rain.png";
            }
            else
            {
                uri += "sunday.png";
            }


            return uri;
        }

第四步：给前台控件赋值

/// <summary>
        /// 将加载之后的数据绑定到前台控件中
        /// </summary>
        public void Update()
        {
            day1.Temp = wi.temp2;
            day2.Temp = wi.temp3;
            day3.Temp = wi.temp4;
            day4.Temp = wi.temp5;

            todaytemp.Text = wi.temp1;
            todaywhe.Text = wi.weather1 + Environment.NewLine + wi.wind1;
            todaydate.Text = wi.date_y + Environment.NewLine + wi.week;
            wtInfo.Text = wi.info;

            this.PageTitle.Text = wi.city;

            int i;
            for (i = 0; i < 7; i++)
            {
                if (weekMsg[i] == wi.week)
                {
                    break;
                }
            }
            day1.Weekday = weekMsg[(i + 1) % 7];
            day2.Weekday = weekMsg[(i + 2) % 7];
            day3.Weekday = weekMsg[(i + 3) % 7];
            day4.Weekday = weekMsg[(i + 4) % 7];

            day1.imageUrl = Getpic(wi.weather2);
            day2.imageUrl = Getpic(wi.weather3);
            day3.imageUrl = Getpic(wi.weather4);
            day4.imageUrl = Getpic(wi.weather5);

            

           

            todayImage.Source = new BitmapImage(new Uri(Getpic(wi.weather1), UriKind.Relative));
        }

写到这里，明眼人一看就知道，你的wi和weeMsg哪来的，哈哈．．．．在前面定义一下吧，同时把第一步中的方法给load．

第四步：开始加载

　

WeatherInfo wi = null;
        string[] weekMsg = { "星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日" };

        public Page1()
        {
            InitializeComponent();
        }

        private void LayoutRoot_Loaded(object sender, RoutedEventArgs e)
        {
            webclient("101050101.html");
        }

现在运行一下看一下效果如何：

哈哈．．．．还不错吧，可是有一点少的是什么呢，背景啊．墨迹天气会根据不同的天气换不同的背景啊．这个我们也可以做一手吗，现在做一个简单的修改

前台：为LayoutRoot这个Grid控件加一个初始化背景

<Grid x:Name="LayoutRoot">
        <Grid.Background>
            <ImageBrush ImageSource="Images/bgsun.png">
            </ImageBrush>
        </Grid.Background>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="240*" />
            <ColumnDefinition Width="240*" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

后台，加一个方法先：

 /// <summary>
        /// 根据天气情况设备背景图片
        /// </summary>
        /// <param name="weather"></param>
        /// <returns></returns>
        public string GetBgpic(string weather)
        {
            string uri = "Images/";
            if (weather == "晴")
            {
                uri += "bgsun.png";
            }
            else if (weather == "阴")
            {
                uri += "bgOvercast.png";
            }
            else if (weather == "雷阵雨")
            {
                uri += "bgThunderShower.png";
            }
            else if (weather.Contains("云"))
            {
                uri += "bgcloudy.png";
            }
            else if (weather.Contains("雪"))
            {
                uri += "bgSnow.png";
            }
            else if (weather.Contains("雨") && weather != "雨" && weather != "雷阵雨")
            {
                uri += "bgrain.png";
            }
            else
            {
                uri += "bgsun.png";
            }


            return uri;
        }

在Upade()方法中加入：

ImageBrush ib = new ImageBrush();
            ib.ImageSource = new BitmapImage(new Uri(GetBgpic(wi.weather1), UriKind.Relative));
            this.LayoutRoot.Background = ib;

再预览一下，什么样了．

是不是爽多了．背景图片，你可以自己去找一些

http://download.csdn.net/detail/chenguang79/4414336

这是所有城市的天气代码．大家可以用一下，