Dcloud課程9 天氣小助手如何實現

時間 2020-06-01

標籤 dcloud 課程天氣助手如何實現简体版

原文原文鏈接

Dcloud課程9 天氣小助手如何實現

1、總結

一句話總結：調用天氣的接口，若是網上找不到好用的，而若是僅僅是測試，那就本身寫一個簡單的接口就能夠了。

一、dcloud中的css樣式怎麼調？

和網頁中同樣，好比類或者id，而後就在style中寫樣式便可javascript

二、dcloud中的提示代碼的寫法是什麼？

m+什麼的形式，好比mf就是表單，fh就是頁面中的內容中的頭，等等（mb，mt）php

三、dcloud中如何給元素添加事件？

getElement系列獲取元素，而後addEventListener()自定義添加事件css

四、測試的時候若是接口沒找到，怎麼辦（好比笑話接口）？

直接本身用最簡便的方式寫一個就好，就一個php，幾句話（兩三句話）而已，找不到接口的話真的不用死着去找那麼麻煩html

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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。