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

前言

问：为什么使用心知天气的天气数据API而不是其他产品？

答：

心知天气为我们提供了一款通过标准的Restful API接口进行数据访问的天气数据API产品；
心智天气官网为我们提供了足够详细的开发文档和用户手册，方便我们快速上手进行开发；
心知天气旗下的天气数据API针对不同用户提供了四种产品套餐：免费版、试用版、开发者套餐和企业版；对于处在学习阶段的我们可以选择免费申请试用版进行测试学习；

1.效果图

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

2.获取心知天气API接口

2.1.获取个人API私钥

心知天气官网链接：心知天气https://www.seniverse.com/

进入心知天气官网注册账号

登录成功后进入控制台页面添加产品（注：这里的试用版和免费版是我已添加过的）

免费申请试用版(亦可充值申请开发者套餐进行长期开发，价格也比较划算)

申请成功后点击产品管理=>进入您选择的产品项，在基本信息项获取API私钥

2.2.查询开发文档获取API接口

官网点击文档进入

心知天气API文档链接

3.开发测试

3.1.获取页面素材包

心知天气官方文档提供：(注：本演示代码背景采取浅色系，推荐使用官方文档提供的暗色主题图标)
心知天气官方文档提供的亮色系主题图标链接
心知天气官方文档提供的暗色系主题图标链接

使用原因：

亮色主题图标

暗色主题图标

本文演示代码背景使用浅色系，使用亮色主题图标如图所示，会和浅色背景混合导致图标显示不清，所以推荐使用暗色主题图标；

心知天气提供的素材包命名格式采取code@1x.png格式，code是后文中使用wx.request请求API接口获得的属性，可以避免我们自定义方法切换素材从而增大系统开销；

3.2.main.json

{
  "usingComponents": {},
  "navigationBarBackgroundColor": "#000000",
  "navigationBarTextStyle": "white",
  "navigationBarTitleText": "天气预报",
  "backgroundColor": "#eeeeee",
  "backgroundTextStyle": "light"
}

usingComponents：用于引入自定义组件。这里没有引入任何自定义组件，后期可进行二次开发添加组件；

navigationBarBackgroundColor：设置小程序导航栏的背景颜色；

navigationBarTextStyle：设置小程序导航栏的文字颜色；

navigationBarTitleText：设置小程序导航栏中间的标题；

backgroundColor：设置小程序页面的背景颜色

backgroundTextStyle：设置小程序页面的背景文字颜色，以适应浅色背景

3.3.main.wxml


  
    
    
      {{now.temperature}}°
      
    
    
      风力：{{now.wind_scale}} 级
      湿度：{{now.humidity}} %
      气压：{{now.pressure}}Pa
    
  


  
      24小时预报
      
      
        
          {{item.time}}
          
          {{item.temperature}}°
          {{item.text}}
          {{item.wind_direction}}风
        
      
  

  
    7天预报
      
      
        {{item.newDate}}
        {{item.date}}
        
        {{item.low}}°~{{item.high}}°
        
        {{item.text_day}}
        {{item.wind_scale}}级

3.3.1.header-modular：顶部模块

API接口返回的数据格式：

图中信息来源于：心知天气
官方文档

{{now.XXX}}：在模板中插入从API接口中请求的动态数据

src=”../../images/black/{{now.code}}@1x.png”：图片素材来源于本地，且使用数据绑定根据API接口返回的code获取属于这段数据的图片素材

3.3.2.二十四小时预报卡片模块

API接口返回的数据格式：

图中信息来源于：心知天气
官方文档

wx:for{hourly}：列表绑定API接口返回的hourly数据进行循环渲染

3.3.3.七天预报卡片模块

API接口返回的数据格式：

图中信息来源于：心知天气
官方文档

3.4.main.wxss

/* pages/Weather/main.wxss */
body {
  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, #DCEAFC, #C1CFDF);
  position: relative;
  padding: 30rpx;
}

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


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

.header-modular .tmp {
  font-size: 200rpx;
  font-weight: bold;
  color: #fff;
  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: #da1a1a;
  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;
}

3.5.main.js

// pages/Weather/main.js
const private_key = "你的私钥";
Page({

  /**
   * 页面的初始数据
   */
  data: {
    location: '你的城市',
    now: {},
    hourly:[],
    daily:[]
  },
  getWeather() {
    wx.showLoading({
      title: '加载中',
    })
    wx.request({
      url: `https://api.seniverse.com/v3/weather/now.json?key=${private_key}&location=${this.data.location}&language=zh-Hans&unit=c`,
      method: 'GET',
      success: (res) => {
        console.log("总数据", res);
        this.setData({
          now: res.data.results[0].now
        })
      }
    })
    // 24小时天气预报获取
    wx.request({
      url: `https://api.seniverse.com/v3/weather/hourly.json?key=${private_key}&location=${this.data.location}&language=zh-Hans&unit=c&start=0&hours=24`,
      method: 'GET',
      success: (res) => {
        let hourlys =res.data.results[0].hourly;
        console.log(hourlys);
        hourlys.forEach((item)=>{
          item.time = this.formatTime(new Date(item.time)).hourly
        })
        this.setData({
          hourly:hourlys
        })
        console.log("24小时天气",this.data.hourly);
      }
    })
    //七天预报获取
    wx.request({
      url: `https://api.seniverse.com/v3/weather/daily.json?key=${private_key}&location=${this.data.location}&language=zh-Hans&unit=c&start=0&days=7`,
      method: 'GET',
      success: (res) => {
        let dailys =res.data.results[0].daily;
        dailys.forEach((item)=>{
          item.newDate= this.formatTime(new Date(item.date)).dailyToString,
          item.date =this.formatTime(new Date(item.date)).daily
        })
        this.setData({
          daily:dailys
        })
        console.log('7天数据',this.data.daily);
        wx.hideLoading();//关闭等待窗口
      }
    })
  },
  
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.getWeather();
  },
  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
  }
})

声明常量private_key存储私钥，用于在getWeather()方法中向API发送请求时使用${private_key}模板字符串进行插值；

在getWeather()方法中通过wx.request()方法向API发送请求，获取当天天气预报、24小时天气预报和七天天气预报。请求完成后调用formatTime()方法和formatNumber()方法格式化API接口返回的时间数据以及时间中的数字，将数据存储在页面data中的now、hourly和daily属性中，最后调用wx.hideLoading()方法关闭加载中的提示框；

生命周期函数onLoad()在页面加载时触发，会调用getWeather()方法获取天气数据；

时贰肆年壹月拾日晌午

本文来自网络，不代表协通编程立场，如若转载，请注明出处：https://net2asp.com/7732097216.html