微信小程序实现天气预报功能(附源码)


Posted in Javascript onDecember 10, 2020

前言

最近在学小程序开发,刚好学到天气预报功能的制作,于是给大家分享下。

效果图

微信小程序实现天气预报功能(附源码) 

微信小程序实现天气预报功能(附源码) 

天气API获取

这里我用的是和风天气的API,打开官网注册或者登陆你的账号

微信小程序实现天气预报功能(附源码)

进入控制台,新建应用

微信小程序实现天气预报功能(附源码)

微信小程序实现天气预报功能(附源码)

这是刚刚我们创建好的应用,点击添加KEY

微信小程序实现天气预报功能(附源码)

选择WebAPI

微信小程序实现天气预报功能(附源码)

这注册好我们的API了

微信小程序实现天气预报功能(附源码)

微信小程序后台域名配置

登陆小程序后台,分别点击开发和开发设置

微信小程序实现天气预报功能(附源码)

点击修改,将我们API的域名添加到request合法域名里面https://free-api.heweather.net

微信小程序实现天气预报功能(附源码)

页面代码

.wxml

<view class="header">
 <view class="top">
 <view class="city">
  {{city}}
 </view>
 <view class="search">
  <input placeholder="输入城市名" bindinput="bindKeyInput" placeholder-style="color:white"></input>
  <view class="bt_search" bindtap="search">
  <icon type="search" size="18" color="white"></icon>
  </view>
 </view>
 </view>

 <view class="center">
 <view class="tmp">
  {{tmp}}°
 </view>
 <image mode="widthFix" class="cond-image" src="https://moyv.top/wechat/images/weather/{{imgsrc}}.png">
 </image>
 </view>
 <view class="bottom">
 <view>{{wind_dir}} {{wind_sc}}级</view>
 <view>湿度 {{hum}}%</view>
 <view>气压 {{pres}}Pa</view>
 </view>
</view>
<view class="container">
 <view class="hourly_title">24小时预报</view>
 <scroll-view scroll-x="true" class="hourly">
 <view class="h_item" wx:for="{{hourly}}" wx:key="index">
  <text class="h_time">{{item.time}}</text>
  <view class="h_img">
  <image mode="widthFix" src="https://moyv.top/wechat/images/weather/{{item.imgsrc}}.png"></image>
  </view>
  <text class="h_tmp">{{item.tmp}}°</text>
  <text class="h_wind_dir">{{item.wind_dir}}</text>
  <text class="h_wind_sc">{{item.wind_sc}}级</text>
 </view>

 </scroll-view>
 <view class="hourly_title">7天预报</view>
 <scroll-view scroll-x="true" class="daily">
 <view class="d_item" wx:for="{{daily_forecast}}" wx:key="index">
  <text class="d_txt">{{item.d_txt}}</text>
  <text class="d_date">{{item.d_date}}</text>
  <view class="h_img">
  <image mode="widthFix" src="https://moyv.top/wechat/images/weather/{{item.imgsrc_d}}.png"></image>
  </view>
  <text class="h_tmp">{{item.tmp_min}}°~{{item.tmp_max}}°</text>
  <view class="h_img">
  <image mode="widthFix" src="https://moyv.top/wechat/images/weather/{{item.imgsrc_n}}.png"></image>
  </view>
  <text class="d_wind_dir">{{item.wind_dir}}</text>
  <text class="d_wind_sc">{{item.wind_sc}}级</text>
 </view>

 </scroll-view>
</view>

<view class="footer">
-天气数据来自和风天气api-
</view>

.wxss

page {
 background-color: #f6f6f6;
}

.header {
 background-color:#64c8fa; 
 /* background-image: linear-gradient(to right, #64a0f8, #64c8fa); */
 height: 450rpx;
 padding-top: 32rpx;
 text-align: center;
}

.top {
 display: flex;
 justify-content: space-between;
 align-content: center;
 align-items: center;
}

.city {
 text-align: center;
 color: white;
 display: inline-block;
 font-size: 52rpx;
 margin-left: 32rpx;
}

.search {
 margin-right: 32rpx;
 border-radius: 8rpx;
 display: inline-flex;
 justify-content: center;
 align-content: center;
 align-items: center;
 background-color: rgba(0, 0, 0, 0.1);
 height: 70rpx;
}

.search input {
 width: 200rpx;
 padding: 18rpx 32rpx;
 text-align: left;
 color: white;
 display: inline-block;
}

.bt_search {
 border-radius: 0 8rpx 8rpx 0;
 height: 100%;
 background-color: rgba(0, 0, 0, 0.1);
 display: inline-flex;
 justify-content: center;
 align-content: center;
 align-items: center;
}

.bt_search icon {
 margin: 8rpx 18rpx;
}

.center {
 display: flex;
 justify-content: space-between;
 align-content: center;
 align-items: center;
}

