小程序对接风和天气：

最新推荐文章于 2023-03-25 21:45:14 发布
最新推荐文章于 2023-03-25 21:45:14 发布
阅读量267 收藏 3
点赞数 1
分类专栏： 科技互联网 文章标签： openid 小程序 java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ydd100100/article/details/118944205
版权

小程序对接风和天气：

风和天气申请key，官网https://dev.qweather.com/

注册账号并且升级用户

在这里插入图片描述

创建应用

在这里插入图片描述

产生key

在这里插入图片描述

小程序添加插件

在这里插入图片描述

开发设置添加域名：

在这里插入图片描述

App.添加插件:

"plugins": {
    "myPlugin": {
      "version": "1.0.8",
      "provider": "wx60d306fd175fe556"
    }
  },

Wxml代码

<view class="header-modular" wx:if="{{now}}">
  <image class="bg-wave" src="https://codermoyv.gitee.io/coder-moyv/assets/images/wechat/bg_wave.gif"></image>
  <view class="row">
    <view class="row location-wrap" bindtap="selectLocation">
      <image class="icon" src="/static/icno/aui-icon-location.png"></image>
      <view class="title">{{City}} {{County}}</view>
    </view>

  </view>
  <view class="row">
    <view class="tmp">{{now.temp}}°</view>
    <image class="icon-weather"
      src="https://codermoyv.gitee.io/coder-moyv/assets/images/wechat/weather_custom/{{now.icon}}.png"></image>
  </view>
  <view class="tips-wrap">
    <view class="tips ">{{now.windDir}} {{now.windScale}}级</view>
    <view class="tips ">湿度 {{now.humidity}}%</view>
    <view class="tips ">气压 {{now.pressure}}Pa</view>
  </view>
</view>

<view class="card-modular " wx:if="{{hourly}}">
  <view class="title">24小时预报</view>
  <view class="card-wrap">
    <block wx:for="{{hourly}}" wx:key="index">
      <view class="item hourly">
        <view class="text-gray">{{item.time}}</view>
        <image class="icon"
          src="https://codermoyv.gitee.io/coder-moyv/assets/images/wechat/weather_custom/{{item.icon}}.png"></image>
        <view class="text-primary mb-32">{{item.temp}}°</view>
        <view>{{item.windDir}}</view>
        <view class="text-gray">{{item.windScale}}级</view>
      </view>
    </block>
  </view>
</view>

<view class="card-modular" wx:if="{{daily}}">
  <view class="title">7天预报</view>
  <view class="card-wrap">
    <block wx:for="{{daily}}" wx:key="index">
      <view class="item daily">
        <view>{{item.dateToString}}</view>
        <view class="text-gray">{{item.date}}</view>
        <image class="icon"
          src="https://codermoyv.gitee.io/coder-moyv/assets/images/wechat/weather_custom/{{item.iconDay}}.png"></image>
        <view class="text-primary ">{{item.tempMin}}°~{{item.tempMax}}°</view>
        <image class="icon"
          src="https://codermoyv.gitee.io/coder-moyv/assets/images/wechat/weather_custom/{{item.iconNight}}.png">
        </image>
        <view>{{item.windDirDay}}</view>
        <view class="text-gray">{{item.windScaleDay}}级</view>
      </view>
    </block>
  </view>
</view>

wxss代码：

