《冷暖自知》天氣小程序

學無止境，以玩兒玩兒的心態去學習！
前一天晚上寫的，寫的不太好，第二天馬上修改了，如有差錯，請多指教。

花半天時間完成簡單的小程序應用。適合小程序初學者。

步驟：

1. 申請小程序帳號： 小程序註冊入口, 具體操作按照官網步驟執行，相信你會看的很明白的（-
2. 安裝微信開發者工具，打開工具填寫信息：①項目目錄為自己要開發小程序的位置②AppId在微信管理後臺的設置-開發設置中③項目名稱自己起，填寫完成點擊完成；
3. 看到默認的初始小程序Hello Horld是不是很興奮，以上步驟不是我們今天研究的重點，下面進行我們的關鍵：
4. 在index.wxml中寫我們的結構，index.wxss中寫css樣式，在index.js中寫我們的邏輯內容。前提是要有css3和javascript的基礎哦！！！
5. 在index.js中定義兩個方法：getLocation()獲取用戶的地理位置，getWeather()獲取天氣的方法;
6. 和風天氣提供免費天氣接口（無償打廣告，哈哈~~），免費版只能獲取3天的天氣情況，開發文檔

廢話不多說，直接上代碼~~~

代碼

index.wxml部分

<!--index.wxml-->
<view class="container">
  <view class="weather yesterday">
    <view>
      <view class=‘date‘>今天</view>
      <view
 
 class=‘location‘>{{basic.location}}/{{basic.parent_city}}</view>
      <view class=‘tmp‘>{{today.tmp_min}}℃~{{today.tmp_max}}℃</view>
      <view class=‘cond_txt‘>{{today.cond_txt_d}}</view>
    </view>
    <view>
      <view class=‘weather_icon‘>
        <image
 
 src=‘{{todyIcon}}‘></image>
      </view>
      <view class=‘lastUpdateDate‘>最後更新：{{update}}</view>
    </view>
  </view>
  <view class="weather today">
    <view>
      <text>明天</text>
       <view class=‘location‘>{{basic.location}}/{{basic.parent_city}}</view>
      <view class=‘tmp‘>{{tomorrow.tmp_min}}℃~{{tomorrow.tmp_max}}℃</view>
      <view class=‘cond_txt‘>{{tomorrow.cond_txt_d}}</view>
    </view>
    <view>
      <view class=‘weather_icon‘>
        <image src=‘{{tomorrowIcon}}‘></image>
      </view>
      <view class=‘lastUpdateDate‘>最後更新：{{update}}</view>
      </view>
  </view>
  <view class="weather tomorrow">
    <view>
      <text>後天</text>
       <view class=‘location‘>{{basic.location}}/{{basic.parent_city}}</view>
      <view class=‘tmp‘>{{afterTomor.tmp_min}}℃~{{afterTomor.tmp_max}}℃</view>
      <view class=‘cond_txt‘>{{afterTomor.cond_txt_d}}</view>
    </view>
    <view>
    <view class=‘weather_icon‘>
        <image src=‘{{afterTomorIcon}}‘></image>
      </view>
      <view class=‘lastUpdateDate‘>最後更新：{{update}}</view>
    </view>
  </view>
</view>

index.wxss部分

/**index.wxss**/
.container {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 10px 15px;
  box-sizing: border-box;
} 
.weather{
  height: 110px;
  width: 100%;
  margin-bottom: 10px;
  border-radius: 5px;
  color: #FFF;
  padding: 5PX 15px;
  display: flex;
  font-size: 14px;
  box-sizing: border-box;
}
.weather>view{
  flex: 1;
}
.weather>view>view{
  margin: 5px 0;
}
.yesterday{
  background-color: #30BCAF;
}
.today{
  background-color: #78A4be;
}
.tomorrow{
  background-color: #FCB654;
}
.location,.cond_txt{
  font-size: 14px;
}
.date,.tmp{
  font-weight: bold;
}
.weather_icon{
  text-align: center;
  height: 65px;
}
.weather_icon image{
  width: 75px;
  height: 100%;
}
.lastUpdateDate{
  font-size: 10px;
  text-align: center;
}

index.js部分

//index.js
//獲取應用實例
const app = getApp()

Page({
  data: {
    update: ‘‘,
    basic:{},
    today:{},
    tomorrow:{},
    afterTomor:{},
    todyIcon:‘../../imgs/weather/999.png‘,
    tomorrowIcon:‘../../imgs/weather/999.png‘,
    afterTomorIcon:‘../../imgs/weather/999.png‘
  },
  onShow: function () {
    this.getLocation();
  },
  //事件處理函數
  bindViewTap: function() {
    wx.navigateTo({
      url: ‘../logs/logs‘
    })
  },
  getLocation:function(){
    var that = this;
    wx.getLocation({
      type: ‘wgs84‘,
      success: function (res) {
        var latitude = res.latitude
        var longitude = res.longitude
        that.getWeatherInfo(latitude, longitude);
      }
    })
  },
  getWeatherInfo: function (latitude, longitude){
    var _this = this;
    var key = ‘‘;//你自己的key
    //需要在微信公眾號的設置-開發設置中配置服務器域名
    var url = ‘https://free-api.heweather.com/s6/weather?key=‘+key+‘&location=‘ + longitude + ‘,‘ + latitude;
    wx.request({
      url: url, 
      data: {},
      method: ‘GET‘,
      success: function (res) {
        var daily_forecast_today = res.data.HeWeather6[0].daily_forecast[0];//今天預報
        var daily_forecast_tomorrow = res.data.HeWeather6[0].daily_forecast[1];//明天天預報
        var daily_forecast_afterTomor = res.data.HeWeather6[0].daily_forecast[2];//後天預報
        var basic = res.data.HeWeather6[0].basic;
        var update = res.data.HeWeather6[0].update.loc;//更新時間
        _this.setData({
          update:update,
          basic:basic,
          today: daily_forecast_today,
          tomorrow:daily_forecast_tomorrow,
          afterTomor: daily_forecast_afterTomor,
          todyIcon: ‘../../imgs/weather/‘ + daily_forecast_today.cond_code_d+‘.png‘, //在和風天氣中下載天氣的icon圖標，根據cond_code_d顯示相應的圖標
          tomorrowIcon: ‘../../imgs/weather/‘ + daily_forecast_tomorrow.cond_code_d+‘.png‘,
          afterTomorIcon: ‘../../imgs/weather/‘ + daily_forecast_afterTomor.cond_code_d+‘.png‘
        });
      }
    })
  }
})

效果

大功搞成，這樣就有了自己的天氣預報了，天氣變冷，大家註意身體哦，身體是革命的本錢！！！

微信小程序+和風天氣完成天氣預報