.tmp {
 margin-left: 18rpx;
 display: inline-block;
 font-size: 180rpx;
 color: white;
}
.cond-image{
 width: 200rpx;
 margin-right: 32rpx;
 margin-top: 32rpx;
}
.bottom{
 display: flex;
 justify-content: space-between;
 align-content: center;
 align-items: center;
}
.bottom view{
 color: white;
 margin: 32rpx;
}

.hourly_title{
 font-weight: bold;
 font-size: 42rpx;
 padding: 18rpx 32rpx;
}
.hourly {
 width: 718rpx;
 margin: 0 18rpx;
 border-radius: 18rpx;
 box-shadow: 0.1rem 0.1rem 0.5rem rgba(0, 0, 0, 0.15);
 white-space: nowrap;
 background-color: white;
}
.h_item {
 margin: 18rpx 0;
 display: inline-block;
 width: 143.5rpx;
 text-align: center;
 font-size: 28rpx;
}

.h_img {
 margin: 64rpx 0;
}

.h_img image {
 width: 60rpx;
}

.h_item text {
 display: block;
}

.h_time {
 color: gray;
}

.h_wind_dir {
 margin-top: 32rpx;
}

.h_wind_sc {
 color: gray;
}

.h_tmp {
 color: #027aff;
}

.daily {
 width: 718rpx;
 white-space: nowrap;
 margin: 0 18rpx;
 background-color: white;
 border-radius: 18rpx;
 box-shadow: 0.1rem 0.1rem 0.5rem rgba(0, 0, 0, 0.15);
}

.d_item {
 
 margin: 18rpx 0;
 display: inline-block;
 width: 179.5rpx;
 text-align: center;
 font-size: 28rpx;
}

.d_item text {
 display: block;
}

.d_date {
 color: gray;
}

.d_wind_dir {
 margin-top: 32rpx;
}

.d_wind_sc {
 color: gray;
}

.footer{
 font-size: 28rpx;
 color: gray;
 text-align: center;
 margin-top: 50rpx;
 margin-bottom: 18rpx;
}

.js

Page({

 /**
 * 页面的初始数据
 */
 data: {
 search_city: '',
 imgsrc:100
 },
 /**
 * 根据城市获取天气预报
 */
 getWeather(city) {
 let that = this
 //获取实况天气
 wx.request({
  url: 'https://free-api.heweather.net/s6/weather/now?key=你后台的key&location=' + city,
  success: function(res) {
  if (res.data.HeWeather6[0].status == 'unknown location') {
   wx.showToast({
   title: '抱歉!没有该城市的天气预报',
   icon: 'none',
   duration: 2000
   })
   return;
  }
  console.log(res)
  that.setData({
   city: city,
   tmp: res.data.HeWeather6[0].now.tmp,
   imgsrc: res.data.HeWeather6[0].now.cond_code,
   wind_dir: res.data.HeWeather6[0].now.wind_dir,
   wind_sc: res.data.HeWeather6[0].now.wind_sc,
   hum: res.data.HeWeather6[0].now.hum,
   pres: res.data.HeWeather6[0].now.pres
  })

  //获取24小时天气预报
  wx.request({
   url: 'https://free-api.heweather.net/s6/weather/hourly?key=你后台的key&location=' + city,
   success: function(res) {
   var arr = res.data.HeWeather6[0].hourly
   var hourly = []
   for (var i = 0; i < arr.length; i++) {
    hourly[i] = {
    "imgsrc": arr[i].cond_code,
    "tmp": arr[i].tmp,
    "time": arr[i].time.substring(11),
    "wind_dir": arr[i].wind_dir,
    "wind_sc": arr[i].wind_sc
    }
   }
   that.setData({
    hourly: hourly
   })

   var weekArray = new Array("周日", "周一", "周二", "周三", "周四", "周五", "周六");
   //获取未来7天天气预报
   wx.request({
    url: 'https://free-api.heweather.net/s6/weather/forecast?key=你后台的key&location=' + city,
    success: function(result) {
    //console.log(result)
    var arr = result.data.HeWeather6[0].daily_forecast
    var daily_forecast = []
    for (var i = 0; i < arr.length; i++) {
     daily_forecast[i] = {
     d_txt: i == 0 ? "今天" : weekArray[new Date(arr[i].date).getDay()],
     d_date: arr[i].date.substring(5),
     imgsrc_d: arr[i].cond_code_d,
     imgsrc_n: arr[i].cond_code_n,
     wind_dir: arr[i].wind_dir,
     wind_sc: arr[i].wind_sc,
     tmp_max: arr[i].tmp_max,
     tmp_min: arr[i].tmp_min,
     cond_txt_d: arr[i].cond_txt_d
     }
    }
    that.setData({
     daily_forecast: daily_forecast
    })
    }
   })

   }
  })

  }
 })
 },
 bindKeyInput(e) {
 this.setData({
  search_city: e.detail.value
 })
 },
 search() {
 this.getWeather(this.data.search_city)
 },
 /**
 * 生命周期函数--监听页面加载
 */
 onLoad: function(options) {
 this.getWeather("广州")
 },
})

