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