微信小程序项目实战之天气预报

概述

微信小程序项目实战之天气预报

详细

代码下载：http://www.demodashi.com/demo/10634.html

一、准备工作

1、注册微信小程序

2、注册和风天气账号

3、注册百度地图开放平台（小程序应用）

4、在小程序设置中设置request合法域名

二、程序实现

项目代码截图：

具体实现如下：

1、前端页面的实现

  
    {{city}} {{district}}
    {{street}}
    {{tmp}}°
    {{txt}} | 空气 {{qlty}}
  

  
    
      {{dir}}
      微风
      {{sc}}级
    
    
    
      相对湿度
      {{hum}}%
    
    
    
      体感温度
      {{fl}}°
    
  





  
    {{day[i]}}
    
      
      {{item.cond.txt_d}}|{{qlty}}
    
    {{item.tmp.min}}°/ {{item.tmp.max}}°
  

2、css实现

/**index.wxss**/

/**common css**/
.w{
  color: white;
}
.b{
  font-weight: bold;
}

.l{
  border: 1rpx solid #fff;
}

.center{
  text-align: center;
  margin: auto 0;
}

.hor{
  display: flex;
}

.f50{
  font-size: 50rpx;
}

/**index css**/


.bg {
  width: 100%;
  height: 700rpx;
}

.temp{
  font-size: 170rpx;
}

.container {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  padding: 0;
  margin: 0;
  height: 700rpx;
  display: block;
}

.nowWeather{
  padding: 60rpx;
}

.weahterDetail{
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  position: absolute;
  bottom: 50rpx;
}

.forcast{
  padding: 30rpx;
  margin-left: 16rpx;
  margin-right: 16rpx;
  border-bottom: 1rpx solid #eee;
  justify-content: space-around;
}

.img{
  width: 60rpx;
  height: 60rpx;
  margin-right: 16rpx;
}

3、js实现动态数据绑定

//index.js
//获取应用实例
var app = getApp()
var day = ["今天","明天","后天"];
Page({
  data: {
    day : day,
  },

  onLoad: function () {
    console.log('onLoad')
    var that = this

    that.getLocation();
  },

  //获取经纬度方法
  getLocation: function () {
    var that = this
    wx.getLocation({
      type: 'wgs84',
      success: function (res) {
        var latitude = res.latitude
        var longitude = res.longitude
        console.log("lat:" + latitude + " lon:" + longitude);

        that.getCity(latitude, longitude);
      }
    })
  },

  //获取城市信息
  getCity: function (latitude, longitude) {
    var that = this
    var url = "https://api.map.baidu.com/geocoder/v2/";
    var params = {
      ak: "1G50Crx5QIKWy5o4R5Q1ONFSgmFIxfIR",
      output: "json",
      location: latitude + "," + longitude
    }
    wx.request({
      url: url,
      data: params,
      success: function (res) {
        var city = res.data.result.addressComponent.city;
        var district = res.data.result.addressComponent.district;
        var street = res.data.result.addressComponent.street;

        that.setData({
          city: city,
          district: district,
          street: street,
        })

        var descCity = city.substring(0, city.length - 1);
        that.getWeahter(descCity);
      },
      fail: function (res) { },
      complete: function (res) { },
    })
  },

  //获取天气信息
  getWeahter: function (city) {
    var that = this
    var url = "https://free-api.heweather.com/v5/weather"
    var params = {
      city: city,
      key: "894fc2a749104d679fa022c3e71afe83"
    }
    wx.request({
      url: url,
      data: params,
      success: function (res) {
        var tmp = res.data.HeWeather5[0].now.tmp;
        var txt = res.data.HeWeather5[0].now.cond.txt;
        var code = res.data.HeWeather5[0].now.cond.code;
        var qlty = res.data.HeWeather5[0].aqi.city.qlty;
        var dir = res.data.HeWeather5[0].now.wind.dir;
        var sc = res.data.HeWeather5[0].now.wind.sc;
        var hum = res.data.HeWeather5[0].now.hum;
        var fl = res.data.HeWeather5[0].now.fl;
        var daily_forecast = res.data.HeWeather5[0].daily_forecast;
        that.setData({
          tmp: tmp,
          txt: txt,
          code: code,
          qlty: qlty,
          dir: dir,
          sc: sc,
          hum: hum,
          fl: fl,
          daily_forecast: daily_forecast
        })
      },
      fail: function (res) { },
      complete: function (res) { },
    })
  }

})

三、运行效果

导入到微信web开发者工具，运行即可：

运行后，界面如下：

注：本文著作权归作者，由demo大师（http://www.demodashi.com）宣传，拒绝转载，转载需要作者授权