1. Toy模板网首页
  2. > Toy博客

微信小程序基于和风天气的天气预报（自动和手动定位）

9月前 作者：小东七七 分类：Toy博客 阅读(41) 违法举报

这篇具有很好参考价值的文章主要介绍了微信小程序基于和风天气的天气预报（自动和手动定位）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

目录

       前言

    效果图

          和风天气API获取

                 微信小程序后台配置域名

            选择城市弹窗

      页面代码

注意事项（谨记）

前言

最近在开发小程序，将自己写的分享给大家,希望能帮助到你们！

效果图

微信小程序和风天气,微信小程序,小程序,微信微信小程序和风天气,微信小程序,小程序,微信

微信小程序和风天气,微信小程序,小程序,微信 微信小程序和风天气,微信小程序,小程序,微信

和风天气API获取

网址链接：dev.qweather.com

我用的是和风天气的API，打开该网址注册或登陆你的账号微信小程序和风天气,微信小程序,小程序,微信

点击进入开发服务平台，进入我们的控制台管理界面

微信小程序和风天气,微信小程序,小程序,微信

点击项目管理，并且创建属于我们自己的KEY（我们选择免费订阅，并选择 Web API）

创建成功之后我们就可以看到 等会要用到的Key了（这个是关键）

微信小程序和风天气,微信小程序,小程序,微信

微信小程序后台配置域名

登录小程序后台，点击开发设置

微信小程序和风天气,微信小程序,小程序,微信

点击服务器域名 点击修改 将我们要用到的API的域名添加到request合法域名中 ，https://devapi.qweather.com和 https://geoapi.qweather.com

微信小程序和风天气,微信小程序,小程序,微信

选择城市弹窗

网址链接：Vant Weapp (gitee.io)

我用的是Vant Weapp打开该网址后点击Popup弹出层微信小程序和风天气,微信小程序,小程序,微信

我们可以看到在引入中写着在app.json或index.json中引入组件

微信小程序和风天气,微信小程序,小程序,微信

我们将代码复制到你的json文件中

微信小程序和风天气,微信小程序,小程序,微信

将基本用法复制到你的WXML的文件中，并将红圈部分复制到你的JS文件中，然后根据你需要从哪边弹出进行top（顶部）、bottom（底部）、left（左侧）、right（右侧）的选择

微信小程序和风天气,微信小程序,小程序,微信

 微信小程序和风天气,微信小程序,小程序,微信

页面代码

页面核心

.WXML

<image class="bg-wave" src="/pages/images/bg_wave.gif"></image>
  <view class="top">
    <view class="city" bindtap="showPopup">
      <image class="icon" src="/pages/images/定位.png" bindtap="showPopup"></image>
      <text class="city" bindtap="showPopup">{{shi}}-{{xian}}</text>
    </view>
<view class="hourly_title">24小时预报</view>
  <scroll-view scroll-x="true" class="hourly">
    <view class="hourly_item" wx:for="{{hourly}}" wx:key="index">
      <text class="hourly_time">{{item.time}}</text>
      <text class="h_time">{{item.text}}</text>
      <view class="hourly_img">
        <image mode="widthFix" src="/pages/images/128/{{item.pice}}.png"></image>
      </view>
      <text class="hourly_tmp">{{item.tmp}}°</text>
      <text class="hourly_wind_dir">{{item.wind_dir}}</text>
      <text class="hourly_wind_sc">{{item.wind_sc}}级</text>
    </view>
  </scroll-view>
