天气api的小程序示例, 粘贴上js和wxml就可以运行看效果了
如果是测试, 请勾选配置 不校验合法域名、web-view(业务域名)、TLS 版本以及 HTTPS 证书
如果正式使用, 请添加安全域名两个 (ip.tianqiapi.com 和 tianqiapi.com)
有问题的加我qq 445899710, 提供源代码, 效果如图
index.js代码
//index.js
//获取应用实例
const app = getApp()
Page({
data: {
weather: [],//实况天气
weatherweek:[],//七日天气
},
onLoad: function () {
this.getapi();
this.weatherweekday();
},
getapi:function(){
var _this = this;
// 获取IP地址
wx.request({
url: 'https://ip.tianqiapi.com/',
data: {
},
method: 'POST',
header: {
'content-type': 'application/x-www-form-urlencoded'
},
success: function (res) {
console.log(res);
// 根据IP获取天气数据
_this.weathertoday(res.data.ip);
}
});
},
// 天气api实况天气
weathertoday:function(ip){
var _this = this;
wx.request({
url: 'https://www.tianqiapi.com/api/?version=v6',
data: {
'ip': ip
},
method: 'GET',
header: {
'content-type': 'application/x-www-form-urlencoded'
},
success: function (res) {
_this.setData({
weather: res.data
});
console.log(_this.data.weather)
}
});
},
// 天气api一周天气
weatherweekday: function (ip) {
var _this = this;
wx.request({
url: 'https://www.tianqiapi.com/api/?version=v1',
data: {
'ip': ip
},
method: 'GET',
header: {
'content-type': 'application/x-www-form-urlencoded'
},
success: function (res) {
_this.setData({
weatherweek: res.data
});
console.log(_this.data.weatherweek)
}
});
}
})
WXML文件代码
<!--index.wxml-->
<view class='container'>
<view class='padb' style='font-size:20px; font-weight:bold;'>天气api - 小程序示例</view>
<view class='padb' style='font-size:16px; font-weight:bold;'>{{weather.city}}实况天气预报</view>
<view>气象台 {{weather.update_time}} 更新</view>
<view class='padb'>{{weather.tem}}℃ {{weather.wea}}</view>
<view class='padb'>
<image mode="widthFix" src="https://cdn.huyahaha.com/tianqiapi/skin/qq/{{weather.wea_img}}.png" style="width:120rpx;" />
</view>
<view class='padb'>{{weather.win}} {{weather.win_speed}} {{weather.win_meter}}</view>
<view class='padb'>湿度: {{weather.humidity}}</view>
<view class='padb'>能见度: {{weather.visibility}}</view>
<view class='padb'>气压: {{weather.pressure}}hPa</view>
<view class='padb'>空气质量 {{weather.air_level}}</view>
<view class='padb'>{{weather.air_tips}}</view>
<view class='padb' style='font-size:16px; font-weight:bold;'>{{weather.city}}七日天气</view>
<block wx:for='{{weatherweek.data}}' wx:key='key_list'>
<view class='padb'>{{item.day}} - {{item.wea}} - {{item.win[0]}} - {{item.tem1}}/{{item.tem2}}</view>
</block>
<view class='padb' style='font-size:14px; color:#666;'>TianqiAPI.com</view>
</view>
CSS代码
.container {
height: 100%;
text-align:center; background:#f6f8f8; padding:20rpx;font-size:16px;
}
.padb{padding-bottom: 15rpx;}
是不是超级简单, 想要代码的可以加我qq 445899710