RELATEED CONSULTING
相关咨询
选择下列产品马上在线沟通
服务时间:8:30-17:00
你可能遇到了下面的问题
关闭右侧工具栏

新闻中心

这里有您想知道的互联网营销解决方案
微信小程序天气预报开发实例代码源码-创新互联

微信小程序 天气预报

创新互联是工信部颁发资质IDC服务器商,为用户提供优质的温江服务器托管服务

实例主要功能

  1. 自动定位所在城市
  2. 根据所定位的城市获取天气信息
  3. 显示未来几天的天气情况
  4. 查看当天天气的详情信息

先看效果图

微信小程序 天气预报开发实例代码源码

微信小程序-天气 首页

微信小程序 天气预报开发实例代码源码

微信小程序-天气 详情页

思路及编码部份自动定位所在城市

wx.getLocation:通过官方文档的API中可以看到wx.getLocation可以获取到当前的地理位置和速度,不过获取到的地理位置只是经纬度,而不是真正的城市名称,但我们可以根据这个经纬度来获取城市名称等信息(需要用到第三方接口),再通过城市名称和城市ID获取对应的天气信息。

在.js逻辑层增加函数:

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
})
}

另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


标题名称:微信小程序天气预报开发实例代码源码-创新互联
文章网址:http://lswzjz.com/article/gepch.html