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

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

预览图:

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

 

一、代码部分

1:WXML:

<!--pages/weather/weather.wxml-->
<view class="father_box">
  <!--上 -->
  <view class="top_box">
    <!-- 背景图片 -->
    <image class="bg-image" mode="widthFix" src="../../images/l.jpg"></image>
    <text class="pm2_5">{{city}}:{{pm2_5}}</text>
    <view class="temperature">{{weatherArray[0].temperature_curr}}</view>
    <view class="weather">{{weatherArray[0].weather}}</view>
    <view class="wind">{{weatherArray[0].wind}}</view>
    <view class="pm2_5_remark">{{pm2_5_remark}}</view>
  </view>
  <!-- 下 -->
  <view class="bottom_box">
    <view class="bottom_box_father">
      <view class="bottom_left">
        <view class="bottom_left_left">
          <view style="margin-bottom: 10rpx;">今天</view>
          <view>{{weatherArray[0].weather}}</view>
        </view>
        <view class="bottom_left_right">
          <view style="margin-bottom: 10rpx;">{{weatherArray[0].temperature}}</view>
          <view><image class="icon" mode="widthFix" src="{{weatherArray[0].weather_icon}}"></image></view>
        </view>
      </view>
      <view style="height: 120rpx;width: 3rpx;background-color: #b9b9b9;"></view>
      <view class="bottom_right">
        <view class="bottom_right_left">
          <view style="margin-bottom: 10rpx;">明天</view>
          <view>{{weatherArray[1].weather}}</view>
        </view>
        <view class="bottom_right_right">
          <view style="margin-bottom: 10rpx;">{{weatherArray[1].temperature}}</view>
          <view><image class="icon" mode="widthFix" src="{{weatherArray[1].weather_icon}}"></image></view>
        </view>
      </view>
    </view>
  </view>
</view>

2:WXSS:

