首页 > 代码库 > WP8.1开发:简单的天气预报应用

WP8.1开发:简单的天气预报应用

今天小梦给大家分享一个简单的天气预报应用源码:调用的是百度API.整个应用都没有什么难点.只是一个简单的网络请求和json数据处理.在WP8.1有小娜的情况下,天气预报应用还有意义吗?我认为还是有点意义的,至少数据更详细,而要想要用户喜欢,必须有比小娜更人性化的提醒和精美的UI.UI必须要精美.当然小梦今天分享的UI很简单.大家可以根据自己的想象去处理UI.之所以分享出来,是分享JSON的数据处理.在WP8.1开发XML读取中央气象城市代码文件中,分享了XML文件和JSON数据解析的方法,不过其中是直接处理的JSON数据,今天分享的是利用对象序列化JSON数据.当然,如有不当或错误,欢迎指正.

JSON数据本身:

{    "error": 0,    "status": "success",    "date": "2014-09-13",    "results": [        {            "currentCity": "西安市",            "pm25": "25",            "index": [                {                    "title": "穿衣",                    "zs": "较舒适",                    "tipt": "穿衣指数",                    "des": "建议着薄外套、开衫牛仔衫裤等服装。年老体弱者应适当添加衣物,宜着夹克衫、薄毛衣等。"                },                {                    "title": "洗车",                    "zs": "不宜",                    "tipt": "洗车指数",                    "des": "不宜洗车,未来24小时内有雨,如果在此期间洗车,雨水和路上的泥水可能会再次弄脏您的爱车。"                },                {                    "title": "旅游",                    "zs": "一般",                    "tipt": "旅游指数",                    "des": "温度适宜,有微风同行,但较强降雨的天气将给您的出行带来很多的不便,若坚持旅行建议带上雨具。"                },                {                    "title": "感冒",                    "zs": "较易发",                    "tipt": "感冒指数",                    "des": "天气较凉,较易发生感冒,请适当增加衣服。体质较弱的朋友尤其应该注意防护。"                },                {                    "title": "运动",                    "zs": "较不宜",                    "tipt": "运动指数",                    "des": "有较强降水,建议您选择在室内进行健身休闲运动。"                },                {                    "title": "紫外线强度",                    "zs": "最弱",                    "tipt": "紫外线强度指数",                    "des": "属弱紫外线辐射天气,无需特别防护。若长期在户外,建议涂擦SPF在8-12之间的防晒护肤品。"                }            ],            "weather_data": [                {                    "date": "周六 09月13日 (实时:16℃)",                    "dayPictureUrl": "http://api.map.baidu.com/images/weather/day/zhongyu.png",                    "nightPictureUrl": "http://api.map.baidu.com/images/weather/night/zhongyu.png",                    "weather": "中雨",                    "wind": "西南风微风",                    "temperature": "15℃"                },                {                    "date": "周日",                    "dayPictureUrl": "http://api.map.baidu.com/images/weather/day/zhongyu.png",                    "nightPictureUrl": "http://api.map.baidu.com/images/weather/night/zhongyu.png",                    "weather": "中雨",                    "wind": "西南风微风",                    "temperature": "18 ~ 15℃"                },                {                    "date": "周一",                    "dayPictureUrl": "http://api.map.baidu.com/images/weather/day/zhongyu.png",                    "nightPictureUrl": "http://api.map.baidu.com/images/weather/night/zhongyu.png",                    "weather": "中雨",                    "wind": "西南风微风",                    "temperature": "19 ~ 15℃"                },                {                    "date": "周二",                    "dayPictureUrl": "http://api.map.baidu.com/images/weather/day/zhongyu.png",                    "nightPictureUrl": "http://api.map.baidu.com/images/weather/night/zhongyu.png",                    "weather": "中雨",                    "wind": "西南风微风",                    "temperature": "17 ~ 15℃"                }            ]        }    ]}

我们根据JSON数据构建对象:(对象名称最好和数据名称保持一致)

 

  public   class WeatherData    {        public int error { get; set; }        public string status { get; set; }        public string date { get; set; }        public List<resultsList> results { get; set; }        public class resultsList         {            public string currentCity{ get; set; }            public string pm25 { get; set; }            public List<indexList> index { get; set; }            public List<weather_dataList> weather_data { get; set; }        }        public struct indexList        {            public string title { get; set; }            public string zs { get; set; }            public string tipt { get; set; }            public string des { get; set; }          }        public struct weather_dataList        {            public string  date { get; set; }            public string weather { get; set; }            public string wind { get; set; }            public string temperature { get; set; }            public Uri dayPictureUrl { get; set; }            public Uri nightPictureUrl { get; set; }          }    }

应用前台代码:

 

