微信小程序获取今日天气预报代码 小程序获取七日天气

代码是天气api的小程序demo, 粘贴上js和wxml就可以运行看效果了, 有问题的加我qq 445899710, 可提供源代码, 效果如图

如果是测试, 请勾选配置 不校验合法域名、web-view(业务域名)、TLS 版本以及 HTTPS 证书

如果正式使用, 请添加安全域名两个 (ip.tianqiapi.com 和 tianqiapi.com)

技术图片

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;}

  

相关文章