前言
问:为什么使用心知天气的天气数据API而不是其他产品?
答:
-
心知天气为我们提供了一款通过标准的Restful API接口进行数据访问的天气数据API产品;
-
心智天气官网为我们提供了足够详细的开发文档和用户手册,方便我们快速上手进行开发;
-
心知天气旗下的天气数据API针对不同用户提供了四种产品套餐:免费版、试用版、开发者套餐和企业版;对于处在学习阶段的我们可以选择免费申请试用版进行测试学习;
1.效果图
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
<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.jsconst 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()方法获取天气数据;
时贰肆年壹月拾日晌午