微信小程序仿ios天气app
可根据天气情况自动更换天气背景图
下载地址
https://download.csdn.net/download/qq_38832501/85109512
预览图 | 预览图 |
---|---|
![]() | ![]() |
代码预览
index.js
// index.js
// 获取应用实例
const app = getApp()
Page({
data: {
height: 0,
background: 'https://xintai.xianguomall.com/skin/bg_sun.jpg',
info: [],
aircircle: 0, screenWidth: 0
},
onLoad() {
var _this = this;
wx.request({
url: app.globalData.apiurl + 'api?unescape=1&version=v91&appid=' + app.globalData.appid + '&appsecret=' + app.globalData.appsecret + '&ext=hours&cityid=&city=',
data: {
},
method: 'POST',
success: function (res) {
console.log(res.data);
// success
if (res.statusCode == 200) {
console.log('ajax _ success');
// 计算aqi位置
var aqi = res.data.data[0].air / 300;
var circle = (_this.data.screenWidth - 0) * aqi;
// 计算背景图
if (res.data.data[0].wea.match(RegExp(/晴/))) {
var bg = 'https://xintai.xianguomall.com/skin/bg_sun.jpg';
} else {
var bg = 'https://xintai.xianguomall.com/skin/bg_yin.jpg';
}
// output
_this.setData({
background: bg,
aircircle: circle,
info: res.data
});
console.log('circle: ' + circle)
}
}
})
},
onShow() {
var _this = this;
wx.getSystemInfo({
success: function (res) {
console.log(res)
_this.setData({
height: res.statusBarHeight,
screenWidth: res.screenWidth
});
}
})
},/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
var _this = this;
// 设置菜单中的转发按钮触发转发事件时的转发内容
var shareObj = {
title: '今日天气', // 默认是小程序的名称(可以写slogan等)
path: '/pages/index/index', // 默认是当前页面,必须是以‘/’开头的完整路径
imageUrl: '', //自定义图片路径,可以是本地文件路径、代码包文件路径或者网络图片路径,支持PNG及JPG,不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
success: function (res) {
// 转发成功之后的回调
if (res.errMsg == 'shareAppMessage:ok') {
}
}
};
return shareObj;
},
})
wxml
<!--index.wxml-->
<image class='background' src="{{background}}" mode="aspectFill"></image>
<view class="container" style="padding-top:{{height*2 + 60}}px; background-size: 100%; background-repeat:no-repeat; color:#fff; background-attachment: fixed; height: 100%;">
<view style="font-size: 32.76px;">{{info.city}}</view>
<view>{{info.data[0].wea}}</view>
<view style="font-size: 65.52px;">{{info.data[0].tem}}°</view>
<view style="padding: 0 0 20px 0;"><text decode>最高{{info.data[0].tem1}}° 最低{{info.data[0].tem2}}°</text></view>
<!--air-->
<view style="margin: 23.4rpx;">
AQI {{info.data[0].air}} {{info.data[0].air_level}}
<view style="position: relative;">
<text style="position: absolute; background-color: #fff; border-radius: 50%; width: 35.1rpx; height: 35.1rpx;top:2px; left:{{aircircle}}rpx;"></text>
<image src="/img/air_bg.png" mode="widthFix" style="width: 100%;"></image></view>
</view>
<!--./air-->
<!--hours-->
<view style="overflow:scroll; border-bottom: 1px solid rgba(190, 185, 185, 0.5);border-top: 1px solid rgba(190, 185, 185, 0.5);padding:23.4rpx 0;">
<view class="hlist">
<view wx:for="{{info.data[0].hours}}" class="hitem">
<view>{{item.hours}}</view>
<view style="padding: 23.4rpx 0;">
<image src="https://xintai.xianguomall.com/skin/cake/{{item.wea_img}}.png" mode="widthFix" style="width: 46.8rpx;"></image>
</view>
<view style="font-weight: 500;">{{item.tem}}°</view>
</view>
</view>
</view>
<!--week-->
<view style="font-size: 28.08rpx; padding-top: 10px;padding-bottom: 15px;">
<view wx:for="{{info.data}}" class="week">
<text class="weekday">{{item.week}}</text>
<view style="text-align: left; padding-left:45%; ">
<image src="https://xintai.xianguomall.com/skin/cake/{{item.wea_img}}.png" mode="widthFix" style="width: 42rpx; vertical-align: middle;"></image> <text style="font-size:12px; color: #96dafb; margin-left: 5px;" wx:if="{{item.rain > 35}}">{{item.rain}}%</text>
</view>
<text class="weekmax">{{item.tem1}}°</text>
<text class="weekmin">{{item.tem2}}°</text>
</view>
</view>
<!--week-->
<view class="smalltext">{{info.data[0].narrative}}</view>
<!--dayinfo-->
<view style="font-size:23.4rpx; padding: 23.4rpx; text-align: left; ">
<view style="border-bottom: 1px solid rgba(190, 185, 185, 0.5); padding-bottom: 23.4rpx;">
<view style="width: 50%; float:left;">
<view style="color:#d8d6d6;">日出</view>
<view style="font-size: 42.12rpx;">上午 {{info.data[0].sunrise}}</view>
</view>
<view style="width: 50%; float:left;">
<view style="color:#d8d6d6;">日落</view>
<view style="font-size: 42.12rpx;">下午 {{info.data[0].sunset}}</view>
</view>
<view class="clearfix"></view>
</view>
<view style="border-bottom: 1px solid rgba(190, 185, 185, 0.5); padding-top: 23.4rpx;padding-bottom: 23.4rpx;">
<view style="width: 50%; float:left;">
<view style="color:#d8d6d6;">湿度</view>
<view style="font-size: 42.12rpx;">{{info.data[0].humidity}}</view>
</view>
<view style="width: 50%; float:left;">
<view style="color:#d8d6d6;">能见度</view>
<view style="font-size: 42.12rpx;">{{info.data[0].visibility}}</view>
</view>
<view class="clearfix"></view>
</view>
<view style="border-bottom: 1px solid rgba(190, 185, 185, 0.5); padding-top: 23.4rpx;padding-bottom: 23.4rpx;">
<view style="width: 50%; float:left;">
<view style="color:#d8d6d6;">气压</view>
<view style="font-size: 42.12rpx;">{{info.data[0].pressure}}百帕</view>
</view>
<view style="width: 50%; float:left;">
<view style="color:#d8d6d6;">风</view>
<view style="font-size: 42.12rpx;">{{info.data[0].win[0]}} {{info.data[0].win_speed}}</view>
</view>
<view class="clearfix"></view>
</view>
<view style="border-bottom: 1px solid rgba(190, 185, 185, 0.5); padding-top: 23.4rpx;padding-bottom: 23.4rpx;">
<view style="width: 50%; float:left;">
<view style="color:#d8d6d6;">降雨概率</view>
<view style="font-size: 42.12rpx;">{{info.data[0].rain}}%</view>
</view>
<view style="width: 50%; float:left;">
<view style="color:#d8d6d6;">紫外线</view>
<view style="font-size: 42.12rpx;">{{info.data[0].uvDescription}}</view>
</view>
<view class="clearfix"></view>
</view>
<view style="font-size: 23.4rpx; color:#d8d6d6; padding:23.4rpx 0">数据来源:TianqiAPI.com (天气api)</view>
</view>
<!--./dayinfo-->
</view>
app.js
// app.js
App({
onLaunch() {
// 展示本地存储能力
},
globalData: {
/* 该账号appid为平台测试账号, 请购买正式接口 https://tianqiapi.com */
apiurl:'https://v1.yiketianqi.com/',
appid:'43656176',
appsecret:'I42og6Lm'
}
})