一週學會小程序-日播天氣

前言：歡迎收看一週學會小程序系列2-日播天氣。看了蘋果的自帶天氣軟件，發現很簡單使用。在小程序上看了一下天氣的小程序，沒有發現相似的，因而就模仿了一個。雖然模仿的不是很像，請你們不要見笑！

主要功能：

1. 經過定位或選取位置獲取當天詳細天氣預報

（1）天氣狀況，包括溫度「當前溫度、最低溫度和最高溫度」、天氣、空氣質量、溼度、風向和風速、日出和日落、氣壓、能見度等； （2）生活指數，包括溫馨度、穿衣、感冒、運動、旅遊、紫外線強度、洗車、污染擴散等。

2. 24小時天氣預報

3. 7每天氣預報

細節：

增長相似於App的啓動頁

具體功能實現：

1.接口部分：使用京東萬象提供的免費天氣接口（京東萬象官網地址）

2.頁面部分：

（1）佈局構思：主頁面使用小程序推薦flex列布局，使用4個模板（當前天氣溫度信息模板、24小時模板、7每天氣模板、生活指數模板），2個scrollview（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使用

<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獲取當前位置經緯度，經過經緯度調用騰訊的逆地理編碼函數獲取當前位置信息，而後再經過當前位置獲取當前的天氣信息。解析天氣信息數據，完成頁面和數據的交互綁定。 （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>
複製代碼

至此，日播天氣就結束了。一週學會小程序，怎麼不可能？學的很精通那是有難度的，入門仍是能夠的，我就是一週就寫了這個小程序的。