微信小程序仿ios天气app 天气预报源码分享

微信小程序仿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}}°&nbsp;&nbsp;&nbsp;最低{{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'
  }
})