.json

{
 "usingComponents": {},
 "navigationBarTitleText": "天气预报"
}

注意问题(必看)

由于我的项目有用到天气预报的逐小时预报7天预报,和风天气又必须实名才能获取到此数据,所以请登录和风天气后台进行实名认证

微信小程序实现天气预报功能(附源码)

到此这篇关于微信小程序实现天气预报功能(附源码)的文章就介绍到这了,更多相关小程序实现天气预报内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
js控制div及网页相关属性的代码
Dec 19 Javascript
javascript引用类型之时间Date和数组Array
Aug 27 Javascript
Node.js的项目构建工具Grunt的安装与配置教程
May 12 Javascript
浅析JS操作DOM的一些常用方法
May 13 Javascript
jQuery使用正则表达式限制文本框只能输入数字
Jun 18 Javascript
监控微信小程序中的慢HTTP请求过程详解
Jul 05 Javascript
django中使用vue.js的要点总结
Jul 07 Javascript
layui-select动态选中值的例子
Sep 23 Javascript
js消除图片小游戏代码
Dec 11 Javascript
基于better-scroll 实现歌词联动功能的代码
May 07 Javascript
Vue列表如何实现滚动到指定位置样式改变效果
May 09 Javascript
JavaScript中数组去重的5种方法
Jul 04 Javascript
微信小程序向Java后台传输参数的方法实现
Dec 10 #Javascript
微信小程序反编译的实现
Dec 10 #Javascript
微信小程序用户登录和登录态维护的实现
Dec 10 #Javascript
关于小程序优化的一些建议(小结)
Dec 10 #Javascript
详解vue-cli项目在IE浏览器打开报错解决方法
Dec 10 #Vue.js
echarts柱状图背景重叠组合而非并列的实现代码
Dec 10 #Javascript
javascript实现放大镜功能
Dec 09 #Javascript
You might like
索尼SONY SRF-S83/84电路分析和打磨
2021/03/02 无线电
PHP 基于文件头的文件类型验证类函数
2012/05/01 PHP
解析PHP中数组元素升序、降序以及重新排序的函数
2013/06/20 PHP
php获取指定(访客)IP所有信息(地址、邮政编码、国家、经纬度等)的方法
2015/07/06 PHP
CI框架实现创建自定义类库的方法
2018/12/25 PHP
Thinkphp5.0框架使用模型Model的获取器、修改器、软删除数据操作示例
2019/10/11 PHP
PHP实现抽奖功能实例代码
2020/06/30 PHP
javascript模拟实现ajax加载框实例
2014/10/15 Javascript
JS跨域问题详解
2014/11/25 Javascript
jQuery及JS实现循环中暂停的方法
2015/02/02 Javascript
AspNet中使用JQuery boxy插件的确认框
2015/05/20 Javascript
jQuery实现的简洁下拉菜单导航效果代码
2015/08/26 Javascript
JS 实现计算器详解及实例代码(一)
2017/01/08 Javascript
JavaScript中清空数组的三种方式
2017/03/22 Javascript
JavaScript中使用参数个数实现重载功能
2017/09/01 Javascript
JavaScript设计模式之调停者模式实例详解
2018/02/03 Javascript
小程序实现多选框功能
2018/10/30 Javascript
JavaScript继承与聚合实例详解
2019/01/22 Javascript
JS实现简单的抽奖转盘效果示例
2019/02/16 Javascript
es6中let和const的使用方法详解
2020/02/24 Javascript
Vue项目接入Paypal实现示例详解
2020/06/04 Javascript
[03:09]2014DOTA2国际邀请赛 Mushi前队友送上祝福
2014/07/12 DOTA
python函数参数*args**kwargs用法实例
2013/12/04 Python
Python实现破解12306图片验证码的方法分析
2017/12/29 Python
python多线程与多进程及其区别详解
2019/08/08 Python
python 表格打印代码实例解析
2019/10/12 Python
python 基于卡方值分箱算法的实现示例
2020/07/17 Python
matplotlib 多个图像共用一个colorbar的实现示例
2020/09/10 Python
python批量修改文件名的示例
2020/09/27 Python
Alexandre Birman美国官网:亚历山大·伯曼
2019/10/30 全球购物
酒店前台接待岗位职责
2015/04/02 职场文书
建房合同协议书
2016/03/21 职场文书
pytorch显存一直变大的解决方案
2021/04/08 Python
vue完美实现el-table列宽自适应
2021/05/08 Vue.js
详解盒子端CSS动画性能提升
2021/05/24 HTML / CSS
青岛市的收音机研制与生产
2022/04/07 无线电