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


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 相关文章推荐
使两个iframe的高度与内容自适应,且相等
Nov 20 Javascript
EXTJS内使用ACTIVEX控件引起崩溃问题的解决方法
Mar 31 Javascript
一些有用的JavaScript和jQuery的片段分享
Aug 23 Javascript
JS制作手机端自适应缩放显示
Jun 11 Javascript
JQuery PHP图片在线裁剪实例
Jul 27 Javascript
JavaScript 栈的详解及实例代码
Jan 22 Javascript
bootstrap插件treeview实现全选父节点下所有子节点和反选功能
Jul 21 Javascript
javascript 判断用户有没有操作页面
Oct 17 Javascript
JS运动特效之完美运动框架实例分析
Jan 24 Javascript
微信小程序自定义prompt组件步骤详解
Jun 12 Javascript
微信小程序实现通讯录列表展开收起
Nov 18 Javascript
分享一个vue实现的记事本功能案例
Apr 11 Vue.js
微信小程序向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
PHP下对字符串的递增运算代码
2010/08/21 PHP
thinkPHP连接sqlite3数据库的实现方法(附Thinkphp代码生成器下载)
2016/05/27 PHP
网页中的图片的处理方法与代码
2009/11/26 Javascript
Extjs Ext.MessageBox.confirm 确认对话框详解
2010/04/02 Javascript
基于javascript滚动图片具体实现
2013/11/18 Javascript
引入autocomplete组件时JS报未结束字符串常量错误
2014/03/19 Javascript
Jquery给基本控件的取值、赋值示例
2014/05/23 Javascript
将HTML格式的String转化为HTMLElement的实现方法
2014/08/07 Javascript
jQuery判断checkbox是否选中的3种方法
2014/08/12 Javascript
js由下向上不断上升冒气泡效果实例
2015/05/07 Javascript
Backbone.js框架中Model与Collection的使用实例
2016/05/07 Javascript
Bootstrap页面标题Page Header的实现方法
2017/03/22 Javascript
Angular2平滑升级到Angular4的步骤详解
2017/03/29 Javascript
利用jQuery解析获取JSON数据
2017/04/08 jQuery
详解angularjs中的隔离作用域理解以及绑定策略
2017/05/31 Javascript
小程序自定义组件实现城市选择功能
2018/07/18 Javascript
为什么要使用Vuex的介绍
2019/01/19 Javascript
ES6入门教程之Array.from()方法
2019/03/23 Javascript
浅谈JS和jQuery的区别
2019/03/27 jQuery
layui表格数据复选框回显设置方法
2019/09/13 Javascript
解决layer.confirm快速点击会重复触发事件的问题
2019/09/23 Javascript
[01:24]2014DOTA2 TI第二日 YYF表示这届谁赢都有可能
2014/07/11 DOTA
老生常谈Python基础之字符编码
2017/06/14 Python
python dataframe常见操作方法:实现取行、列、切片、统计特征值
2018/06/09 Python
python多个模块py文件的数据共享实例
2019/01/11 Python
Python3多线程基础知识点
2019/02/19 Python
python基于递归解决背包问题详解
2019/07/03 Python
基于python实现的百度新歌榜、热歌榜下载器(附代码)
2019/08/05 Python
python excel转换csv代码实例
2019/08/26 Python
Python使用jupyter notebook查看ipynb文件过程解析
2020/06/02 Python
C#中类(class)与结构(struct)的异同
2013/11/03 面试题
交通事故赔偿协议书范本
2014/04/15 职场文书
学校地质灾害防治方案
2014/06/10 职场文书
党的群众路线对照检查材料
2014/09/22 职场文书
react 项目中引入图片的几种方式
2021/06/02 Javascript
OpenCV-Python 实现两张图片自动拼接成全景图
2021/06/11 Python