如何做一个漂亮的天气预报微信小程序
效果图如下, 附有全部代码和压缩包文件下载
index.js文件内容
//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://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 _this = this;
wx.request({
url: 'https://www.tianqiapi.com/api/?version=v9&appid=41296746&appsecret=tTlAV6vs',
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内容
<view class='container'>
<view style="border-radius:10px; background:#fff;display:block; width:100%;">
<view style="padding:10px;">
<image mode="widthFix" src="/img/icon1.png" style="width:50rpx;height:50rpx;vertical-align: middle;" /> {{weatherweek.city}}</view>
<view style="padding:20px 0;">
<view style="font-size:48px;">{{weatherweek.data[0].tem}}℃</view>
<view style="font-size:18px;">{{weatherweek.data[0].wea}}</view>
</view>
</view>
<!--2-->
<view style="margin-top:10px; padding:10px 0; border-radius:10px; background:#fff;display:block; width:100%;">
<block wx:for="{{weatherweek.data}}">
<view class="weui-flex" style="padding-bottom:10px;">
<view class="weui-flex__item">{{item.week}}</view>
<view class="weui-flex__item">{{item.wea}}</view>
<view class="weui-flex__item">{{item.tem2}} - {{item.tem1}}℃</view>
</view>
</block>
</view>
<!--./2-->
<!--3-->
<view style="margin-top:10px; border-radius:10px; background:#fff;display:block; width:100%;">
<view style="font-size:16px; padding:10px 0;font-weight:bold;">生活指数</view>
<view class="weui-grids">
<view class="weui-grid">
<image class="weui-grid__icon" src="/img/icon8.png" />
<view class="weui-grid__label">紫外线指数</view>
<view class="weui-grid__label">{{weatherweek.data[0].index[0].level}}</view>
</view>
<view class="weui-grid">
<image class="weui-grid__icon" src="/img/icon2.png" />
<view class="weui-grid__label">减肥指数</view>
<view class="weui-grid__label">{{weatherweek.data[0].index[1].level}}</view>
</view>
<view class="weui-grid">
<image class="weui-grid__icon" src="/img/icon6.png" />
<view class="weui-grid__label">血糖指数</view>
<view class="weui-grid__label">{{weatherweek.data[0].index[2].level}}</view>
</view>
<view class="weui-grid">
<image class="weui-grid__icon" src="/img/icon7.png" />
<view class="weui-grid__label">穿衣指数</view>
<view class="weui-grid__label">{{weatherweek.data[0].index[3].level}}</view>
</view>
<view class="weui-grid">
<image class="weui-grid__icon" src="/img/icon4.png" />
<view class="weui-grid__label">洗车指数</view>
<view class="weui-grid__label">{{weatherweek.data[0].index[4].level}}</view>
</view>
<view class="weui-grid">
<image class="weui-grid__icon" src="/img/icon3.png" />
<view class="weui-grid__label">空气指数</view>
<view class="weui-grid__label">{{weatherweek.data[0].index[5].level}}</view>
</view>
</view>
</view>
<!--./3-->
<!--5-->
<view style="margin-top:10px; padding:10px 0; border-radius:10px; background:#fff;display:block; width:100%; text-align:left;">
<view style="padding:10px;">生活是一面镜子。你对它笑,它就对你笑;你对它哭,它也对你哭。</view>
</view>
<!--./5-->
</view>
源文件文件下载
http://cddn.huyahaha.com/tianqi.zip
请注册账号, 使用自己的appid, 问题交流QQ 445899710