​
  <view class="hourly_title">7天预报</view>
  <scroll-view scroll-x="true" class="daily">
    <view class="daily_item" wx:for="{{daily}}" wx:key="index">
      <text class="daily_txt">{{item.d_txt}}</text>
      <text class="daily_date">{{item.d_date}}</text>
      <text class="d_date">{{item.d_text}}</text>
      <view class="hourly_img">
        <image mode="widthFix" src="/pages/images/128/{{item.piced}}.png"></image>
      </view>
      <text class="hourly_tmp">{{item.tmp_min}}°~{{item.tmp_max}}°</text>
      <view class="hourly_img">
        <image mode="widthFix" src="/pages/images/128/{{item.picen}}.png"></image>
      </view>
      <text class="d_wind_dir">{{item.n_text}}</text>
      <text class="daily_wind_dir">{{item.wind_dir}}</text>
      <text class="daily_wind_sc">{{item.wind_sc}}级</text>
    </view>
  </scroll-view>
//查询功能

<van-popup show="{{show}}" round position="bottom" custom-style="height: 70%" bind:close="onClose">
  <view class="search-box">
    <icon type="search" size="18" color="#0081ff" bindtap="search"></icon>
    <input bindinput="bindKeyInput" placeholder="请输入城市名"></input>
    <view class="chaxun" bindtap="search" wx:if="{{search_city}}">查询</view>
  </view>
  <view class="result-box">
    <scroll-view scroll-y="true" data-cityid="{{item.city_id}}" class="result-item" bindtap="onclick" wx:for="{{location}}" wx:key="index">
      {{item.xian}}-{{item.shi}}
    </scroll-view>
  </view>
</van-popup>

 .JS

//定位实况天气

getweather: function (e) {
    var that = this;
    //获取地理位置
    wx.getLocation({
      type: 'gcj02',
      success(res) {
        const latitude = res.latitude
        const longitude = res.longitude
        console.log(res.longitude, res.latitude)
        that.setData({
          location: res.longitude + "," + res.latitude
        })
        //获取城市
        wx.request({
          url: 'https://geoapi.qweather.com/v2/city/lookup?key=' + APIKEY + "&location=" + that.data.location,
          success(res) {
            console.log(res.data)
            that.setData({
              shi: res.data.location[0].adm2,
              xian: res.data.location[0].name,
            })
            //获取实况天气
            wx.request({
              url: 'https://devapi.qweather.com/v7/weather/now?key=' + APIKEY + "&location=" + res.data.location[0].id,
              success(res) {
                console.log(res.data)
                that.setData({
                  temp: res.data.now.temp,
                  humi: res.data.now.humidity,
                  tianqi: res.data.now.text,
                  fengxiang: res.data.now.windDir,
                  dengji: res.data.now.windScale,
                  feelsLike:res.data.now.feelsLike,
                  pic: res.data.now.icon,
                  pres: res.data.now.pressure,
                  update: res.data.updateTime.slice(0, 10)
                })
              }
            })
            //获取空气质量
            wx.request({
              url: 'https://devapi.qweather.com/v7/air/now?key=' + APIKEY + "&location=" + res.data.location[0].id,
              success(res) {
                console.log(res.data)
                that.setData({
                  mass:res.data.now.category,
                })
              }
            })
            //获取24小时天气
            wx.request({
              url: 'https://devapi.qweather.com/v7/weather/24h?key=' + APIKEY + "&location=" + res.data.location[0].id,
              success(res) {
                console.log(res.data)
                var arr = res.data.hourly
                var hourly = []
                for (var i = 0; i < arr.length; i++) {
                  hourly[i] = {
                    "pice": arr[i].icon,
                    "tmp": arr[i].temp,
                    "time": arr[i].fxTime.slice(11, 16),
                    "wind_dir": arr[i].windDir,
                    "wind_sc": arr[i].windScale，
                    "text": arr[i].text
                  }
                }
                that.setData({
                  hourly: hourly
                })
              }
            })
            //获取未来7天天气
            var weekArray = new Array("周日", "周一", "周二", "周三", "周四", "周五", "周六");
            wx.request({
              url: 'https://devapi.qweather.com/v7/weather/7d?key=' + APIKEY + "&location=" + res.data.location[0].id,
              success(res) {
                console.log(res.data)
                var arr = res.data.daily
                var daily = []
                for (var i = 0; i < arr.length; i++) {
                  daily[i] = {
                    d_txt: i == 0 ? "今天" : weekArray[new Date(arr[i].fxDate).getDay()],
                    d_date: arr[i].fxDate.slice(5, 10),
                    piced: arr[i].iconDay,
                    picen: arr[i].iconNight,
                    wind_dir: arr[i].windDirDay,
                    wind_sc: arr[i].windScaleDay,
                    tmp_max: arr[i].tempMax,
                    tmp_min: arr[i].tempMin,
                    d_text: arr[i].textDay,
                    n_text: arr[i].textNight,
                  }
                }
                that.setData({
                  daily: daily
                })
              }
            })
          }
        })
      }
    })
  },