/* pages/weather/weather.wxss */
page{
  height: 100%;
  width: 100%;
}
.bg-image
{ 
  width : 100%;
  position: fixed;  
  z-index: -1;  
}
.father_box{
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}
/* 上 */
.top_box{
  flex: 4;
}
.pm2_5{
  color: white;
  padding: 10rpx;
  margin-left: 20rpx;
  background-color:violet
}
.temperature{
  text-align: center;
  margin-top: 10%;
  color: white;
  font-size:100rpx;
}
.weather{
  text-align: center;
  color: white;
  font-size:40rpx;
  padding-right: 20rpx;
}
.wind{
  text-align: center;
  color: white;
  font-size:40rpx;
}
.pm2_5_remark{
  margin-top: 15%;
  text-align: center;
  color: white;
  font-size:40rpx;
}
/* 下 */
.bottom_box{
  flex: 1;
  background-color:white ;
 
}
.bottom_box_father{
  display: flex;
  height: 100%;
  width: 100%;
  margin-right: 10rpx;
  box-sizing:content-box;
  background-color: white;
  align-items: center;
  justify-content: center;
}
.bottom_left{
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bottom_left_left{
  flex: 1;
  margin-left: 30rpx;
}
.bottom_left_right{
  flex: 1;
}
.bottom_right{
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bottom_right_left{
  flex: 1;
  margin-left: 30rpx;
}
.icon{
  width: 60rpx;
}
.bottom_right_right{
  flex: 1;
}

3:JS:

var QQMapWX = require('../../libs/qqmap-wx-jssdk');    // 百度地图js包文件
Page({
  data: {
    city: "",
    weaid: "",    // 城市气象编号
    // 数据
    pm2_5: "",
    pm2_5_remark: "",
    weatherArray: [{
      temperature: "",
      temperature_curr: "",
      weather: "",
      wind: "",
      weather_icon:""
    }, {
      temperature: "",
      weather: "",
      weather_icon:""
    }
    ],
    pd:[false,false,false]
  },
  onLoad(e) {
    wx.showLoading({
      title: '拼命加载中...',
    })
    this.getLocationInfo()
  },
  // 获取当前城市
  getLocationInfo() {
    let _this = this

    let qqmapsdk = new QQMapWX({
      key: 'NL2BZ-6A46Q-GDY5V-GHTNI-SEL3S-Q6FM5'
    });

    wx.getLocation({
      isHighAccuracy: true,
      type: "gcj02",
      success(res) {
        let { latitude, longitude } = res
        qqmapsdk.reverseGeocoder({
          location: {
            latitude: latitude,
            longitude: longitude
          },
          success: function (res) {
            console.log(res.result)
            let city = res.result.address_component.city
            _this.setData({ city })

            _this.getcityId()
          },
          fail: function (res) {
            console.log(res);
          },
        });
      }
    })
  },
  // 获取城市编号
  getcityId() {
    let _this = this
    wx.request({
      url: 'http://api.k780.com/?app=weather.city&areaType=cn&appkey=10003&sign=b59bc3ef6191eb9f747dd4e83c99f2a4&format=json',
      method: "GET",
      dataType: "json",
      success: (res) => {
        let dtList = res.data.result.dtList
        for (var key in dtList) {
          if (_this.data.city.indexOf(dtList[key].cityNm) != -1) {
            _this.setData({ weaid: dtList[key].weaId })
            break
          }
        }
        _this.SearchCityWeather()
      },
      fail: (result) => {
        wx.showToast({
          title: '获取城市编号失败',
          icon: "error"
        })
      },

    })
  },
  // 获取当前城市的天气指数
  SearchCityWeather() {
    let _this = this
    // 获取今天天气
    wx.request({
      url: 'http://api.k780.com:88/?app=weather.today&weaid=' + _this.data.weaid + '&appkey=10003&sign=b59bc3ef6191eb9f747dd4e83c99f2a4&format=json',
      method: "GET",
      dataType: "json",
      success: (res) => {
        let resultArray = res.data.result
        console.log(resultArray)
        _this.setData({
          'weatherArray[0].temperature': resultArray.temperature,
          'weatherArray[0].temperature_curr': resultArray.temperature_curr,
          'weatherArray[0].weather': resultArray.weather + resultArray.weather_curr,
          'weatherArray[0].wind': resultArray.wind + " " + resultArray.winp
        })
      },
      fail: (result) => {
        wx.showToast({
          title: '获取当前城市天气失败',
          icon: "error"
        })
      },
      complete:()=>{
        _this.setData({'pd[0]':true})
      }
    })
    // 获取pm2.5
    wx.request({
      url: 'http://api.k780.com/?app=weather.pm25&weaId=' + _this.data.weaid + '&appkey=10003&sign=b59bc3ef6191eb9f747dd4e83c99f2a4&format=json',
      method: "GET",
      dataType: "json",
      success: (res) => {
        let resultArray = res.data.result
        console.log(resultArray)
        _this.setData({
          pm2_5: resultArray.aqi_levnm,
          pm2_5_remark: resultArray.aqi_remark
        })
      },
      fail: (result) => {
        wx.showToast({
          title: '获取当前城市天气失败',
          icon: "error"
        })
      },
      complete:()=>{
        _this.setData({'pd[1]':true})
      }
    })
    // 获取未来天气
    wx.request({
      url: 'http://api.k780.com:88/?app=weather.future&weaid='+_this.data.weaid+'&appkey=10003&sign=b59bc3ef6191eb9f747dd4e83c99f2a4&format=json',
      method: "GET",
      dataType: "json",
      success: (res) => {
       let resultArray = res.data.result
       console.log(resultArray)

       _this.setData({
        'weatherArray[0].weather_icon': resultArray[0].weather_icon,
        'weatherArray[1].weather_icon': resultArray[1].weather_icon,
        'weatherArray[1].temperature': resultArray[1].temperature,
        'weatherArray[1].weather': resultArray[1].weather
      })
      },
      fail: (result) => {
        wx.showToast({
          title: '获取未来城市天气失败',
          icon:"error"
        })
      },
      complete:()=>{
        _this.setData({'pd[2]':true})
      }
    })

    let Interval = setInterval(()=>{
      if(_this.data.pd[0] && _this.data.pd[1] &&_this.data.pd[2]){
        wx.hideLoading()
        console.log("关闭")
        clearInterval(Interval)
      }
    },500);
  }
})

4:下载地图包:

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

不了解的可以通过这个链接查看,其中有关于小程序定位的内容,本章也使用到过:微信小程序获取位置信息_微信小程序获取当前位置_鸢与浅忆的博客-CSDN博客

 5:app.json:

和page、window同级

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

二、 接口文档

该项目使用的接口为nowapi平台提供的接口,官方链接:实时天气接口 - 数据接口 - NowAPI

链接中使用的appkey、sign是免费,但每天有一个次数限制,用来做一个简单的项目足够了。

2.1、 获取城市列表

URL:http://api.k780.com/?app=weather.city&areaType=cn&appkey=10003&sign=b59bc3ef6191eb9f747dd4e83c99f2a4&format=json

参数 作用
app 接口 此处应为:weather.city
areaType cn:国内城市 gb:国外城市

 2.2、获取当前城市天气

URL: http://api.k780.com:88/?app=weather.today&weaid=94&appkey=10003&sign=b59bc3ef6191eb9f747dd4e83c99f2a4&format=json

参数 作用
weaid 城市气象编号
appkey 10003

 2.3、获取未来5天城市天气

URL:http://api.k780.com:88/?app=weather.future&weaid=101280601&appkey=10003&sign=b59bc3ef6191eb9f747dd4e83c99f2a4&format=json


欢迎大家在评论区多多交流留言。文章来源地址https://www.toymoban.com/news/detail-461138.html

到了这里,关于微信小程序 - 简易天气预报的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

领支付宝红包 赞助服务器费用

相关文章

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

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

    2024年02月02日
    浏览(60)
  • 微信小程序开发--利用和风天气API实现天气预报小程序

    本来是参照《微信小程序开发实战》做一个天气预报小程序的,实际运行的时候提示错误,code 400,参数错误。说明问题应该出在查询API的语句上,没有返回结果。 查阅后才知道,可能书籍出版时间较早,现在的和风获取天气的API出现了一些调整,具体见实时天气 for API | 和

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

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

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

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

    2024年02月12日
    浏览(52)
  • 天气预报小程序的设计与实现

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

    2024年02月10日
    浏览(64)
  • 面对洪水困境,如何利用Python编写天气预报程序?

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

    2024年02月14日
    浏览(36)
  • ESP8266获取天气预报信息,并使用CJSON解析天气预报数据

    当前文章介绍如何使用ESP8266和STM32微控制器,搭配OLED显示屏,制作一个能够实时显示天气预报的智能设备。将使用心知天气API来获取天气数据,并使用MQTT协议将数据传递给STM32控制器,最终在OLED显示屏上显示。 心知天气是一家专业的气象数据服务提供商,致力于为全球用户

    2024年02月10日
    浏览(51)
  • Android制作天气预报软件 —— 天气查询

    天气查询功能包括信息显示和地区选择两个版块,二者均通过调用极速数据的相关接口进行实现。其中,信息显示界面作为软件首页,默认先显示系统设置的地区天气情况,用户可通过地区选择的界面进行修改信息。对于天气信息,受接口调用次数限制,系统设置每24小时更

    2024年02月12日
    浏览(43)
  • 【小项目】微信定时推送天气预报Github项目使用及原理介绍-包含cron、天气预报、常用api...

    一、资料链接 1、github地址 https://github.com/qq1534774766/wx-push 2、教程地址 https://blog.csdn.net/qq15347747/article/details/126521774 3、易客云API(自动发送天气) https://yikeapi.com/account/index 4、apispace-各种接口(名人名言) https://www.apispace.com/console/api?orgId=6356 5、微信公众平台 https://mp.weixin.qq.com/d

    2024年02月02日
    浏览(42)
  • QT实现天气预报

    public:     MainWindow(QWidget* parent = nullptr);     ~MainWindow();    protected: 形成文本菜单来用来右键关闭窗口     void contextMenuEvent(QContextMenuEvent* event); 鼠标被点击之后此事件被调用     void mousePressEvent(QMouseEvent *ev); 移动窗口     void mouseMoveEvent(QMouseEvent* ev);     //重写过滤器方法

    2024年02月12日
    浏览(43)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包