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>
 

Dcloud课程9 天气小助手如何实现的更多相关文章

  1. Dcloud课程8 开心一刻应用如何实现

    Dcloud课程8 开心一刻应用如何实现 一.总结 一句话总结:app就是远程调用接口获得数据,我们在后台要做的,就是写一个个让页面获得接口的数据.这里用的是公共笑话接口. 1.ajax返回给页面的h ...

  2. SCE信号期末复习省流小助手(懒人版)

    XDU-SCE网信院信号期末复习省流小助手(懒人版) 本人根据西安电子科技大学网络与信息安全18年期末考试整理的考点和题型 以下题型代表了信号与系统课程的 精髓 若能掌握以下知识点和题型,80分稳有: ...

  3. 发布代码小助手V2.1发布了——Code2HTML工具

    设计起源: 新浪博客似乎没有插入代码的功能,所以不得不用打空格的方法格式化代码.而且没法显示行号. 描述: 发布代码小助手用python和Tkinter开发,可以在任何常见操作系统上运行.主要用于在不 ...

  4. 书签小助手V1.1发布了

    更新信息: 1.修改了部分BUG;2.添加了一些不错的网站:3.重新设计了添加书签和编辑书签的界面. 安装说明: 类Ubuntu系统: 1.安装Python3解释器和Python3-tk sudo a ...

  5. 环境监测小助手V1.1的Windows版

    环境监测小助手V1.1——可以实时查看空气质量和城市排名 一款跨平台空气质量监测软件 数据来源互联网,请联网使用. 暂不支持效果预览. 下载地址:http://files.cnblogs.com/py ...

  6. Windows版词汇小助手V3.0发布了

    欢迎使用词汇小助手 作者:IT小小龙 电子邮箱:long_python@126.com 个人博客:http://blog.sina.com.cn/buduanqs 一款跨平台词汇查询记忆学习软件. 已 ...

  7. 词汇小助手V3.0发布了——不只是一个查单词的软件

    欢迎使用词汇小助手 作者:IT小小龙 电子邮箱:long_python@126.com 个人博客:http://blog.sina.com.cn/buduanqs 一款跨平台词汇查询记忆学习软件. 已 ...

  8. 生日小助手V4.0——迁移到Python3

    生日小助手V4.0——迁移到Python3 生日小助手V4.0只支持Linux系统,依赖命令行软件lunar Ubuntu系统安装方法:1.安装lunarsudo apt-get install lu ...

  9. DEDECMS-helper小助手扩展

    今天在做DEDE动态调用模板的时候卡住了,后终被强大的互联网解决,记录解决问题的过程,以备后用 可以在/data/helper.inc.php中进行默认小助手初始化的设置,系统默认载入小助手 例如创建 ...

随机推荐

  1. Unity C# 设计模式（五）建造者模式

    定义: 将一个复杂对象的构建与它的表示分离,使得同样的构建过程可以创建不同的表示. 组成部分: 1.Builder:给出一个抽象接口,以规范产品对象的各个组成成分的建造.这个接口规定要实现复杂对象的哪 ...

  2. Android中集成ffmpeg(一)：编译ffmpeg

    方案选择 Android中集成ffmpeg的codec功能无非两种方式: JNI直接调用,主要用于App开发(无权限修改系统底层),如EXOPlayer,JPlayer等. 集成ffmpeg到OMX, ...

  3. 【我们都爱Paul Hegarty】斯坦福IOS8公开课个人笔记35 UITextField文本框

    本话来介绍UIKit框架中的组件UITextField. UItextField(文本框)和Label看起来看像,可是文本框是能够编辑的.在UI中使用文本框要注意.由于在模拟器上面输入文字是能够使用电 ...

  4. POJ 1152 An Easy Problem! （取模运算性质）

    题目链接:POJ 1152 An Easy Problem! 题意:求一个N进制的数R.保证R能被(N-1)整除时最小的N. 第一反应是暴力.N的大小0到62.发现当中将N进制话成10进制时,数据会溢 ...

  5. Nrf51822中设置128bit UUID service

    Nrf51822中设置128bit UUID service uint32_tble_dajia_add_service(ble_dajia_t *p_wechat) { uint32_t err_c ...

  6. Linux能ping通IP，ping不通域名

    今天碰到个问题, 能ping通IP地址, ping不通域名, 一直以为是 DNS解析服务器的问题, 找了半天. 问题不在这里. [root@www postfix]# cat /etc/resolv. ...

  7. Hadoop2.2集群安装配置-Spark集群安装部署

    配置安装Hadoop2.2.0 部署spark 1.0的流程 一.环境描写叙述 本实验在一台Windows7-64下安装Vmware.在Vmware里安装两虚拟机分别例如以下 主机名spark1(19 ...

  8. azkaban(安装配置加实战)

    为什么需要工作流调度系统 一个完整的数据分析系统通常都是由大量任务单元组成:shell 脚本程序,java 程序,mapreduce 程序.hive 脚本等 各任务单元之间存在时间先后及前后依赖关 ...

  9. Coderfroces 862 B . Mahmoud and Ehab and the bipartiteness

     Mahmoud and Ehab and the bipartiteness Mahmoud and Ehab continue their adventures! As everybody in ...

  10. Bit、Byte、kb、KB、MB、KiB、MiB各表示什么意思？

    1.Byte.bit:bit表示:位,是计算机中最小的数据单位.每一位的状态只能是0或1Byte表示:字节,8个二进制位构成1个字节,即1 Byte = 8 bit .1个英文字母或者数字占用1个字节 ...