扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 精选 >微信小程序天气预报功能怎么实现
  • 700

0
分享到

微信小程序天气预报功能怎么实现

2023-06-30 11:06:17 700人浏览 薄情痞子
摘要

这篇文章主要讲解了“微信小程序天气预报功能怎么实现”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“微信小程序天气预报功能怎么实现”吧！这里我用的是和风天气的api，打开官网注册或者登陆你的账号

这篇文章主要讲解了“微信小程序天气预报功能怎么实现”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“微信小程序天气预报功能怎么实现”吧！

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

进入控制台,选择应用管理,新建应用（应用版本 选择 免费开发版，key的类型 选择 WEB API）

创建成功后就可以看到 待会要用到的 key了

微信小程序后台域名配置
登陆小程序后台，分别点击开发和开发设置

点击修改，将我们要用到的 API的域名添加到request合法域名里面

页面代码
.wxml

<view class="header-modular" wx:if="{{now}}">
    <image class="bg-wave" src="https://file.lsjlt.com/upload/202306/28/bbwlgqxonsy.gif"></image>
    <view class="row">
        <view class="row location-wrap" bindtap="selectLocation">
            <image class="icon" src="/images/icon_location.png"></image>
            <view class="title">{{City}} {{County}}</view>
        </view>

    </view>
    <view class="row">
        <view class="tmp">{{now.temp}}&deg;</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}}&deg;</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}}&deg;~{{item.tempMax}}&deg;</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;
 
  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 () {

  }
})

app.JSON

