微信小程序之天气预报实现

微信小程序之天气预报实现

一，准备工作
1.注册微信小程序
注册教程：https://kf.qq.com/faq/170109iQBJ3Q170109JbQfiu.html
二，注册腾讯位置服务
网址：https://lbs.qq.com
1，注册账号后，点击控制台->key与配额->key管理->创建新**


三，注册和风天气账号，大家也可以用别的天气
获取天气情况，和风天气网址：https://dev.heweather.com
3，进入和风天气–控制台–应用管理–新建应用注册key

四，进入微信小程序平台设置合法request域

1.WXML文件

<view class="content">
<image class="background" mode="aspectFill" src="/img/bg.png"></image>
  <view class="today">
    <view class="info">
      <view class="temp">{{todaytmp}}℃</view>
      <view class="weather">{{todaytxt}}，{{todaydir}}，{{todaysc}}级</view>
      <view>友情提示：请根据天气情况，注意穿衣，保证身体健康</view>
      <view class="city">{{city}}</view>
    </view>
  </view>
 
</view>

2.wxss文件

page{
  height: 100%;
}
.content{
  font-size: 28rpx;
  height: 100%;
  width: 100%; 
  color: #FFFFFF;
}
.background {
  width: 100%;
  height: 100%;
  position:fixed;
  background-size:100% 100%;
  z-index: -1;
  }
.info{
  padding: 20rpx;
  width: 100%;
  position: fixed;
  background: #FFFFFF;
  background: rgba(0, 0,0, 0.5);
}
.today{
  padding-top: 50rpx;
  height: 50%;
}
.city{
  font-size: 32rpx;
  text-align: right;
  margin-right: 30rpx;
  margin-top: 30rpx;
}
.temp{
  font-size: 100rpx;
  text-align: center;
}
.weather{
  text-align: center;
}

3.js文件**（重点request请求里面的url ，两个key换成自己注册的）**

// pages/tq/tq.js 
Page({
  /**
   * 页面的初始数据
   */
  data: {
    city:"",
 todaytemp:"",
 todaytxt:"",
 todaydir:"",
 todaysc:"",


  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.loadInfo()
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  },
  loadInfo:function(){
   var page=this;
 
wx.getLocation({  //获取当前地址
      type: 'wgs84',
      success: function (res){
        var latitude = res.latitude // 纬度，浮点数，范围为90 ~ -90
        var longitude = res.longitude // 经度，浮点数，范围为180 ~ 
        console.log(latitude,longitude);
        page.loadCity(latitude,longitude);
      }
    })  
  },
  loadCity:function(latitude,longitude){
    var page=this;
    wx.request({
      url:'https://apis.map.qq.com/ws/geocoder/v1/?location='+latitude+','+longitude+'&key=MXABZ-2EAWP-MSXDR-L5HR4-A7DFQ-6NBRR',
   
    success: function(res) {
      console.log(res);
      var city = res.data.result.address_component.city;
      city=city.replace("市","");
      page.setData({city:city});
      page.loadWeather(city);
   
    }
    })

  },
  loadWeather:function(city){
    var page=this;
    wx.request({
      url:"https://free-api.heweather.net/s6/weather/now?location="+city+"&key=f01603130d174163aef389f0846f5546",   
        success: function(res) {
              console.log(res)           
              var tmp = res.data.HeWeather6[0].now.tmp;
              var txt = res.data.HeWeather6[0].now.cond_txt;
              var dir = res.data.HeWeather6[0].now.wind_dir;
              var sc = res.data.HeWeather6[0].now.wind_sc;
             page.setData({todaytmp:tmp,todaytxt:txt,todaydir:dir,todaysc:sc,})
            
        }
        });
  }
})

4.json文件（其实很简单只是改了一下导航栏标题）

{
  "usingComponents": {},
  "navigationBarTitleText": "当地天气"
 
}

五，最终结果