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天气预报应用.