【微信小程序入门】微信小程序+和风天气完成天气预报

时间:2024-01-23 14:09:01

《冷暖预知》天气小程序

学无止境,以玩儿玩儿的心态去学习!
前一天晚上写的,写的不太好,第二天马上修改了,如有差错,请多指教。

花半天时间完成简单的小程序应用。适合小程序初学者。

步骤:

  1. 申请小程序帐号: 小程序注册入口, 具体操作按照官网步骤执行,相信你会看的很明白的(-
  2. 安装微信开发者工具,打开工具填写信息:①项目目录为自己要开发小程序的位置②AppId在微信管理后台的设置-开发设置中③项目名称自己起,填写完成点击完成;
  3. 看到默认的初始小程序Hello Horld是不是很兴奋,以上步骤不是我们今天研究的重点,下面进行我们的关键:
  4. 在index.wxml中写我们的结构,index.wxss中写css样式,在index.js中写我们的逻辑内容。前提是要有css3和javascript的基础哦!!!
  5. 在index.js中定义两个方法:getLocation()获取用户的地理位置,getWeather()获取天气的方法;
  6. 和风天气提供免费天气接口(无偿打广告,哈哈~~),免费版只能获取3天的天气情况,开发文档

废话不多说,直接上代码~~~

代码

1.页面结构 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>

2.页面样式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;
}

3.页面行为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\'
        });
      }
    })
  }
})

效果

大功搞成,这样就有了自己的天气预报了,天气变冷,大家注意身体哦,身体是革命的本钱!!!

扫码查看小程序

美食垂类小程序