​
//选择城市并显示在列表

bindKeyInput(e) {
    this.setData({
      search_city: e.detail.value
    })
    console.log(e.detail.value)
  },
  search(e) {
    var that = this;
    //获取城市
    wx.request({
      url: 'https://geoapi.qweather.com/v2/city/lookup?key=' + APIKEY + "&location=" + this.data.search_city,
      success(res) {
        console.log(res.data)
        var arr = res.data.location
        var location = []
        for (var i = 0; i < arr.length; i++) {
          location[i] = {
            xian: arr[i].name,
            shi: arr[i].adm2,
            city_id: arr[i].id
          }
        }
        that.setData({
          location: location
        })
      }
    })
  },
//点击选择城市并更新ui

nclick(e) {
    var that = this;
    var cityid = e.currentTarget.dataset.cityid;
    console.log(e.currentTarget.dataset.cityid)
    wx.request({
      url: 'https://geoapi.qweather.com/v2/city/lookup?key=' + APIKEY + "&location=" + cityid,
      success(res) {
        console.log(res.data)
        that.setData({
          shi: res.data.location[0].adm2,
          xian: res.data.location[0].name,
        })
      }
    })
    //以下获取天气代码同上
    //...........我就不展示了
    that.setData({
      show: false //自动关闭弹出层
    });
  },

.WXSS 

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

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


.top {
  display: flex;
  justify-content: space-between;
  align-content: center;
  align-items: center;
}
.icon{
  width: 40rpx;
  height: 40rpx;
  margin-right: 8rpx;
}
.city {
  margin-top: 5rpx;
  display: flex;
  align-items: center;
  color: white;
  font-size: 20px;
}

.city image {
  margin-top: 5rpx;
  width: 50rpx;
  height: 50rpx;
}

.search {
  margin-top: 10px;
  margin-left: 50px;
  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: 10px;
}

.hourly_title{
  font-weight: bold;
  font-size: 42rpx;
  padding: 18rpx 32rpx;
  margin-top: 10px;
}
.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;
}
.hourly_item {
  margin: 18rpx 0;
  display: inline-block;
  width: 143.5rpx;
  text-align: center;
  font-size: 28rpx;
}

.hourly_img {
  margin: 64rpx 0;
}

.hourly_img image {
  width: 60rpx;
}

.hourly_item text {
  display: block;
}

.hourly_time {
  color: gray;
}

.hourly_wind_dir {
  margin-top: 32rpx;
}

.hourly_wind_sc {
  color: gray;
}

.hourly_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);
}

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

.daily_item text {
  display: block;
}

.daily_date {
  color: gray;
}

.daily_wind_dir {
  margin-top: 32rpx;
}

.daily_wind_sc {
  color: gray;
}

