天气微信小程序相关代码

js文件

const app = getApp();
Component({
  data: {
    icon: '',
    name: '1',
    province: '',
    location_city: '',
    // get_time: '',
    cue_word: '',
    tmp: '',
    cond_txt: '',
    wind_dir: '',
    wind_sc: '',
    fl: '',
    tmp_max: '',
    tmp_min: '',
    cond_code_d: '',
    cond_txt_d: '',
    tmp_max_m: '',
    tmp_min_m: '',
    cond_code_d_m: '',
    cond_txt_d_m: '',
    hum: '',
    cloud: '',
    pres: '',
    vis: '',
    wind_deg: '',
    pcpn: '',
    wind_spd: '',
    future: [],
    lifeindex: [],
    showModal: true, // 显示modal弹窗
    single: true// true 只显示一个按钮，如果想显示两个改为false即可
  },
  lifetimes: {
    created: function(){
      var options={};
      this.weiZhi(options);
    }
  },
  onPullDownRefresh: function () {
    var that = this;
    var options = {};
    that.weiZhi(options);
    wx.stopPullDownRefresh();
  },
  methods: {
//获取用户位置（经纬度）
weiZhi: function (options) {
  console.log("--------"+options);
  var truedata = JSON.stringify(options);
  var that = this;
  truedata == '{}';
  if (truedata == '{}') {
    wx.getLocation({
      type: 'wgs84',
      success(res) {
        var latitude = res.latitude
        var longitude = res.longitude
        wx.setStorageSync("latitude", latitude);
        wx.setStorageSync("longitude", longitude);
        that.getUserCity(latitude, longitude);
      },
    })
  } else {
    var latitude = options.lat;
    var longitude = options.lng;
    wx.setStorageSync("latitude", latitude);
    wx.setStorageSync("longitude", longitude);
    that.getUserCity(latitude, longitude);
  }
},

//获取用户地理位置（城市）
getUserCity: function (latitude, longitude) {
  wx.showLoading({
    title: '加载中...',
    mask: true,
  });
  var that = this;
  // var lat = wx.getStorageSync('latitude');
  // var longit = wx.getStorageSync('longitude');
  wx.request({
    method: "POST",
    url: app.globalData.apiUrl + '/GetCityName', 
    data: {
      latitude: latitude,
      longitude: longitude,
    },
    header: {
      'content-type': 'application/json' // 默认值
    },
    success(res) {
      if (res.data.code == 1) {
        that.setData({
          location_city: res.data.data.location_city,
          province: res.data.data.province,
          // get_time: res.data.data.gettime,
          cue_word: res.data.data.cue_word,
        });
        that.getWeatherList(latitude, longitude);
      } else {
        wx.hideLoading();
        wx.showToast({
          title: '请下拉刷新或重新进入小程序',
          icon: 'none',
          duration: 5000
        });
      }
    }
  })
},

//获取用户天气集合预报
getWeatherList: function (latitude, longitude) {
  var that = this;
  // var latitudes = wx.getStorageSync('latitude');
  // var longitudes = wx.getStorageSync('longitude');
  wx.request({
    method: "POST",
    url: app.globalData.apiUrl + '/WeatherGather',
    data: {
      latitude: latitude,
      longitude: longitude,
    },
    header: {
      'content-type': 'application/json' // 默认值
    },
    success(res) {
      // console.log(res.data)
      if (res.data.code == 1) {
        // console.log(1)
        that.setData({
          tmp: res.data.data.tmp,
          cond_txt: res.data.data.cond_txt,
          wind_dir: res.data.data.wind_dir,
          wind_sc: res.data.data.wind_sc,
          hum: res.data.data.hum,
          cloud: res.data.data.cloud,
          pres: res.data.data.pres,
          vis: res.data.data.vis,
          wind_deg: res.data.data.wind_deg,
          pcpn: res.data.data.pcpn,
          wind_spd: res.data.data.wind_spd,
          fl: res.data.data.fl,
          tmp_max: res.data.weather[0].tmp_max,
          tmp_min: res.data.weather[0].tmp_min,
          cond_txt_d: res.data.weather[0].cond_txt_d,
          cond_code_d: res.data.weather[0].cond_code_d,
          tmp_max_m: res.data.weather[1].tmp_max,
          tmp_min_m: res.data.weather[1].tmp_min,
          cond_txt_d_m: res.data.weather[1].cond_txt_d,
          cond_code_d_m: res.data.weather[1].cond_code_d,
          future: res.data.weather,
          lifeindex: res.data.lifeindex,
        });
        wx.hideLoading();
      } else {
        wx.hideLoading();
        wx.showToast({
          title: '请下拉刷新或重新进入小程序',
          icon: 'none',
          duration: 5000
        });
      }
    }
  })
},

// 点击生活指数
click_button: function (e) {
  // console.log(e);
  wx.showModal({
    title: '温馨提示',
    content: e.currentTarget.dataset.name,
    showCancel: false,
    confirmText: '我知道了',
    confirmColor: '#6666FF',
  });
},

// 定位
search: function () {
  wx.navigateTo({
    url: '../../components/search/search',
  })
},
  }
})

