小程序开发学习（5）---实现天气预报小程序

亿是守候 & 亿是承诺

已于 2022-04-16 10:28:50 修改

阅读量1.5k

点赞数 2

分类专栏：微信小程序开发文章标签： html css

于 2021-05-29 20:29:50 首次发布

本文链接：https://blog.csdn.net/weixin_48678602/article/details/107845757

版权

本文介绍了如何使用和风天气API在小程序中实现天气预报功能。首先，详细阐述了如何在和风天气平台注册并获取API Key。接着，讨论了在小程序后台配置合法域名的步骤。然后，提供了app.json、app.wxss、index.js和index.wxml的代码示例。最后，展示了完成后的天气预报小程序效果，并推荐了阿里巴巴矢量图标库来获取小程序图标。

摘要由CSDN通过智能技术生成

1.小程序API获取

上次我教会了大家如何获取天气API的方式，今天在教大家在另外一个网站上获取API，叫和风天气，上次教大家的在实况天气接口API开发指南上获取，今天这个获取是在和风天气开发平台上获取天气API，点击注册（第一次登陆需要注册一下个人信息），注册好之后进入控制台

在这里插入图片描述

填入账号和密码后，进入控制台

在这里插入图片描述

在控制台上第一步点击应用管理，第二步创建应用，第三步添加数据KEY，这就是获取到的天气API，这样就完成了小程序API配置

在这里插入图片描述

因为项目有用到天气预报的逐小时预报和7天预报，和风天气又必须实名才能获取到此数据，所以需要登录和风天气后台进行实名认证

2.后台配置

我们需要登录小程序开发后台进行和合法域名的配置，才能进行后面的操作，不然在正确写入代码之后程序依然还会报错。
在小程序后台点击开发，找到开发设置，填入API合法域名https://free-api.heweather.net
在这里插入图片描述

这一步完成之后，在后面的小程序天气预报API配置就已经完成了

3.实现天气预报小程序代码

app.json代码

{
   
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
   
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "天气预报",
    "navigationBarTextStyle":"black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

app.wxss代码

/**app.wxss**/
.container {
   
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 0rpx 0;
  box-sizing: border-box;
}

index.js代码

//index.js
Page({
   

  /**
   * 页面的初始数据
   */
  data: {
   
    search_city: '',
    imgsrc: 100
  },
  /**
   * 根据城市获取天气预报
   */
  getWeather(city) {
   
    let that = this
    //获取实况天气
    wx.request({
   
      url: 'https://free-api.heweather.net/s6/weather/now?key=10a734a0b2b340d0a4cc5c87a433b968&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=10a734a0b2b340d0a4cc5c87a433b968&location=' + city,
          success: function (res) {
   
            var arr = res.data.HeWeather6[0].hourly
            var hourly = []
            for (var i = 0; i < arr.length