【小程序】微信开发者工具+心知天气API实现天气预报
微信小程序请求心知天气API接口进行开发
·
前言
问：为什么使用心知天气的天气数据API而不是其他产品？
答：
-
心知天气为我们提供了一款通过标准的Restful API接口进行数据访问的天气数据API产品；
-
心智天气官网为我们提供了足够详细的开发文档和用户手册，方便我们快速上手进行开发；
-
心知天气旗下的天气数据API针对不同用户提供了四种产品套餐：免费版、试用版、开发者套餐和企业版；对于处在学习阶段的我们可以选择免费申请试用版进行测试学习；
1.效果图
2.获取心知天气API接口
2.1.获取个人API私钥
心知天气官网链接：心知天气
https://www.seniverse.com/
进入心知天气官网注册账号
登录成功后进入控制台页面添加产品（注：这里的试用版和免费版是我已添加过的）
免费申请试用版(亦可充值申请开发者套餐进行长期开发，价格也比较划算)
申请成功后点击产品管理=>进入您选择的产品项，在基本信息项获取API私钥
2.2.查询开发文档获取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
<view>
<view class="header-modular"><!--顶部模块的容器-->
<image class="bg-wave" src="../../images/black/bg_wave.gif"></image><!--背景图片-->
<view class="row" style="width: 100%;margin: auto;"><!--水平布局的容器-->
<view class="tmp" id="now_tmp">{{now.temperature}}°</view><!--当前温度-->
<image class="icon-weather" id="now_icon" src="../../images/black/{{now.code}}@1x.png"></image><!--当前天气图标-->
</view>
<view class="tips-wrap" id="now_wind"><!--风力、湿度和气压的容器-->
<view class='tips'>风力：{{now.wind_scale}} 级</view>
<view class='tips'>湿度：{{now.humidity}} %</view>
<view class='tips'>气压：{{now.pressure}}Pa</view>
</view>
</view>
<view class="card-modular"><!--卡片模块容器，24小时预报和7天预报-->
<view class="title">24小时预报</view><!--标题-->
<!-- 24小时数据 -->
<view class="card-wrap" ><!--24小时预报的容器-->
<view class="item hourly" wx:for="{{hourly}}" wx:key="index"><!--每个小时的预报-->
<view class="text-gray">{{item.time}}</view><!--时间-->
<image class="icon" src="../../images/black/{{item.code}}@1x.png"></image><!--天气图标-->
<view class="text-primary mb-32">{{item.temperature}}°</view><!--温度-->
<view>{{item.text}}</view><!--天气描述-->
<view class="text-gray">{{item.wind_direction}}风</view><!--风向-->
</view>
</view>
</view>
<view class="card-modular">
<view class="title">7天预报</view><!--7天预报的标题-->
<view class="card-wrap"> <!--7天预报的容器-->
<view class="item daily" wx:for="{{daily}}" wx:key="index"><!--每天的预报项-->
<view>{{item.newDate}}</view><!--星期-->
<view class="text-gray">{{item.date}}</view><!--日期-->
<image class="icon" src="../../images/black/{{item.code_day}}@1x.png"></image><!--白天天气图标-->
<view class="text-primary">{{item.low}}°~{{item.high}}°</view><!--最低温度和最高温度-->
<image class="icon" src="../../images/black/{{item.code_night}}@1x.png"></image><!--夜晚天气图标-->
<view>{{item.text_day}}</view><!--天气描述-->
<view class="text-gray">{{item.wind_scale}}级</view><!--风力等级-->
</view>
</view>
</view>
</view>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()方法获取天气数据；
时贰肆年壹月拾日晌午
腾讯云面向开发者汇聚海量精品云计算使用和开发经验，营造开放的云计算技术生态圈。
更多推荐
34
0- 0
已为社区贡献2条内容
所有评论(0)