{
  "pages": [
    "pages/index/index"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "天气预报",
    "navigationBarTextStyle": "black"
  },
  "permission": {
    "scope.userLocation": {
      "desc": "你的位置信息将用于天气预报定位" 
    }
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

注意问题（必看）
为了确保 小程序 可以 正常使用，请先在和风天气 控制台 升级为 个人开发者（ps:该升级需要上传实名信息）。

在js代码中，请将刚刚申请的key 填写进 APIKEY 里面

感谢各位的阅读，以上就是“微信小程序天气预报功能怎么实现”的内容了，经过本文的学习后，相信大家对微信小程序天气预报功能怎么实现这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是编程网，小编将为大家推送更多相关知识点的文章，欢迎关注！

--结束END--

本文标题: 微信小程序天气预报功能怎么实现

本文链接: https://lsjlt.com/news/328490.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • 微信小程序天气预报功能怎么实现
    这篇文章主要讲解了“微信小程序天气预报功能怎么实现”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“微信小程序天气预报功能怎么实现”吧！这里我用的是和风天气的API，打开官网注册或者登陆你的账号...
    99+
    2023-06-30
  • 如何用PHP实现微信小程序的天气预报功能？
    如何用PHP实现微信小程序的天气预报功能？随着微信小程序的流行，越来越多的开发者开始尝试在小程序中添加实用的功能，比如天气预报。在本文中，我们将学习如何使用PHP来实现微信小程序的天气预报功能，并提供代码示例。在开始之前，我们需要确保已经申...
    99+
    2023-10-27
    天气预报 PHP 微信小程序
  • 微信小程序天气预报功能实现(支持自动定位,附源码)
    目录前言天气API获取微信小程序后台域名配置页面代码注意问题（必看）源码总结前言 由于和风天气API的更新，之前写的那篇文章 可能会出现版本不兼容的 情况。所以 更新了 这个 使用新...
    99+
    2024-04-02
  • AJAX怎么实现天气预报功能
    这篇文章主要介绍“AJAX怎么实现天气预报功能”，在日常操作中，相信很多人在AJAX怎么实现天气预报功能问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”AJAX怎么实现天气预报...
    99+
    2024-04-02
  • Vue实现天气预报功能
    本文为大家分享了Vue实现天气预报功能的具体代码，供大家参考，具体内容如下 1、功能描述 在搜索框中输入城市，下方出现今天及未来四天的天气情况。搜索框下面固定了几个城市，点击可以快速...
    99+
    2024-04-02
  • 天气预报小程序开发需要什么功能
    这篇文章主要介绍天气预报小程序开发需要什么功能，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！随着人们生活需求的多样化，很多用户的生活服务中有了更多的服务需求，比如现在的天气预报小程序，可以让用户有更多的层次和丰富的天...
    99+
    2023-06-27
  • 微信小程序实现聊天室功能
    本文通过实例为大家分享了微信小程序实现聊天室的具体代码，供大家参考，具体内容如下 1.实现效果展示 2.room.wxml <view class="container"...
    99+
    2024-04-02
  • 【微信开发】微信小程序实现实时聊天功能
    最近在做一个项目，需要运用到实时聊天功能，分享一下。      分为： 界面如何布局以及细节； 如何实现实时更新； 全部代码展示；         一、界面如何布局以及细节：         1.说到底，聊天界面就是循环一个数组，每一行...
    99+
    2023-09-02
    微信小程序 小程序
  • 怎么利用Java实现天气预报播报功能
    本文小编为大家详细介绍“怎么利用Java实现天气预报播报功能”，内容详细，步骤清晰，细节处理妥当，希望这篇“怎么利用Java实现天气预报播报功能”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。实验代码Weather...
    99+
    2023-07-02
  • 微信小程序实现图片预览功能
    微信小程序是一种轻量级的应用程序，可以在微信中直接使用，具有跨平台、操作方便等优点。在开发过程中，经常会遇到需要实现图片预览功能的需求。本文即将给出一个具体的代码示例，教你如何在微信小程序中实现图片预览功能。首先，我们需要在微信小程序的页面...
    99+
    2023-11-21
    图片预览 微信小程序
  • Angular中怎么实现查询天气预报功能
    本篇文章给大家分享的是有关Angular中怎么实现查询天气预报功能，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。具体代码如下：<!DOC...
    99+
    2024-04-02
  • 利用Java实现天气预报播报功能
    目录实验代码WeatherState.javaWeather.javaWeatherForecast.javaCloudyLittleState.javaCloudyDayState...
    99+
    2024-04-02
  • 怎么用PHP实现抓取天气预报的功能
    这篇文章主要介绍“怎么用PHP实现抓取天气预报的功能”，在日常操作中，相信很多人在怎么用PHP实现抓取天气预报的功能问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”怎么用PHP实现抓取天气预报的功能”的疑惑有所...
    99+
    2023-06-17
  • 微信小程序 | 基于小程序+Java+WebSocket实现实时聊天功能
    一、文章前言 此文主要实现在小程序内聊天对话功能，使用Java作为后端语言进行支持，界面友好，开发简单。 二、开发流程及工具准备 2.1、注册微信公众平台账号。 2.2、下载安装Inte...
    99+
    2023-09-06
    小程序 微信小程序 java
  • Vue实现天气预报小应用
    这是本人在自学vue框架时候所模仿的一个网站，可以查询一些城市的天气情况，大家可以看看： html代码 <!DOCTYPE html> <html lang="...
    99+
    2024-04-02
  • 微信小程序怎么实现翻牌小功能
    本篇内容介绍了“微信小程序怎么实现翻牌小功能”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！页面<view id="...
    99+
    2023-06-30
  • 微信小程序怎么实现遮罩功能
    本文小编为大家详细介绍“微信小程序怎么实现遮罩功能  ”，内容详细，步骤清晰，细节处理妥当，希望这篇“微信小程序怎么实现遮罩功能  ”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。微信小程序实现...
    99+
    2023-06-26
  • 微信小程序怎么实现答题功能
    本篇内容主要讲解“微信小程序怎么实现答题功能”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“微信小程序怎么实现答题功能”吧!效果：view<view class="top...
    99+
    2023-07-02
  • 微信小程序支付功能怎么实现
    实现微信小程序支付功能，需要以下步骤：1. 首先，在微信公众平台申请开通支付功能，并获取到支付相关的配置信息，包括 appID、商户...
    99+
    2023-08-16
    微信小程序
  • 微信小程序怎么实现评论功能
    要实现评论功能，您可以参考以下步骤： 在小程序中创建一个评论的输入框和提交按钮，让用户可以输入评论内容并提交。 将用户输入的...
    99+
    2024-04-09
    微信小程序
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作