.footer{
  font-size: 28rpx;
  color: gray;
  text-align: center;
  margin-top: 50rpx;
  margin-bottom: 18rpx;
}
.result-box{
  border-top: gainsboro 1rpx solid;
}
.result-item{
  display: flex;
  padding: 35rpx;
  border-radius: 8rpx;
  font-size: 28rpx;
  border-bottom: gainsboro 1rpx solid;
  background-color: white;
  justify-content: space-between;
  align-items: center;
} 
.search-box{
  margin: 32rpx 32rpx 18rpx 32rpx;
  border-radius: 18rpx;
  box-shadow: 0.1rem 0.1rem 0.5rem rgba(0, 0, 0, 0.15);
  background-color: white;
  display: flex;
  overflow: hidden;
  align-items: center;
}
.search-box input{
  flex: 1;
  padding:18rpx 32rpx;
}
.search-box icon{
  padding: 18rpx 0 18rpx 18rpx;
}
.nav_mya {
  width: 93%;
  height: 170rpx;
  background-color: rgb(255, 255, 255);
  border-radius: 40rpx;
  box-shadow: 0 0 20px rgb(0 0 0 / 20%);
  margin-left: 30rpx;
  margin-right: 30rpx;
  margin-top: 20px;
}
.index_icon{
  height: 10%;
  width: 10%;
  padding-left: 40%;
  margin-top: -120px;
  display: inline-block;
}
.index_f{
  font-weight: bold;
  font-size: 35rpx;
  padding: 10rpx 20rpx;
}
.index_text{
  padding-left: 20px;
  padding-right: 120px;
  display: flex;
  justify-content: space-between;
  color: gray;
  font-size: 25rpx;
}

.index{
  padding-top: 15px;
  margin-left: 40px;
  margin-right: 140px;
  font-size: 25rpx;
  display: flex;
  font-weight:700;
  justify-content: space-between;
}
.end-text{
  display: flex;
  justify-content: center;
  padding-top: 20px;
  padding-bottom: 20px;
  font-weight: 700;
  font-size: 15px;
}
.chaxun{
  margin-right: 10px;
  color: #027aff;
}

注意事项（谨记）

记得将刚刚在和风天气创建的KEY复制到这个里面

微信小程序和风天气,微信小程序,小程序,微信

记得将以下代码添加至您的app.json中

  "permission": {
    "scope.userLocation": {
      "desc": "你的位置信息将用于小程序获取当前位置的天气情况"
    }
  },

欢迎浏览

大家可以进入我的微信小程序看看实际效果和功能,如果有啥问题大家随时在下面留言！

​​​​​​微信小程序和风天气,微信小程序,小程序,微信文章来源地址https://www.toymoban.com/news/detail-679750.html

