Dcloud课程9 天气小助手如何实现
一、总结
一句话总结：调用天气的接口，如果网上找不到好用的，而如果仅仅是测试，那就自己写一个简单的接口就可以了。
1、dcloud中的css样式怎么调？
和网页中一样，比如类或者id，然后就在style中写样式即可
2、dcloud中的提示代码的写法是什么？
m+什么的形式，比如mf就是表单，fh就是页面中的内容中的头，等等（mb，mt）
3、dcloud中如何给元素添加事件？
getElement系列获取元素，然后addEventListener()自定义添加事件
4、测试的时候如果接口没找到，怎么办（比如笑话接口）？
直接自己用最简便的方式写一个就好，就一个php，几句话（两三句话）而已，找不到接口的话真的不用死着去找那么麻烦
二、天气小助手如何实现
1、相关知识
2、代码
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet"/>
<script type="text/javascript" charset="utf-8">
mui.init();
mui.plusReady(function(){
submits=document.getElementById('submit');
submits.addEventListener('tap',function(){
city=document.getElementById('city');
if(city.value.length==0){
plus.mui.toast('城市不能为空');
return ;
}else{
mui.openWindow({
url:'weather.html',
id:'weather',
extras:{
// .....//自定义扩展参数，可以用来处理页面间传值
cityname:city.value,
},
})
}
})
});
</script>
<style>
.mui-content{
margin-top:20px;
}
#submit{
font-size: 20px;
height:35px;
line-height: 35px;;
padding:0px;
margin-top: 20px;
}
</style>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<h1 class="mui-title">天气小助手</h1>
</header>
<div class="mui-content">
<form class="mui-input-group">
<div class="mui-input-row">
<label>城市：</label>
<input type="text" id="city" class="mui-input-clear" placeholder="请输入要查询的城市">
</div>
</form>
<button type="button" id="submit" class="mui-btn mui-btn-blue mui-btn-block">按钮</button>
</div>
<nav class="mui-bar mui-bar-tab">
<a class="mui-tab-item mui-active">
<span class="mui-icon mui-icon-home"></span>
<span class="mui-tab-label">首页</span>
</a>
<a class="mui-tab-item">
<span class="mui-icon mui-icon-phone"></span>
<span class="mui-tab-label">电话</span>
</a>
<a class="mui-tab-item">
<span class="mui-icon mui-icon-email"></span>
<span class="mui-tab-label">邮件</span>
</a>
<a class="mui-tab-item">
<span class="mui-icon mui-icon-gear"></span>
<span class="mui-tab-label">设置</span>
</a>
</nav>
</body>
</html>
weather.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet"/>
<script type="text/javascript" charset="UTF-8">
mui.init();
mui.plusReady(function(){
var data=plus.webview.currentWebview();
titles=document.getElementById('title');
titles.innerHTML=data.cityname;
www=document.getElementById('www');
var str='';
mui.ajax('http://api.1-blog.com/biz/bizserver/weather/list.do?more=2&city='+data.cityname,{
data:{ },
dataType:'json',//服务器返回json格式数据
type:'get',//HTTP请求类型
timeout:10000,//超时时间设置为10秒；
success:function(data){
//服务器返回响应，根据响应结果，分析是否登录成功；
if(data.status==00000 && data.detail.length){
var wData=data.detail;
for(var i=0;i<wData.length;i++){
str+='<li class="mui-table-view-cell mui-media"><a href="javascript:;">';
str+='<div class="mui-media-body">';
str+=wData[i].city+wData[i].date;
str+='<p class="mui-ellipsis">白天'+wData[i].day_condition+wData[i].day_wind+wData[i].day_temperature+'</p>';
str+='<p class="mui-ellipsis">黑夜'+wData[i].night_condition+wData[i].night_wind+wData[i].night_temperature+'</p>';
str+='</div></a></li>'
}
www.innerHTML=str;
} },
error:function(xhr,type,errorThrown){
//异常处理；
console.log(type);
}
}); })
</script>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title"><span id="title"></span>天气</h1>
</header>
<div class="mui-content">
<ul class="mui-table-view" id="www"> </ul> </div>
<nav class="mui-bar mui-bar-tab">
<a class="mui-tab-item mui-active">
<span class="mui-icon mui-icon-home"></span>
<span class="mui-tab-label">首页</span>
</a>
<a class="mui-tab-item">
<span class="mui-icon mui-icon-phone"></span>
<span class="mui-tab-label">电话</span>
</a>
<a class="mui-tab-item">
<span class="mui-icon mui-icon-email"></span>
<span class="mui-tab-label">邮件</span>
</a>
<a class="mui-tab-item">
<span class="mui-icon mui-icon-gear"></span>
<span class="mui-tab-label">设置</span>
</a>
</nav> </body>
</html>