Еженедельная мини-программа обучения - Ежедневная погода

Апплет WeChat

最终效果图

Предисловие: Добро пожаловать в серию 2 еженедельной обучающей мини-программы «Погода на каждый день». Прочитав собственное программное обеспечение Apple для прогноза погоды, я обнаружил, что оно очень простое и практичное. Посмотрел на апплет погоды и ничего похожего не нашел, поэтому сымитировал. Хотя имитация не очень похожа, пожалуйста, не смейтесь!

Основная функция:

1. Получите подробный прогноз погоды на день, найдя или выбрав местоположение

(1) Погодные условия, включая температуру «текущая температура, минимальная температура и максимальная температура», погода, качество воздуха, влажность, направление и скорость ветра, восход и закат, атмосферное давление, видимость и т. д.;

(2) Жизненный индекс, включая комфорт, одевание, простуду, физические упражнения, путешествия, интенсивность УФ-излучения, мойку автомобилей, распространение загрязнения и т. д.

2. 24-часовой прогноз погоды

3. 7-дневный прогноз погоды

деталь:

Добавьте стартовую страницу, похожую на App

Реализация конкретной функции:

1. Интерфейсная часть: используйте бесплатный интерфейс погоды, предоставленный Jingdong Vientiane (Адрес официального сайта Jingdong Vientiane)

京东万象免费接口

2. Раздел страницы:

页面布局草图

(1) Концепция макета: на главной странице используется небольшая программа для рекомендации гибкого макета столбца с использованием 4 шаблонов (шаблон информации о текущей погоде, температура, 24-часовой шаблон, шаблон погоды на 7 дней и шаблон живого индекса), 2 прокрутки ( 24 часа, 7 дней) прогноз погоды) (2) Использование подробного шаблона:

  • В качестве примера возьмем текущую информацию о погоде (один стиль):
.wxss
<template name="nowTemplate">
  <view class='template-bgview'>
    <view class='temperature-bg'>
      <text class='temperature-text'>{{nowweather.tmp}}</text>
      <text class='temperature-degree'>°</text>
    </view>

    <view class='weather-bg'>
      <text>{{nowweather.cond.txt}}</text>
      <view class='weather-line'>|</view>
      <view class='aqi-bg'>
        <text class='aqi-text'>{{aqi.aqi + " " + aqi.qlty}}</text>
        <!-- <text>{{aqi.aqi}}</text> -->
      </view>
    </view>

    <view class='winter-bg'>
      <text class='hum-text'>{{"湿度 "+nowweather.hum+"%" + "  "}}</text>
      <text class='wind-text'>{{"  " + nowweather.wind.dir+" "+nowweather.wind.sc+"级"}}</text>
    </view>
  </view>
</template>

