MUI框架开发天气App

一、开发天气App的初衷

我之前为了完成一个简单开发作业，有开发过一款天气App，奈何当时修行不够，涉世未深，开发出来的界面丑哭我了。所以，暑假痛定思痛，努力学习前端知识，经过不懈的努力，开发出了这款功能还算齐全，界面还算好看的天气App。

二、页面展示

三、实现逻辑

采用MVC模式，页面中所有数据挂载均采用ES6写法。首先，通过调用百度地图API获取地理位置信息，然后通过获取的地理位置信息中的城市信息作为参数传给天气API，处理获取到的天气信息。这里，24小时天气信息查询采用css样式实现左右滑动查询效果。空气质量模块采用D3技术将数据可视化，方便用户提取有效信息。

四、关键代码讲解

数据模型

// 地理位置获取、天气信息获取有关的一些数据模型
//与定位有关的数据模型
let positionInfoM = {
	version:'v1.0',
	author:'wmyang',
	province:'',//获取位置信息里的省份信息，包括直辖市、自治区
	city:'',//获取位置信息里的城市信息
	api:'http://api.map.baidu.com/getscript?v2.0&ak=tB2WqgZGsIVlX4M8U32ihD40UMznweVh'
	
}

//与天气有关的数据模型
let weatherInfoM = {
	version:'v1.0',
	author:'wmyang',
	apisite : 'weather.easyapi.com',
	// api : 'https://api.jisuapi.com/weather/query?appkey=e9f609465ea36117&city=',
	api:'https://api.jisuapi.com/weather/query?appkey=0c2d9f64f12fa232&city=',
	icon:{
		晴:"./image/sun.png",
		多云:"./image/cloud.png",
		多云:"./image/cloud.png",
		阴:"./image/yintian.png",
		中雨:"./image/middle-rain.png",
		小雨:"./image/middle-rain.png",
		大雨:"./image/middle-rain.png",
	},
}

获取地理位置信息

//获取地理位置信息逻辑处理
let LBSAction = {
	version:'v1.0',
	author:'wmyang',
	getPositionInfo:function(){
		//通过ip地址获取地理位置信息
		$.getScript(positionInfoM.api,function(){
			console.log("ok");//获取成功打印ok
			//获取地理位置（GEO）信息
			let geo = new BMap.Geolocation();
			console.log(geo)
			geo.getCurrentPosition(function(position){
				//将获取到的省份信息，城市信息传递给数据模型
				positionInfoM.province = position.address.province;
				positionInfoM.city= position.address.city;
				console.log(positionInfoM.province);
				console.log(positionInfoM.city);
				//将数据绑定到页面
				let tepl1 = `<span id="address">${positionInfoM.city}</span>
							<img id="address-img" src="image/address.png" />`;
				
				$("#address-info").html(tepl1);
				weatherAction.getWeatherInfo();
				setTimeout(function(){ pVisual.pVisualGet(); }, 1000);
			})
		})
	}
}

获取天气信息，请求的url采用model模型里写好的url

//获取地理位置信息逻辑处理
let weatherAction = {
	version:'v1.0',
	author:'wmyang',
	getWeatherInfo:function(){
		$.ajax({
			// url : weatherInfoM.api+positionInfoM.city,
			url : weatherInfoM.api+positionInfoM.city,
			dataType:'jsonp',
			success:function(data){
				
				console.log(positionInfoM.city);
				console.log(data);//将获取到的天气信息打印出来
				if(data.msg=="ok"){
					//这里是对获取到的天气信息的处理
				}
			}error:function(){
				console.log("request error")
			}

D3可视化，其中data数组里存放的是绘画饼状图的颜色设置，可自定义

//D3可视化处理空气质量数据
let pVisual = {
	pVisualGet:function(){
		var width = 100,
		    height = 100;
		var dataset = new Array(2);
		console.log(weatherQuality);
		dataset[0] = weatherQuality;
		dataset[1] = 500;
		var svg = d3.select("#population").append("svg")
		        .attr("width",width)
		        .attr("height",height)
		var pie = d3.layout.pie();
		 
		//用做弧线的方法来作饼状图，因为弧线有粗细，调整粗细就能变成饼状图
		var outerRadius = 50,
		    innerRadius =30;
		var arc = d3.svg.arc()
		    .innerRadius(innerRadius)
		    .outerRadius(outerRadius);
		    var data=["#8acef5","#eeeeee"];
		var arcs = svg.selectAll("g")
		    .data(pie(dataset))//通过 D3中提供的d3.layout.pie()函数将它转换成角度。这里5个整数被转换成了5个 Object ，每个里面存有起始角度和结束角度，以及原整数
		    .enter()
		    .append("g")
		    .attr("transform","translate("+outerRadius+","+outerRadius+")");
		 
		arcs.append("path")
		.attr("fill",function(d,i){
		    return data[i];
		})
		.attr("d",function(d){
		    return arc(d); //绘制圆环
		})
		 
		
	}
}

左右滑动查看24小时天气信息

/*hourly是承载24小时天气信息的父容器，hourly-weather是承载每小时天气信息的子容器 */
#hourly{
	height:100px;
	display:flex;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: space-around;
	align-items: flex-start;
	overflow-x: auto;
	overflow-y: hidden;
/* 	background-color: #577e82; */
}

.hourly-weather{
	height:100px;
	width:80px;
	padding:6px;
	margin-top: 5px;
	margin-bottom: 15px;
}

状态栏沉浸式设计

/* 使顶部状态栏透明以达到应用全屏显示的效果，其中背景图片与你设置的应用背景图片一致 */
body{
	 background:url(../image/day_bac.png)no-repeat;   
	 background-size:100% 100%;                  
	 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../image/day_bac.png',sizingMethod='scale');  
}

五、源码资源

源码资源：源码地址