wxml文件

<cu-custom bgColor="bg-gradual-blue">
  <view slot="content">天气</view>
</cu-custom>
<view class="zong">
<view class='yetou'>
  <view class='heads'>
    <!-- 顶部 -->
    <view class='title-top'>
      <!-- 位置 -->
      <view class='dlwz' bindtap='search'>
        <text>{{province}}</text>
        <text style='margin-left:10px;'>{{location_city}}</text>
      </view>
    </view>
    <!-- pm2.0 -->
    <view class='title-zj'>
      <!-- 污染 -->
      <view class='wuran'>
        <text style='display:block;'>{{fl}}℃</text>
        <text style='display:block;'>体感温度</text>
      </view>
    </view>
    <!-- 温度详情 -->
    <view class='title-xb'>
      <!-- 温度 -->
      <view class='wendu'>
        <text class='sheshidu'>{{tmp}}</text>
      </view>
      <!-- 多云 -->
      <view class='duoyun'>
        <text class='weather'>{{cond_txt}}</text>
      </view>
      <!-- 风向 -->
      <view class='feng'>
        <text class='wind'>{{wind_dir}} {{wind_sc}}级</text>
      </view>
    </view>
  </view>
</view>

<!-- boby -->
<view class='bobys'>
  <!-- 空白 -->
  <!-- <view class='blanks'></view> -->
  <!-- 天气预报 -->
  <view class='freddy'>
    <!-- 左边 -->
    <view class='left_weather'>
      <view class='today'>
        <text class='tqyb'>今天</text>
        <text class='tqyb'>{{tmp_min}}/{{tmp_max}}℃</text>
      </view>
      <view class='today'>
        <text class='tqyb'>{{cond_txt_d}}</text>
        <view class='tqyb'>
          <image class='tqybs' src='{{cond_code_d}}'></image>
        </view>
      </view>
    </view>
    <!-- 右边 -->
    <view class='right_weather'>
      <view class='today'>
        <text class='tqyb'>明天</text>
        <text class='tqyb'>{{tmp_min_m}}/{{tmp_max_m}}℃</text>
      </view>
      <view class='today'>
        <text class='tqyb'>{{cond_txt_d_m}}</text>
        <view class='tqyb'>
          <image class='tqybs' src='{{cond_code_d_m}}'></image>
        </view>
      </view>
    </view>
  </view>
<!-- 三天天气状况 -->
<view class='ThreeWeather'>
<block wx:for="{{future}}" wx:key="index">
  <view class='futrue-item'>
    <text>{{item.date}}</text>
    <!-- <text>日出{{item.sr}}</text>
    <text>日落{{item.ss}}</text> -->
    <text>{{item.cond_txt_d}}</text>
    <image class='pic_img' src='{{item.cond_code_d}}'></image>
    <!-- <text>{{item.tmp_max}}℃(最高)</text>
    <text>{{item.tmp_min}}℃(最低)</text> -->
    <text>{{item.tmp_min}}℃/{{item.tmp_max}}℃</text>
    <!-- <image class='pic_img' src='{{item.cond_code_n}}'></image> -->
    <!-- <text>{{item.cond_txt_n}}</text> -->
    <!-- <text>月升{{item.mr}}</text>
    <text>月落{{item.ms}}</text> -->
    <text>{{item.wind_dir	}}</text>
    <view><image class="img" src="https://file.tlzcf.vip/feng.png"></image><text>{{item.wind_sc}}级</text></view>
  </view>
</block>
</view>
<view class="hengxian"></view>
<!-- 天气状况 -->
<scroll-view class='weather_state' scroll-x="true">
  <view class='y_items'>
    <text>{{hum}}%</text>
    <image style='width:60rpx;height:60rpx;' src='https://file.tlzcf.vip/wetness.png'></image>
    <text>相对湿度</text>
  </view>
  <view class='y_items'>
    <text>{{cloud}}%</text>
    <image style='width:60rpx;height:60rpx;' src='https://file.tlzcf.vip/yun.png'></image>
    <text>总云量</text>
  </view>
  <view class='y_items'>
    <text>{{pres}}pa</text>
    <image style='width:60rpx;height:60rpx;' src='https://file.tlzcf.vip/pa.png'></image>
    <text>大气压强</text>
  </view>
  <view class='y_items'>
    <text>{{vis}}km</text>
    <image style='width:60rpx;height:60rpx;' src='https://file.tlzcf.vip/mor.png'></image>
    <text>能见度</text>
  </view>
  <view class='y_items'>
    <text>{{wind_deg}}°</text>
    <image style='width:60rpx;height:60rpx;' src='https://file.tlzcf.vip/wdir.png'></image>
    <text>风向角度</text>
  </view>
  <view class='y_items'>
    <text>{{pcpn}}mm</text>
    <image style='width:60rpx;height:60rpx;' src='https://file.tlzcf.vip/water.png'></image>
    <text>降水量</text>
  </view>
  <view class='y_items'>
    <text>{{wind_spd}}km/h</text>
    <image style='width:60rpx;height:60rpx;' src='https://file.tlzcf.vip/wind.png'></image>
    <text>今日风速</text>
  </view>