.wxss
.template-bgview {
  width: 100%;
  /* height: 175px; */
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.temperature-bg {
  /* align-items: center; */
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.temperature-text {
  font-size: 160rpx;
  font-weight: lighter;
}

.temperature-degree {
  font-size: 80rpx;
  font-weight: lighter;
}

.weather-bg {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.weather-line {
  margin-left: 5px;
  color: gray;
}

.aqi-bg {
  margin-left: 5px;
  background-color: yellow;
  border-radius: 3px;
}

.aqi-text {
margin-left: 5px;
margin-right: 5px;
}

.winter-bg {
  margin-top: 10px;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.hum-text {
  margin-right: 10px;
}

.wind-text {
  margin-left: 10px;
}

Использование шаблона: 1. Импорт страницы шаблона .wxml

<import src="../template/now-template.wxml" />

.wxss

@import "../template/now-template.wxss";

2. Использование внешнего вложенного представления

    <view class='now-view'>
      <template is="nowTemplate" data="{{nowweather:weather.now, aqi:weather.aqi}}" />
    </view>
  • В качестве примера возьмем шаблон погоды на 7 дней (стиль списка):

Метод использования такой же, конкретные коды wxml и wxss следующие:

wxml
<template name="sevenDays">
  <view class='template-sevendays'>
    <view class='week' wx:if="{{index==0}}">{{item.week.week+"  (今天)"}}</view>
        <view class='week' wx:else>{{item.week.week+" ("+item.week.month+"/"+item.week.day+")"}}</view>

    <view class='condition' wx:if="{{isnight}}">{{item.cond.txt_n}}</view>
    <view wx:else class='condition'>{{item.cond.txt_d}}</view>
    <view class='hight-temperature'>{{item.tmp.max+"°"}}</view>
    <view class='low-temperature'>{{item.tmp.min+"°"}}</view>
  </view>
</template>


wxss
.template-sevendays {
  width: 100%;
  height: 30px;
  display: flex;
  flex-direction: row;
}

.week {
  margin-left: 10px;
  flex: 4;
}

.condition {
  text-align: center;
  flex: 4;
  /* width: 40%; */
}

.hight-temperature {
  text-align: center;
  flex: 1;
}

.low-temperature {
  text-align: center;
  flex: 1;
}

3. Часть взаимодействия с данными:

Принцип: используйте API карты Tencent для получения широты и долготы текущего местоположения, вызовите функцию обратного геокодирования Tencent для получения информации о текущем местоположении через широту и долготу, а затем получите текущую информацию о погоде через текущее местоположение. Разбирайте данные о погоде и выполняйте интерактивную привязку страниц и данных.

(1) Анализ данных

  // 解析天气信息函数 构建数据赋值
  analysisData: function(weather) {
    var that = this;
    var str = JSON.stringify(weather);
    var hourly_forecast = [];
    hourly_forecast.push({
      date: "现在",
      cond: weather.now.cond,
      tmp: weather.now.tmp
    });
    // 24小时 数组
    for (var i = 0; i < weather.hourly_forecast.length; i++) {
      var hourDic = weather.hourly_forecast[i];
      hourDic.date = hourDic.date.substr(11, 5);
      hourly_forecast.push(hourDic);
    }

    // 7天天气 数组
    var daily_forecast = [];
    // 使用forEach遍历
    weather.daily_forecast.forEach(function (dailyDic) {
      dailyDic.week = util.dateLater(dailyDic.date, 0);
      daily_forecast.push(dailyDic);
    });
 
    // 生活指数数组 按照指定顺序排列
    var suggestion = [];
    var comf = weather.suggestion.comf;
    comf.title = "舒适度";
    comf.id = 0;
    suggestion.push(comf);

    var drsg = weather.suggestion.drsg;
    drsg.title = "穿衣";
    drsg.id = 1;
    suggestion.push(drsg);

    var flu = weather.suggestion.flu;
    flu.title = "感冒";
    flu.id = 2;
    suggestion.push(flu);

    var sport = weather.suggestion.sport;
    sport.title = "运动";
    sport.id = 3;
    suggestion.push(sport);

    var trav = weather.suggestion.trav;
    trav.title = "旅游";
    trav.id = 4;
    suggestion.push(trav);

    var uv = weather.suggestion.uv;
    uv.title = "紫外线强度";
    uv.id = 5;
    suggestion.push(uv);

    var cw = weather.suggestion.cw;
    cw.title = "洗车";
    cw.id = 6;
    suggestion.push(cw);

    var air = weather.suggestion.air;
    air.title = "污染扩散";
    air.id = 7;
    suggestion.push(air);
    this.setData({
      weather: {
        hourly_forecast: hourly_forecast,
        daily_forecast: daily_forecast,
        aqi: weather.aqi.city,
        now: weather.now,
        astro: daily_forecast[0].astro,
        suggestion: suggestion
      },
      updateTimeHidden: false,
      updateTime: weather.basic.update.loc
    });

    // 2秒后隐藏更新时间
    var timer = setTimeout(function() {
      that.setData({
        updateTimeHidden: true
      });
    }, 2000);
  },

(2) Привязка данных, например, погода на 7 дней.

    <view class='sevendays-bg'>
      <view class='sevendays-title'>7天天气预报</view>
      <scroll-view>
        <block wx:key="daily_forecast" wx:for="{{weather.daily_forecast}}" wx:for-item="item" wx:for-index="index">
          <view class='sevendays-templatebg'>
            <template is="sevenDays" data="{{item: item, isnight: isNight, index: index}}" />
          </view>
        </block>
      </scroll-view>
    </view>

На этом дневная трансляция погоды закончилась. Как это невозможно выучить маленькие программы за неделю? Научиться быть опытным сложно, но начать все же можно.Эту небольшую программу я написал всего за одну неделю.扫码体验

2021.2.2 Прикрепленное обновлениессылка на скачивание

Категории