超级简单的微信小程序获取今日天气预报代码 小程序获取七日天气

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

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

如果正式使用, 请添加安全域名两个 ()

index.js代码

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71

//index.js //获取应用实例 const app = getApp()   Page({   data: {     weather: { 'wea_img': 'qing'},//实况天气     weatherweek:[],//七日天气   },   onLoad: function () {     this.getapi();   },   getapi:function(){     var _this = this;     // 获取IP地址     wx.request({       url: 'https:///ip/',       data: {       },       method: 'POST',       header: {         'content-type': 'application/x-www-form-urlencoded'       },       success: function (res) {         console.log(res);         // 根据IP获取天气数据         _this.weathertoday(res.data.ip);_this.weatherweekday(res.data.ip);       }     });   },   // 天气api实况天气   weathertoday:function(ip){     var _this = this;     wx.request({       url: 'https://www./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./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代码

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

<!--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="http://cddn./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代码

1 2 3 4 5

.container {   height: 100%;   text-align:center; background:#f6f8f8; padding:20rpx;font-size:16px; } .padb{padding-bottom: 15rpx;}

小程序源码下载: https://pan.baidu.com/s/1jIPAtU1Q-EH6I18ud9pNvw 提取码 s8tm

--  转载的别人的文章（https://www.cnblogs.com/ccjin/p/10684924.html）-- 因为转载不过来 所以就复制了