简单的web天气预报界面制作

端午假期期间,江南、华南降雨逐渐减弱,西北、四川盆地、黄淮降雨增多。东北、华北多阵雨或雷阵雨,局地伴有冰雹、短时强降水。江南南部、华南一带气温闷热。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>练习</title>


 

   <link rel="stylesheet" href="css/style.css">

    

 

</head>

<body>

   <h1>炎热!广东雷州半岛局地最高温可达37℃ 有分散性雷阵雨</h1>

   <div class="date">

       2019-07-03 16:31:47 来源:<a href="#">中国天气网</a>

       <input type="text" value="请输入查询条件"> <button id="search">搜索</button>

   </div>

   <hr>

   <p>

    中国天气网讯 今天(25日)开启了端午假期,总体来看,端午假期期间多地雨水在线,

    贵州到江南一带降雨先强后弱,四川盆地、黄淮等地降雨则是假期后段明显增强,

    此外东北、华北等地多阵雨或雷阵雨。气温方面,江南南部、华南一带闷热持续,

    北方多地气温则多波动。

   </p>

 

   <h4>局部有强降雨</h4>

    <p class="tupian">

        <img src="img/天气.jpg" alt="夏至">

    </p>

   <p>

    6月20日以来,贵州、重庆至长江中下游一带经历了入汛以来最强降雨过程,这轮强降雨过程的特点是持续时间长、强度大等。昨天,强降雨还在持续,贵州东南部、广西中部、湖南中南部、江西中北部、安徽东南部、浙江北部和东部、福建西北部及云南西北部等地出现大到暴雨中部、江西中部及贵州黔南州和黔东南州、湖南怀化和长沙等局地大暴雨,广西百色局地特大暴雨(316毫米),广西柳州和百色局地最大小时降雨量104~107毫米;山西中南部、河北、北京南部和西北部等地部分地区降中到大雨,河北承德、石家庄局地暴雨,山西长治局地大暴雨(127毫米)。

   </p>

   <h4>降雨持续增多</h4>

   <p>

    今天,广西、湖南等地部分地区强降雨持续,雨带东段强降雨范围收缩。明后天,江南华南降雨逐渐减弱停歇,但西北地区东部、四川盆地、黄淮等地降雨增多增强。

   </p>

   <p>

    同时,受到冷涡系统影响,端午假期期间,华北、东北部分地区多阵雨或雷阵雨天气,局地还可能会伴有冰雹、短时强降水等强对流天气。

   </p>

  <p>

    具体来看,今天,甘肃南部、河北东部、山东西北部、辽宁东部、广西中东部、湖南南部、广东北部、江西西部和东北部、福建西北部、浙江中西部、上海、云南西部和南部、西藏东南部等地的部分地区有大到暴雨,其中,广西东北部局地有大暴雨(100~150毫米)。

  </p>

  <p class="footer">

    转载请注明“来源:中国天气网” 

  </p>

  

   

 

</body>

</html>

 

 

h1{

    text-align: center;

    font-weight: 400;

}

body{

    font: 16px/28px "microsoft yahei"

 

}

.date {

    color: #888888;

    font-size: 12px;

    text-align: center;

   

}

a {

    text-decoration: none;

}

input {

      color: #666666;

      font-size: 12px;

      width: 170px;

}

.search {

    color: #000;

    font-weight: 700;

    

}

p {

    text-indent: 2em;

}

.tupian {

    text-align: center;

}

.footer {

    color: #888888;

    font-size: 12px;

}

 

 

 

   

 

 

 

 

 

### 使用HBuilder开发天气预报应用程序 #### 选择技术栈 对于构建天气预报应用程序,可以选择多种编程语言和技术栈。如果决定采用Java作为服务器端语言,则可以使用Jdk1.8配合Tomcat7.0来搭建后台服务环境[^2];而Python爱好者则可选用Pychram社区版加上python3.7.7以及Django框架进行后端逻辑处理[^3]。 然而,在此场景下更推荐利用uni-app框架来进行跨平台的应用程序开发工作。通过uni-app不仅可以快速创建适用于iOS和Android设备上的原生移动应用,还能轻松扩展至微信小程序等多个终端上运行[^1]。 #### 准备工具与环境设置 为了顺利开展项目,请先安装好必要的软件包: - **IDE**: 安装最新版本的[HBuilderX](https://www.dcloud.io/hbuilderx.html),这是由DCloud官方推出的集成开发环境,专为HTML5/WebApp/Hybrid App/Weex/DCloud云开发打造。 - **前端依赖管理器**: Node.js及其自带的npm(Node Package Manager),用于管理和下载所需的JavaScript库和其他资源文件。 - **数据库管理系统 (DBMS)**: MySQL是一个不错的选择,它能够有效地存储来自不同API接口获取到的城市气象数据记录等信息。 #### 创建新工程并初始化页面结构 启动HBuilderX之后,按照提示新建一个基于Vue模板的uni-app工程项目。接着定义首页布局样式,通常会包含输入框让用户查询特定地区的实时气温状况,还有展示预测图表等功能模块。 ```html <template> <view class="container"> <!-- 城市搜索栏 --> <input type="text" v-model="cityName" placeholder="请输入城市名称"/> <!-- 显示当前温度 --> <p>今日最高温:{{ maxTemp }}°C</p> <p>今日最低温:{{ minTemp }}°C</p> <!-- 更多功能组件... --> </view> </template> <script> export default { data() { return { cityName: &#39;&#39;, maxTemp: null, minTemp: null } }, } </script> ``` #### 获取第三方API访问权限 大多数情况下,开发者会选择调用公开提供的RESTful API接口来取得最新的天气更新情报。例如OpenWeatherMap提供了免费的基础套餐供个人学习研究之用。注册账号后即可获得专属密钥(API key),将其保存于`.env`配置文件内以便后续请求时验证身份合法性。 ```javascript // main.js 或者 utils/request.js 中封装axios实例 import axios from &#39;axios&#39;; const service = axios.create({ baseURL: "http://api.openweathermap.org/data/2.5/", // 替换成实际使用的API地址前缀 }); service.interceptors.request.use( config => { const token = process.env.VUE_APP_API_KEY; if(token){ config.params = {...config.params, appid:token}; } return config; }, error => Promise.reject(error)); export { service }; ``` #### 实现业务逻辑交互 当用户提交表单后触发事件处理器函数,向远程服务器发起GET方法的数据抓取操作,并解析返回JSON对象中的关键字段填充视图层变量值。 ```javascript methods:{ async fetchWeatherData(){ try{ let response = await this.$service.get(&#39;weather&#39;, { params:{q:this.cityName} }); console.log(response.data); // 更新data属性显示具体数值 this.maxTemp=response.data.main.temp_max - 273.15; //- 转换K->℃ this.minTemp=response.data.main.temp_min - 273.15; }catch(err){ alert(`Error fetching weather data:${err.message}`); } } } ``` #### 测试优化发布上线 完成上述编码环节后,务必进行全面的功能性检测确保各项特性都能正常运作无误。考虑到用户体验感方面的因素,建议针对网络延迟情况做适当预加载动画效果或者错误重试机制等方面的改进措施。最后打包成APK/IPA等形式分发给目标受众群体体验。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值