到了这里，关于微信小程序基于和风天气的天气预报（自动和手动定位）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序 - 简易天气预报

    微信小程序 - 简易天气预报

    预览图：   1：WXML： 2：WXSS： 3：JS: 4：下载地图包： 不了解的可以通过这个链接查看，其中有关于小程序定位的内容，本章也使用到过：微信小程序获取位置信息_微信小程序获取当前位置_鸢与浅忆的博客-CSDN博客  5：app.json: 和page、window同级 该项目使用的接口为nowapi平台提

    2024年02月06日
    浏览(92)
  • 003.0.96‘OLED+合宙ESP32C3+和风天气预报

    003.0.96‘OLED+合宙ESP32C3+和风天气预报

    使用VScode platformio开发 1.oled显示 2.配置WIFI 3.得到B站粉丝数 4.使用json解析获得的粉丝数，显示到OLED 结构体 定义结构体 实例化结构体 WeatherData *data可以理解为 int *data,而*data则是指针，指针就是地址 todaymsg取出存放的数据，todaymsg相当于地址（指针），数据就存在这个地址中，

    2023年04月24日
    浏览(48)
  • 微信小程序实战项目开发（天气预报项目实战）：内涵开发说明文档、需求文档 && 手把手分步骤教你写出自己的小程序项目 && 天气预报小程序 && 时实请求获取天气 && 自定义功能 && 完整的源代码

    微信小程序实战项目开发（天气预报项目实战）：内涵开发说明文档、需求文档 && 手把手分步骤教你写出自己的小程序项目 && 天气预报小程序 && 时实请求获取天气 && 自定义功能 && 完整的源代码

    微信小程序开发实现天气预报 需求分析 静态页面设计 ：要求界面美观 → 在wxss代码文件中对 wxml代码文件进行合理布局和美化，舒适的交互效果. 功能逻辑完善 ：能够使用到 wx.request 请求接口实现天气预报查询的功能 主要使用到的技术栈如下： wxml：中使用了 picker 组件标签

    2024年02月02日
    浏览(67)
  • 【小程序】微信开发者工具+心知天气API实现天气预报

    【小程序】微信开发者工具+心知天气API实现天气预报

    问：为什么使用心知天气的天气数据API而不是其他产品？ 答： 心知天气为我们提供了一款通过标准的Restful API接口进行数据访问的天气数据API产品； 心智天气官网为我们提供了足够详细的开发文档和用户手册，方便我们快速上手进行开发； 心知天气旗下的天气数据API针对不

    2024年01月16日
    浏览(74)
  • Flutter开发微信小程序实战：构建一个简单的天气预报小程序

    Flutter开发微信小程序实战：构建一个简单的天气预报小程序

    微信小程序是一种快速、高效的开发方式，Flutter则是一款强大的跨平台开发框架。结合二者，可以轻松地开发出功能丰富、用户体验良好的微信小程序。 这里将介绍如何使用Flutter开发一个简单的天气预报小程序，并提供相应的代码示例。 在开始之前，确保你已经安装了Fl

    2024年02月12日
    浏览(56)
  • 微信小程序引入和风天气图标库

    微信小程序引入和风天气图标库

    npm导入和风天气的图标库后使用没有效果，就在网上查询了下怎么解决，然后动手尝试一下。 参考文章 1. 下载图标文件(链接)，解压后大致这样 2. 在transfonter网站将需要的图标字体转成Base64，在fontfonts文件下 选择上传 下载 3. 解压后把stylesheet.css复制到小程序的某个文件夹下

    2024年02月04日
    浏览(67)
  • 【微信小程序】使用和风天气接口api（全过程）——获取天气

    【微信小程序】使用和风天气接口api（全过程）——获取天气

    介绍 这里是小编成长之路的历程，也是小编的学习之路。希望和各位大佬们一起成长！ 以下为小编最喜欢的两句话： 要有最朴素的生活和最遥远的梦想，即使明天天寒地冻，山高水远，路远马亡。 一个人为什么要努力？ 我见过最好的答案就是：因为我喜欢的东西都很贵，

    2023年04月08日
    浏览(107)
  • 天气预报小程序的设计与实现

    天气预报小程序的设计与实现

    实验目的 1、 天气预报 项目的设计与实现； 实验环境 个人手机、与因特网连接的计算机网络系统；主机操作系统为Windows或MAC；微信开发者工具、IE等软件。 数据支持： 进制数据天气预报api   腾讯地图逆地址解析：   实验 项目需求 获取用户位置权限 获取当前位置 根据当

    2024年02月10日
    浏览(67)
  • 基于Android的天气预报系统的设计和实现

    基于Android的天气预报系统的设计和实现

    目录 摘要 … 1 需求分析 … 2 一、开发背景… 2 二、项目需求分析… 2 总体设计 … 2 一、系统规划… 2 二、系统功能界面… 3 设置预报城市界面：… 3 2．天气显示界面： … 4 3．Widget 桌面小部件界面：… 5 三．设计目标… 6 系统设计 … 6 一、开发及运行环境… 6 二、数据库

    2024年02月08日
    浏览(62)

  • 面对洪水困境，如何利用Python编写天气预报程序？

    洪水是一种自然灾害，给人们的生活和财产带来极大的威胁。在遭遇洪灾时，及时了解天气预报成为保护自身安全的关键。而如何利用Python编写一个简单但功能强大的天气预报程序，为我们提供准确的天气信息呢？本文将介绍一种方法来实现这一目标。 首先，我们需要安装一

    2024年02月14日
    浏览(38)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包