专栏首页极乐技术社区微信小程序+和风天气完成天气预报

微信小程序+和风天气完成天气预报

《冷暖自知》天气小程序

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

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

步骤:

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

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

代码

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>

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

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

效果

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

本文作者: 程会玩 原文地址:微信小程序+和风天气完成天气预报 - 程会玩 - 博客园 声明:本文来源于网络,版权归作者所有,不代表本专栏观点,有什么问题请联系我,谢谢!

原文链接:https://zhuanlan.zhihu.com/p/33596283

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 微信小程序左右滑动切换图片酷炫效果(附效果)

    开门见山,先上效果吧!感觉可以的用的上的再往下看。

    极乐君
  • 小灯灯实战系列《三》微信小程序:仿今日头条(下)

    接着上一篇  上一篇文章中,我们已经完成了头条的新闻列表、新闻详情功能了,但是还存在一些值得优化的地方,以及评论功能没有加上。  欢迎Star Github开源...

    极乐君
  • 干货 | 扒一扒小程序开发中遇到的那些坑!

    开发小程序的过程中踩的坑不可谓不多,而有些坑也实在是让人郁闷,不扒一扒难以平我心头之愤呐。

    极乐君
  • 小程序url传参如何写变量

    蓓蕾心晴
  • View官方文档

    nimomeng
  • 实习入职第二十天:从setRecyclerListener看listView回收机制

    关于这个  setRecyclerListener函数在解决   listView滑出屏幕(包括向上滑出和向下滑出)处理相关UI操作或者释放相关资源,真的很好用...

    wust小吴
  • Android6.0源码分析之View(一)

    目前对于view还处于学习阶段,本来打算学习结束之后再写一篇进行总结,但是发现自己自制力太差,学习效率太低,所以在此,边学边写博客,不仅督促自己完成对view的...

    fanfan
  • Android中View研究自学之路

    写这篇博客呢是在研究了view将近一个月之后,算是对自己的学习做一个总结,进而反思一下学习方法,本博文不涉及代码分析。

    fanfan
  • Android "巧"仿蚂蚁森林水滴动效

    本文重在思路和性能,就不介绍自定义view和handler避免内存泄漏或是导致空指针这些了,喜欢请clone项目并star、fork一下,感谢各位。

    CCCruch
  • Android中View研究自学之路 Android6.0源码分析之View(一)Android6.0源码分析之View(二)

    Android中View研究自学之路 http://blog.csdn.net/zrf1335348191/article/details/54171263 ...

    fanfan

扫码关注云+社区

领取腾讯云代金券