如何做一个漂亮的天气预报微信小程序1.

效果图如下,附有全部代码和压缩包文件下载

index.js文件内容//index.js//获取应用实例constappgetApp()Page({data:{weather:{'wea_img':'qing'},//实况天气weatherweek:[],//七日天气},onLoad:function(){this.getapi();},getapi:function(){var_thisthis;//获取IP地址wx.request({url:'https://www.tianqiapi.com/ip',data:{},method:'POST',header:{'content-type':'application/x-www-form-urlencoded'},success:function(res){console.log(res);//根据IP获取天气数据_this.weatherweekday(res.data.ip);}});},//天气api天气获取weatherweekday:function(ip){var_thisthis;wx.request({url:'https://www.tianqiapi.com/api/?versionv9appid41296746appsecrettTlAV6vs',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)}});}})index.wxml内容viewclass'container'viewstyle"border-radius:10px;background:#fff;display:block;width:100%;"viewstyle"padding:10px;"imagemode"widthFix"src"/img/icon1.png"style"width:50rpx;height:50rpx;vertical-align:middle;"/{{weatherweek.city}}/viewviewstyle"padding:20px0;"viewstyle"font-size:48px;"{{weatherweek.data[0].tem}}℃/viewviewstyle"font-size:18px;"{{weatherweek.data[0].wea}}/view/view/view!--2--viewstyle"margin-top:10px;padding:10px0;border-radius:10px;background:#fff;display:block;width:100%;"blockwx:for"{{weatherweek.data}}"viewclass"weui-flex"style"padding-bottom:10px;"viewclass"weui-flex__item"{{item.week}}/viewviewclass"weui-flex__item"{{item.wea}}/viewviewclass"weui-flex__item"{{item.tem2}}-{{item.tem1}}℃/view/view/block/view!--./2--!--3--viewstyle"margin-top:10px;border-radius:10px;background:#fff;display:block;width:100%;"viewstyle"font-size:16px;padding:10px0;font-weight:bold;"生活指数/viewviewclass"weui-grids"viewclass"weui-grid"imageclass"weui-grid__icon"src"/img/icon8.png"/viewclass"weui-grid__label"紫外线指数/viewviewclass"weui-grid__label"{{weatherweek.data[0].index[0].level}}/view/viewviewclass"weui-grid"imageclass"weui-grid__icon"src"/img/icon2.png"/viewclass"weui-grid__label"减肥指数/viewviewclass"weui-grid__label"{{weatherweek.data[0].index[1].level}}/view/viewviewclass"weui-grid"imageclass"weui-grid__icon"src"/img/icon6.png"/viewclass"weui-grid__label"血糖指数/viewviewclass"weui-grid__label"{{weatherweek.data[0].index[2].level}}/view/viewviewclass"weui-grid"imageclass"weui-grid__icon"src"/img/icon7.png"/viewclass"weui-grid__label"穿衣指数/viewviewclass"weui-grid__label"{{weatherweek.data[0].index[3].level}}/view/viewviewclass"weui-grid"imageclass"weui-grid__icon"src"/img/icon4.png"/viewclass"weui-grid__label"洗车指数/viewviewclass"weui-grid__label"{{weatherweek.data[0].index[4].level}}/view/viewviewclass"weui-grid"imageclass"weui-grid__icon"src"/img/icon3.png"/viewclass"weui-grid__label"空气指数/viewviewclass"weui-grid__label"{{weatherweek.data[0].index[5].level}}/view/view/view/view!--./3--!--5--viewstyle"margin-top:10px;padding:10px0;border-radius:10px;background:#fff;display:block;width:100%;text-align:left;"viewstyle"padding:10px;"生活是一面镜子。你对它笑，它就对你笑；你对它哭，它也对你哭。/view/view!--./5--/view2.

源文件文件下载http://cddn.huyahaha.com/tianqi.zip

3.

请注册账号,使用自己的appid,问题交流QQ445899710