微信小程序内天气预报开发所涉及的代码分析

data:{

  weatherApikey:'', //天气apikey，在http://apistore.baidu.com 上申请

  city:'', //城市名称

  areaid:'', //城市对应的id

  curWd:{}, //当天天气情况

  indexs:{}, //当天天气详情说明

  forecast:{} //未来4天的天气情况

},

onLoad:function(options){

  // 生命周期函数--监听页面加载

  this.setData({weatherApikey:getApp().globalData.weatherApikey});

  this.loadLocation();

},

//获取当前的位置信息，即经纬度

loadLocation: function() {

 var page = this;

 wx.getLocation({

  type: 'gcj02', // 默认为 wgs84 返回 gps 坐标，gcj02 返回可用于 wx.openLocation 的坐标

  success: function(res){

   // success

   var latitude = res.latitude;

   var longitude = res.longitude;

   //获取城市

   page.loadCity(latitude, longitude);

  }

 })

},

//通过经纬度获取城市

loadCity: function(latitude, longitude) {

 var page = this;

 //这个key是自己在http://apistore.baidu.com上申请的

 var key = "XSWBZ-EVQ3V-UMLPA-U4TP6-6MQFZ-UUFSL";

 var url = "http://apis.map.qq.com/ws/geocoder/v1/?location="+latitude+","+longitude+"&key="+key+"&get_poi=1";

 wx.request({

  url: url,

  data: {},

  method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT

  // header: {}, // 设置请求的 header

  success: function(res){

   // success

    var city = res.data.result.address_component.city;

    city = city.replace("市", ""); //将“市”去掉，要不然取不了天气信息

    page.setData({city: city});

    page.loadId(city);

  }

 })

},

//通过城市名称获取城市的唯一ID

loadId: function(city) {

 var page = this;

 var url = "http://apis.baidu.com/apistore/weatherservice/citylist";

 wx.request({

  url: url,

  data: {

    cityname: city

  },

  header: {

    apikey:page.data.weatherApikey

  },

  method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT

  success: function(res){

   // success

   var cityid = res.data.retData[0].area_id;

   page.setData({areaid: cityid});

   page.loadWeather(city, cityid);

  }

 })

},

//通过城市名称和城市ID获取天气情况

loadWeather: function(city, areaId) {

 var page = this;

 var url = "http://apis.baidu.com/apistore/weatherservice/recentweathers";

 wx.request({

  url: url,

  data: {

    cityname:city,

    cityid: areaId

  },

  header: {

    apikey: page.data.weatherApikey

  },

  method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT

  success: function(res){

   // success

   page.setData({curWd : res.data.retData.today, indexs: res.data.retData.today.index, forecast:res.data.retData.forecast});

  }

 })

},

//事件绑定，跳转到天气详情页面

gotoDetail: function(event) {

// console.log(this.data.areaid+"==在这里跳转=="+this.data.city);

wx.navigateTo({

 url: '../detail/detail?city='+this.data.city+"&cityid="+this.data.areaid

})

}

<template name="today-tpl">

  <view class="today">

    <view class="city">{{city}}</view>

    <view class="date">{{curWd.date}} {{curWd.week}}</view>

    <view class="temp">{{curWd.curTemp}}</view>

    <view class="weather">{{curWd.type}} {{curWd.lowtemp}}/{{curWd.hightemp}}</view>

    <view class="wd">{{curWd.wd}}</view>

  </view>

</template>