1.先look下效果图
2.思路分析
2.1布局
2.2调用接口
2.3把接口显示在界面上
main.wxml <view class="content"> <view class="today"> <view class="info"> <view class="temp"> {{today.wendu}}℃ </view> <view class="weather"> {{today.todayInfo.type}} {{today.todayInfo.fengxiang}} {{today.todayInfo.fengli}}</view> <view > 友情提示: {{today.ganmao}}</view> <view class="city"> {{newCity}}</view> </view> </view> <import src="../template/itemtpl"/> <view class="future" > <block wx:for="{{future}}"> <template is="future-item" data="{{item}}"/> </block> </view> </view> |
注意:在编辑HTML文件的时候,我们先把文件里面的框架先打起来,然后在去写CSS,这样才能写出优雅。
.info{ padding: 20px; background: #fff; background: rgba(0, 0, 0, .5); box-shadow: 10px,10px,20px,rgba(0, 0, 0, .5); border-radius: 5px; } .today{ padding-top: 30rpx; height: 50%; } .temp{ font-size: 50px; text-align: center; } .weather{ text-align: center; margin-bottom: 20rpx; } .city{ color: white; font-size: 16px; text-align: right; margin-right: 10rpx; margin-top: 30rpx; } .future{ display: flex; flex-direction: row; height: 60%; padding-left: 5rpx; background:#FFFFFF; background:rgba(0, 0, 0, 0.1); box-shadow:10px 10px 20px rgba(0,0,0,0.5); text-align: center; padding-top:10rpx; padding-bottom:20rpx; margin-top: 270rpx; margin-bottom: 200rpx; } .future-item{ min-height:320rpx; width: 165rpx; margin-left: 10rpx; margin-right: 10rpx; border: 1px solid coral; border-radius:10px; padding-top:10rpx; } .future-item view{ margin-top:10px; } |
这个就没有什么可说的了,就是css样式。
main.js Page({ data:{ newCity:" ", }, onLoad:function(options){ // 页面初始化 options为页面跳转所带来的参数 this.loadInfo(); }, onReady:function(){ // 页面渲染完成 }, onShow:function(){ // 页面显示 }, onHide:function(){ // 页面隐藏 }, onUnload:function(){ // 页面关闭 }, loadInfo:function(){ var _this=this; wx.getLocation({ type: 'gcj02', //返回可以用于wx.openLocation的经纬度 success: function(res) { var latitude = res.latitude var longitude = res.longitude console.log(latitude+"+++"+longitude); _this.loadCity(latitude,longitude); } }) }, loadCity:function(latitude,longitude){ var _this=this; wx.request({ url: 'https://api.map.baidu.com/geocoder/v2/?ak=NRdxFogcgGCystGBQBmULnfaHVikzfyk&location='+latitude+","+longitude+"&output=json", //仅为示例,并非真实的接口地址 header: { 'content-type': 'application/json' }, success: function(res) { console.log(res); var City=res.data.result.addressComponent.city; // console.log(City); City=City.replace("市","") _this.setData({newCity:City}); _this.loadWeather(City); } }) }, loadWeather:function(newcity){ var _this=this; wx.request({ url: 'https://wthrcdn.etouch.cn/weather_mini?city='+newcity, //仅为示例,并非真实的接口地址 header: { 'content-type': 'application/json' }, success: function(res) { console.log(res); var future=res.data.data.forecast; var todayInfo=future.shift(); var today=res.data.data; today.todayInfo=todayInfo; _this.setData({future:future,today:today}); } }) } }) |
在业务逻辑层上,要这样考虑:获取天气信息,需要获得定位地址;如何获取定位地址?找到定位地址的经纬度?那么如何找到经纬度呢?通过ip?还是有其他方式?经查找百度地图有提供现成的api接口?
先想要实现一个功能,你需要什么东西,然后再想着如何获得这些东西!