<Pivot>            <PivotItem Header="天气" >                <ListView Name="listWeather">                        <ListView.Header >                                 <StackPanel>                           <TextBlock x:Name="textCity" FontSize="30"></TextBlock>                           <TextBlock  x:Name="textPm" FontSize="25"  Foreground="Orange"></TextBlock>                             </StackPanel>                         </ListView.Header>                     <ListView.ItemTemplate  >                        <DataTemplate>                            <Border  Width="360"   BorderThickness="2" BorderBrush="#FF2996AE">                            <StackPanel >                                <TextBlock Text="{Binding date}" FontSize="25"></TextBlock>                                <TextBlock Text="{Binding weather}" FontSize="30"></TextBlock>                                    <StackPanel Orientation="Horizontal">                                    <Image Source="{Binding dayPictureUrl}" Stretch="Uniform"                                        Width="60" Height="60"></Image>                                    <Image Source="{Binding nightPictureUrl}" Stretch="Uniform"                                       Width="60" Height="60"></Image>                                    </StackPanel>                                    <TextBlock Text="{Binding wind}" FontSize="25"></TextBlock>                                <TextBlock Text="{Binding temperature }" FontSize="30"></TextBlock>                            </StackPanel>                            </Border>                        </DataTemplate>                    </ListView.ItemTemplate>                </ListView>            </PivotItem>            <PivotItem Header="指数">                <ListView Name="listIndex">                    <ListView.ItemTemplate  >                        <DataTemplate>                            <Border>                            <StackPanel >                                    <TextBlock Text="{Binding tipt }" FontSize="25" Foreground="#FF2996AE"></TextBlock>                                    <TextBlock Text="{Binding zs}" FontSize="30"  Foreground="Green"></TextBlock>                                 <TextBlock Text="{Binding des }" FontSize="20" TextWrapping="Wrap"></TextBlock>                            </StackPanel>                            </Border>                        </DataTemplate>                    </ListView.ItemTemplate>                </ListView>            </PivotItem>        </Pivot>    </Grid>    <Page.BottomAppBar>        <CommandBar  Background="#FF2996AE">            <AppBarButton Icon="Sync" Label="刷新" Click="AppBarButton_Click"/>        </CommandBar>    </Page.BottomAppBar>

后台处理代码:

 

  public sealed partial class MainPage : Page    {        private string latitude = null;        private string longitude = null;        private string responseText = null;        private HttpClient httpClient;        private HttpResponseMessage response;        private Weather.WeatherData.resultsList weather;        public MainPage()        {            this.InitializeComponent();            this.NavigationCacheMode = NavigationCacheMode.Required;            httpClient = new HttpClient();            var headers = httpClient.DefaultRequestHeaders;//获取每个请求标头的集合            headers.UserAgent.ParseAdd("ie");            headers.UserAgent.ParseAdd("Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; WOW64; Trident/6.0)");        }        protected  async override void OnNavigatedTo(NavigationEventArgs e)        {            Geolocator geolocator = new Geolocator();            geolocator.DesiredAccuracyInMeters = 50;            try            {                Geoposition geoposition = await geolocator.GetGeopositionAsync(                    maximumAge: TimeSpan.FromMinutes(5),                    timeout: TimeSpan.FromSeconds(10));                latitude = geoposition.Coordinate.Point.Position.Latitude.ToString();                longitude = geoposition.Coordinate.Point.Position.Longitude.ToString();            }            catch (UnauthorizedAccessException)            {                        Debug.WriteLine( "无法获取位置信息!");            }         }        private  async void AppBarButton_Click(object sender, RoutedEventArgs e)        {            response = new HttpResponseMessage();            Uri resourceUri;            String Address = "http://api.map.baidu.com/telematics/v3/weather?location="+longitude+","+latitude+"&output=json&ak=你的KEY";            Uri.TryCreate(Address.Trim(), UriKind.Absolute, out resourceUri);            try            {                response = await httpClient.GetAsync(resourceUri);                response.EnsureSuccessStatusCode();                responseText = await response.Content.ReadAsStringAsync();            }            catch (Exception ex)            {                Debug.WriteLine("网络请求失败!" + ex.Message.ToString());             }            DataContractJsonSerializer obj = new DataContractJsonSerializer(typeof(WeatherData));            WeatherData weatherData = obj.ReadObject(new MemoryStream(Encoding.UTF8.GetBytes(responseText))) as WeatherData;            weather = weatherData.results.FirstOrDefault();          listWeather.ItemsSource = weather.weather_data;            listIndex.ItemsSource = weather.index;             textCity.Text = weather.currentCity.ToString();            textPm.Text= "PM2.5:"+weather.pm25.ToString();        }

 

运行效果如下:

 

WP8.1开发:简单天气预报应用 - 编程小梦 - 1WP8.1开发:简单天气预报应用 - 编程小梦 - 2

 

完整源码下载:WP8.1天气预报应用.

 

WP8.1开发:简单的天气预报应用