</scroll-view>
<!-- 生活指数 -->
<view class='indexlife'>
<block wx:for="{{lifeindex}}" wx:key="index">
<view class='zhishu' bindtap='click_button' data-name='{{item.txt}}'>
  <image class='lifeindex_pic' src='{{item.type}}'></image>
  <text>{{item.brf}}</text>
  <!-- <text style='font-size:10px;'>{{item.file}}</text> -->
</view>
</block>
</view>
</view>
</view>

WXSS文件

/**index.wxss**/
page {
  width: 100%;
  height: 100%;
  margin-bottom: 20%;
}


.img {
  width: 15px;
  height: 15px;
  margin-right: 5px;
}
.zong{
  background-color: #0DB1EE;
}
.yetou {
  width: 100%;
  height: 300px;
}

.heads {
  width: 100%;
  height: 300px;
}

.title-top {
  width: 100%;
  height: 45px;
}

.title-zj {
  width: 100%;
  height: 50px;
  color: aliceblue;
}

.wuran {
  font-size: 13px;
  text-align: center;
  width: 18%;
  height: 38px;
  float: left;
  margin-top: 8px;
  margin-left: 3%;
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 15px;
}

.title-xb {
  width: 100%;
  height: 190px;
  margin-top: 20px;
}

.sheshidu {
  width: 100%;
  height: 300rpx;
  display: block;
  margin: 0 auto;
  font-size: 100px;
  color: white;
  text-align: center;
}

.wendu {
  width: 100%;
  height: 100px;
}

.duoyun {
  width: 100%;
  height: 70rpx;
  margin-top: 30px;
}

.weather {
  width: 20%;
  height: 60rpx;
  display: block;
  margin: 0 auto;
  font-size: 18px;
  color: white;
  text-align: center;
}

.feng {
  width: 100%;
  height: 20px;
  margin-top: 10px;
}

.wind {
  width: 21%;
  height: 40rpx;
  display: block;
  margin: 0 auto;
  font-size: 15px;
  color: white;
  text-align: center;
}

.hint {
  width: 60%;
  height: 80rpx;
  display: block;
  text-align: center;
  color: white;
  font-size: 15px;
  margin: 0 auto;
}

.dlwz {
  width: 100%;
  height: 23px;
  text-align: center;
  font-size: 15px;
  color: white;
  padding-top: 40rpx;
}

.dlwztp {
  width: 20px;
  height: 20px;
  float: left;
}

.bobys {
  margin: 2%;
  margin-top: 100px;
  width: 96%;
  color: #fff;
}

.freddy {
  display: flex;
  justify-content: center;
  width: 100%;
  height: 100rpx;
  font-size: 14px;
}

.left_weather {
  width: 50%;
  height: 100rpx;
  float: left;
  border-right: 0.1px solid #99afcc;
}

.right_weather {
  width: 48%;
  height: 100rpx;
  float: left;
}

.today {
  width: 100%;
  height: 50rpx;
}

.tqyb {
  width: 50%;
  height: 50rpx;
  text-align: center;
  float: left;
}

.tqybs {
  width: 45rpx;
  height: 45rpx;
}

.weather_state {
  display: flex;
  font-size: 14px;
  white-space: nowrap;
  margin: 40px 2% 50px 2%;
}

::-webkit-scrollbar {
  display:none;
  width:0;
  height:0;
  color:transparent;
}

.y_items {
  width: 140rpx;
  height: 160rpx;
  flex-direction: column;
  justify-content: space-between;
  display: inline-flex;
  align-items: center;
}

.ThreeWeather {
  margin: 50px 2% 40px 2%;
  width: 96%;
  height: 400rpx;
  display: flex;
  flex-direction: row;
  font-size: 14px;
  justify-content: center;
}

.hengxian {
  width: 100%;
  height: 0.1px;
  border-top: 0.1px solid #99afcc;
}

.futrue-item {
  width: 33%;
  height: 400rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.pic_img {
  width: 60rpx;
  height: 60rpx;
}

.indexlife {
  border-radius: 15px;
  margin: 20px 2%;
  width: 96%;
  height: 385rpx;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.2);
  padding-bottom: 80%;
}

.lifeindex_pic {
  width: 60rpx;
  height: 60rpx;
}

.zhishu {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  width: 24%;
  height: 190rpx;
  font-size: 14px;
  flex-grow: 1;
}

线上小程序效果：