page {
  background-color: linear-gradient(to bottom, #ffffff, #ffffff, #F6F6F6);
  padding-bottom: 60rpx;
}

/* 工具类 */
.row {
  display: flex;
  align-items: center;
}

.mb-32 {
  margin-bottom: 32rpx;
}

/* 页面样式 */
.header-modular {
  height: 400rpx;
  background-color: #64C8FA;
  background: linear-gradient(to bottom, #56CCF2, #2F80ED);
  position: relative;
  padding: 30rpx;
}

.header-modular .bg-wave {
  width: 100vw;
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 120rpx;
  mix-blend-mode: screen;
}

.header-modular .location-wrap {
  color: #ffffff;
  font-weight: bold;
  font-size: 36rpx;
}

.header-modular .location-wrap .icon {
  width: 40rpx;
  height: 40rpx;
  margin-right: 8rpx;
}

.header-modular .tmp {
  font-size: 200rpx;
  /* font-weight: bold; */
  color: #ffffff;
  margin-right: auto;
}

.header-modular .icon-weather {
  width: 200rpx;
  height: 200rpx;
}

.header-modular .tips-wrap {
  display: flex;
  justify-content: space-between;
}

.header-modular .tips {
  font-size: 28rpx;
  opacity: 0.8;
  color: #ffffff;
  flex: 1;
}

.header-modular .tips:nth-child(3) {
  text-align: right;
}

.header-modular .tips:nth-child(2) {
  text-align: center;
}

.card-modular {
  padding: 0 30rpx;
  margin-top: 30rpx;
}

.card-modular>.title {
  font-size: 40rpx;
  font-weight: bold;
  position: relative;
  margin-left: 14rpx;
  margin-bottom: 16rpx;
}

.card-modular>.title::before {
  content: "";
  position: absolute;
  left: -14rpx;
  top: 10rpx;
  bottom: 10rpx;
  width: 8rpx;
  border-radius: 10rpx;
  background-color: #2F80ED;
}

.card-modular .card-wrap {
  width: 690rpx;
  border-radius: 18rpx;
  background-color: #ffffff;
  box-shadow: 0 0 20rpx 0 rgba(0, 0, 0, 0.2);
  overflow-x: auto;
  white-space: nowrap;
}

.card-modular .card-wrap .item {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  font-size: 28rpx;
  padding: 18rpx 0;
}

.card-modular .card-wrap .item.hourly {
  width: 138rpx;
}

.card-modular .card-wrap .item.daily {
  width: 172.5rpx;
}

.card-modular .card-wrap .item .icon {
  width: 60rpx;
  height: 60rpx;
  margin: 64rpx 0;
}

.card-modular .card-wrap .item .text-gray {
  color: gray;
}

.card-modular .card-wrap .item .text-primary {
  color: #2F80ED;
}

js：

const APIKEY = ""; // 填入你申请的KEY
Page({

  /**
   * 页面的初始数据
   */
  data: {

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.getLocation()
  },
  //选择定位
  selectLocation() {
    var that = this
    wx.chooseLocation({
      success(res) {
        //console.log(res)
        that.setData({
          location: res.longitude + "," + res.latitude
        })
        that.getWeather()
        that.getCityByLoaction()
      },
      fail() {
        wx.getLocation({
          type: 'gcj02',
          fail() {
            wx.showModal({
              title: '获取地图位置失败',
              content: '为了给您提供准确的天气预报服务,请在设置中授权【位置信息】',
              success(mRes) {
                if (mRes.confirm) {
                  wx.openSetting({
                    success: function (data) {
                      if (data.authSetting["scope.userLocation"] === true) {
                        that.selectLocation()
                      } else {
                        wx.showToast({
                          title: '授权失败',
                          icon: 'none',
                          duration: 1000
                        })
                      }
                    },
                    fail(err) {
                      console.log(err)
                      wx.showToast({
                        title: '唤起设置页失败，请手动打开',
                        icon: 'none',
                        duration: 1000
                      })
                    }
                  })
                }
              }
            })
          }
        })

      }
    })
  },
  /**
   * 获取定位
   */
  getLocation() {
    var that = this
    wx.getLocation({
      type: 'gcj02',
      success(res) {
        that.setData({
          location: res.longitude + "," + res.latitude
        })
        that.getWeather()
        that.getCityByLoaction()
      },
      fail(err) {
        wx.showModal({
          title: '获取定位信息失败',
          content: '为了给您提供准确的天气预报服务,请在设置中授权【位置信息】',
          success(mRes) {
            if (mRes.confirm) {
              wx.openSetting({
                success: function (data) {
                  if (data.authSetting["scope.userLocation"] === true) {
                    wx.showToast({
                      title: '授权成功',
                      icon: 'success',
                      duration: 1000
                    })
                    that.getLocation()
                  } else {
                    wx.showToast({
                      title: '授权失败',
                      icon: 'none',
                      duration: 1000
                    })
                    that.setData({
                      location: "116.41,39.92"
                    })
                    that.getWeather()
                    that.getCityByLoaction()
                  }
                },
                fail(err) {
                  console.log(err)
                  wx.showToast({
                    title: '唤起设置页失败，请手动打开',
                    icon: 'none',
                    duration: 1000
                  })
                  that.setData({
                    location: "116.41,39.92"
                  })
                  that.getWeather()
                  that.getCityByLoaction()
                }
              })
            } else if (mRes.cancel) {
              that.setData({
                location: "116.41,39.92"
              })
              that.getWeather()
              that.getCityByLoaction()
            }
          }
        })
      }
    })
  },
  /**
   * 根据坐标获取城市信息
   */
  getCityByLoaction() {
    var that = this
    wx.request({
      url: 'https://geoapi.qweather.com/v2/city/lookup?key=' + APIKEY + "&location=" + that.data.location,
      success(result) {
        var res = result.data
        if (res.code == "200") {
          var data = res.location[0]
          that.setData({
            City: data.adm2,
            County: data.name
          })
        } else {
          wx.showToast({
            title: '获取城市信息失败',
            icon: 'none'
          })
        }

      }
    })
  },
  /**
   * 获取天气
   */
  getWeather() {
    var that = this
    wx.showLoading({
      title: '加载中',
    })
    wx.request({
      url: 'https://devapi.qweather.com/v7/weather/now?key=' + APIKEY + "&location=" + that.data.location,
      success(result) {
        var res = result.data
        //console.log(res)
        that.setData({
          now: res.now
        })
      }
    })
    wx.request({
      url: 'https://devapi.qweather.com/v7/weather/24h?key=' + APIKEY + "&location=" + that.data.location,
      success(result) {
        var res = result.data
        //console.log(res)
        res.hourly.forEach(function (item) {
          item.time = that.formatTime(new Date(item.fxTime)).hourly
        })
        that.setData({
          hourly: res.hourly
        })
      }
    })
    wx.request({
      url: 'https://devapi.qweather.com/v7/weather/7d?key=' + APIKEY + "&location=" + that.data.location,
      success(result) {
        var res = result.data
        //console.log(res)
        res.daily.forEach(function (item) {
          item.date = that.formatTime(new Date(item.fxDate)).daily
          item.dateToString = that.formatTime(new Date(item.fxDate)).dailyToString
        })
        that.setData({
          daily: res.daily
        })
        wx.hideLoading()
      }
    })
  },
  // 格式时间
  formatTime(date) {
    const year = date.getFullYear()
    const month = date.getMonth() + 1
    const day = date.getDate()
    const hour = date.getHours()
    const minute = date.getMinutes()
    const second = date.getSeconds()
    const weekArray = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"]
    const isToday = date.setHours(0, 0, 0, 0) == new Date().setHours(0, 0, 0, 0)
    return {
      hourly: [hour, minute].map(this.formatNumber).join(":"),
      daily: [month, day].map(this.formatNumber).join("-"),
      dailyToString: isToday ? "今天" : weekArray[date.getDay()]
    }
  },
  // 补零
  formatNumber(n) {
    n = n.toString()
    return n[1] ? n : '0' + n
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

效果

在这里插入图片描述
大佬勿喷，欢迎提意见建议评论！！！！
借鉴：https://blog.csdn.net/weixin_44042074/article/details/112134044

ydd100100
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信小程序开发--利用和风天气API实现天气预报小程序
小璐子又回来了。。。
04-23 2871
本来是参照《微信小程序开发实战》做一个天气预报小程序的，实际运行的时候提示错误，code 400，参数错误。另外一点不同就是返回的天气数据now.具体变量名称也有变化，书上的now.hum，现在就是humidity，如果不修改，就会导致赋值错误。服务获取：相当于在运行该语句前要先找到城市的LocationID，然后代入该语句就可以了。查阅后才知道，可能书籍出版时间较早，现在的和风获取天气的API出现了一些调整，具体见。region:["江苏省","南京市",'玄武区'],key:"你的key"
微信小程序-天气预报案例之和风天气API-云开发版
xiexikk的博客
01-15 8558
天气预报，在现实生活中是非常常用的，我们平时都可以通过自己的手机上面或网上进行查看天气等等； 这个demo可以应用到许多小程序应用上。 本案例先弄个简约版本的（权限还没审核下来）… 使用到的接口是：和风天气，具体使用自行查阅文档哦。 大概先长这样，后续再进行优化升级； 具体案例可以查阅源码，持续更新ing：小程序天气demo ...
微信小程序天气预报（附源码）
梦之归途的博客
03-23 2万+
简介 这是一个完整的已经线上运行的天气应用小程序，点击可查看源码，可随意 star。也可以扫描下方的小程序码直接体验。 image 新版首页(可根据不同的天气改变背景) image 其他效果图： image image 数据来源 地理编码、天气数据均来自百度地图开放平台。个人开发完全免费，有对应的小程序 sdk，加入即可，但是返回的天气数据较少。 运行前准备......
【微信小程序】使用和风天气接口api（全过程）——获取天气
weixin_60387745的博客
03-25 1万+
【微信小程序】使用和风天气接口api（全过程）——获取天气
微信小程序波浪动态效果和背景色渐变（使用动态图，有手就行，但是流动速度固定波浪数目也固定）
fangyuan__的博客
03-30 3493
目录波浪动态图地址.wxml.wxss完成效果 波浪动态图地址 动态图地址 .wxml <view class="header"> <image class="bg_ware" src="https://moyv.top/wechat/images/bg_wave.gif"></image> </view> .wxss page{ background-color: #fff;/**页面背景色**/ } .header {/**顶部背景**/ p
在为新上岗同事接风宴会上的致辞精选.doc
10-11
在为新上岗同事接风宴会上的致辞精选.doc
微信小程序Canvas的使用
WindyMing的博客
10-11 6411
本期介绍Canvas绘制图片，涉及到如何绘制高清图片丶使用网络图片/本地图片丶日期转化(阴阳历/星期换算)丶图片适配手机型号等。 布局介绍 此处分为4块，上面展示图片，中间展示公众号二维码&amp;amp;amp;日期，下面展示一些文本和公司的logo和名称 wxml页面 &amp;amp;lt;canvas canvas-id=&amp;quot;shareImg&amp;quot; style=&amp;quot;width:{{winWi
微信小程序实现波浪动画效果
摸鱼程序员
04-27 6212
目录注效果图代码.wxml.wxss素材 注 波浪效果的素材来自小程序开源组件库ColorUI 效果图 代码 .wxml <view class="header"> <!-- 代码 --> <image class="bg_ware" src="https://moyv.top/wechat/images/bg_wave.gif"></image...
【微信小程序项目】——十分钟开发网络API·天气查询小程序、天气查询，美观简约，简单易上手
lijingxiaov5的博客
05-16 3492
十分钟开发网络API·天气查询小程序、天气查询，美观简约，简单易上手复习小程序项目的新建过程 掌握配置https域名的方式 使用微信网络请求能力获取天气预报 使用腾讯提供的网络通信API，调用第三方提供的API
微信小程序实现天气预报功能(附源码)
热门推荐
摸鱼程序员
04-05 2万+
目录前言效果图天气API获取微信小程序后台域名配置页面代码注意问题（必看） 前言 最近在学小程序开发,刚好学到天气预报功能的制作,于是给大家分享下。 效果图 天气API获取 这里我用的是和风天气的API，打开官网注册或者登陆你的账号 进入控制台,新建应用 这是刚刚我们创建好的应用，点击添加KEY 选择WebAPI 这注册好我们的API了 微信小程序后台域名配置 登陆小程序后台，...
简易天气查询的微信小程序源码
09-19
自己写的简易的天气预报查询小程序，用的是百度地图定位和百度天气，没有服务端
天气预报小程序
09-14
实现天气预报查询，有天气预报接口，实现天气预报查询，有天气预报接口，
微信小程序实现天气预报功能（支持自动定位）（附源码）
摸鱼程序员
01-03 2万+
目录前言效果图天气API获取微信小程序后台域名配置页面代码注意问题（必看）源码留言 前言 由于和风天气API的更新，之前写的那篇文章 可能会出现版本不兼容的 情况。所以 更新了 这个 使用新版API的 小程序。 效果图   天气API获取 这里我用的是和风天气的API，打开官网注册或者登陆你的账号 进入控制台,选择应用管理,新建应用（应用版本 选择 免费开发版，key的类型 选择 Web API） 创建成功后就可以看到 待会要用到的 key了 微信小程序后台域名配置 登陆小程序后台，分别点击
使用和风天气接口获取天气信息
huaweichenai的博客
11-30 7212
最近项目中使用到了获取天气相关信息，这里我使用了和风天气接口来实现此功能 和风天气接口API：API开发文档 | 和风天气开发平台 一：获取实时天气 1：接口地址 商业版：https://api.qweather.com/v7/weather/now? 开发版：https://devapi.qweather.com/v7/weather/now? 2：请求参数 key：用户认证key location：需要查询地区的经纬度(经度,纬度) 3：返回数据 // 北京实况天气 // 商业版
微信小程序天气预报功能实现(支持自动定位,附源码)
coldriversnow的专栏
08-11 7162
目录由于和风天气API的更新，之前写的可能会出现版本不兼容的 情况。所以 更新了 这个 使用新版API的 小程序。效果图。
微信小程序调用天气信息
m0_59249795的博客
05-03 3356
在微信小程序中调用天气信息，下面是示例代码 wx.request({ url: 'example.php', //仅为示例，并非真实的接口地址 data: { x: '', y: '' }, header: { 'content-type': 'application/json' // 默认值 }, success (res) { console.log(res.data) } }) 以和风天气为例 它可以通过开发文档查看调用很多信息基本上只用
微信小程序 实现天气预报接入
SunNang的博客
08-03 1906
天气预报实现
纯 CSS3 实现波浪效果
汉堡请不要欺负面条
01-30 8797
1.使用linear-gradient来做小波浪线 ①原理: linear-gradient(45deg, red, transparent 45%)  是个渐变 ②.wave{ width: 20rem; height: 8px; background-size: 16px 16px; background-repeat: repeat-x;
微信小程序-小程序天气页面对接和风天气API实例
mengxiwl的博客
11-09 4046
一、前言展示 最近开发小程序发现需要植入一个天气系统，在网上找了好久实例，发现很多都是不太好看的，或者发不出来的也用不了，最后我只能自己动手写出来的一个页面，现在分享出来给大家，希望能给到你们帮助！ 小程序预览 二、前期准备 自己申请微信小程序 需要的接口： 天气接口：和风天气API接口 位置信息：腾讯地图接口 注意：接口需要大家自行去申请，不懂百度都有，这里我就不细说了！ 小程序配置合法域名 https://apis.map.qq.com https://devapi.qweather.
https://codermoyv.gitee.io/coder-moyv/assets/images/wechat/weather_custom/{{item.iconDay}}.png
最新发布
07-25
- *1* [小程序对接风和天气：](https://blog.csdn.net/ydd100100/article/details/118944205)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值