微信小程序之天气预报

入门小程序之后跟着视频做了一个简易版的“天气预报”，在手机运行的话能准确定位所在城市并查询到相应的天气状况，页面就一个，功能也不复杂，主要调用了百度地图api查询所在位置和和天气api根据城市查询天气。效果图如下：

目录结构如下：

注册完百度地图api之后直接登录创建应用，如下图所示：

百度：https://www.heweather.com 之后注册登录后点击右上角的控制台获取个人认证key。再到API文档查看调用方法：

付费用户：https://api.heweather.com/v5/forecast?city=yourcity&key=yourkey

免费用户：https://free-api.heweather.com/v5/forecast?city=yourcity&key=yourkey

准备工作做好之后直接开始布局首页，可以参考下图：

个人感觉样式得多写，多尝试，还是比较“恶心”的，调样式！

app.json 文件代码如下：

{"pages":["pages/index/index"],"window":{"backgroundTextStyle":"light","navigationBarBackgroundColor": "#019CCA","navigationBarTitleText": "Weather Report","navigationBarTextStyle":"#fff"}
}

index.wxml 文件代码如下：

<!--index.wxml-->
<image class="bg" mode="aspectFill" src="../../icons/day.jpg"></image>
<view class="wrapper"><view class="curWeather"><view class="curTemperature"><view class="city">{{city}}  {{district}}</view><view class="street">{{street}}</view><view class="tmp">{{now.tmp}}°</view><view class="type">{{now.cond.txt}} | 空气 {{quality.city.qlty}}</view></view><view class="curExtern"><view class="wind"><view class="">{{now.wind.dir}}</view><view wx:if="{{now.wind.sc=='微风'}}" class="val">{{"<="}}2级</view><view wx:else class="val">{{now.wind.sc}}级</view></view><view class="line"></view><view class="relWet"><view class="">相对湿度</view><view class="val">{{now.hum}}%</view></view><view class="line"></view><view class="humanTmp"><view class="">体感温度</view><view class="val">{{now.fl}}°</view></view></view></view><view class="forecast"><block wx:for="{{forecast}}" wx:for-index="index" wx:for-item="fc"><view class="castItem"><view class="castDay">{{showday[index]}}</view><view class="castType"><image class="typeImg" src="../../icons/{{fc.cond.code_d}}.png"></image>{{fc.cond.txt_d}} | {{quality.city.qlty}}</view><view class="castTmp">{{fc.tmp.max}}° / {{fc.tmp.min}}°</view></view></block></view>
</view>

index.wxss 文件的代码如下：

/**index.wxss**/
.wrapper{width:100%;height:100%;box-sizing: border-box;position:absolute;/*绝对定位*/top:0;left:0;padding:30rpx;font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}.curWeather{height:650rpx;display: flex;flex-direction: column;/*纵向*/
}.bg{height:700rpx; width:750rpx;
}.curTemperature{color:#fff;font-size: 0.8em;flex-grow: 1;/*表示将剩余的空间分配给它*/
}.tmp{font-size: 5em;
}
.curExtern{display: flex;flex-direction: row;/*横向*/justify-content: space-around;color:#019CCA;
}
.val{text-align: center;font-size: 1.2em;
}
.line{border:0.9rpx solid #ff0;
}
.typeImg{width:50rpx;height:50rpx;vertical-align: middle;
}
.castItem{display: flex;flex-direction: row;justify-content: space-between;border-bottom: 1rpx solid #0ff; padding:50rpx 0;
}
.forecast{color:#019CCA;/*background: #aaa;*/margin-top:40rpx;
}

通过经纬度获取地理位置方法如下：

微信发送请求的 API 接口代码如下所示：

wx.request({url: 'test.php', //仅为示例，并非真实的接口地址data: {  //参数x: '' ,y: ''},header: {'content-type': 'application/json'},success: function(res) { //请求成功后执行的回调函数,res为返回的数据。console.log(res.data)}
})

index.js 代码如下：

//index.js
//获取应用实例
var app = getApp()
Page({data: {weekday:['周日','周一','周二','周三','周四','周五','周六'],showday:['今天','明天','']},//当页面加载完成onLoad: function () {var that = this;var date = new Date();console.log(date.getDay());that.setData({'showday[2]': this.data.weekday[(date.getDay() + 2)%7]});console.log(this.data.showday);wx.getLocation({success: function (res) {var latitude = res.latitude;//纬度var longitude = res.longitude;//经度console.log(latitude + "----" + longitude);that.getCity(latitude, longitude);//调用自己写的函数获得城市},})},//获得城市的函数定义getCity: function (lat, lng) {var url = "https://api.map.baidu.com/geocoder/v2/";var param = {location: lat + "," + lng,output: "json",//返回的数据格式ak: "MKABLw7PZssnQPy0BmnV2e6vcUyKWZxf"//地图api的ak};var that = this;//发出请求获取数据wx.request({url: url,data: param,success: function (res) {console.log(res);var city = res.data.result.addressComponent.city;var district = res.data.result.addressComponent.district;var street = res.data.result.addressComponent.street;that.setData({city: city,district: district,street: street});//调用自定义的函数获取天气信息city = city.substring(0, city.length - 1);//截掉最后一个字"市"that.getWeather(city);}})},//获取天气信息函数getWeather: function (city) {console.log(city);//注意传递的参数需是城市名或拼音等，详情见api文档，如果给的不是城市名，则无空气质量的值。城市名要去掉"市"字。var that = this;var url = "https://free-api.heweather.com/v5/weather";var param = {key: "4a555d4d1adc451d8ceeaa73869c9519",city: city};//发出请求wx.request({url: url,data: param,header: {'content-type': 'application/json'},success: function (res) {console.log(res);that.setData({now: res.data.HeWeather5[0].now, /** 今天天气情况数组 /forecast: res.data.HeWeather5[0].daily_forecast, /** 预报天气情况数组 /quality:res.data.HeWeather5[0].aqi /** 空气质量 */});}})}
});

数组访问方式查看微信小程序开发工具控制台输出数组查看：

好了！到此为止就完成了！！

微信小程序之天气预报相关推荐

微信小程序实现天气预报功能（内置自动定位）（源码）
文章目录序言样例图和风天气API获取微信小程序后台域名配置页面代码相关问题源码留言序言此小程序使用的是最新和风天气API. 样例图和风天气API获取在这个小程序中我使用的是和风 ...
微信小程序实现天气预报功能(附源码)
目录前言效果图天气API获取微信小程序后台域名配置页面代码注意问题(必看) 留言前言最近在学小程序开发,刚好学到天气预报功能的制作,于是给大家分享下. 效果图天气API获取这里我用 ...
微信小程序实现天气预报功能（支持自动定位）（附源码）
目录前言效果图天气API获取微信小程序后台域名配置页面代码注意问题(必看) 源码留言前言由于和风天气API的更新,之前写的那篇文章可能会出现版本不兼容的情况.所以更新了这个 ...
微信小程序实例——天气预报开发笔记（进行中...）
★ 背景 [提示]:正在补充更新中- 首先,附上一张效果图. 之前就有关注过小程序的发展,感觉可以抽一点的时间来学习一下,通过官方文档以及提供的示例 Demo,发现兴趣挺高,不失为一个可以扩展自身技能 ...
微信小程序（天气预报）开发文档
相关Demo以放到github上 ---------飞机------------https://github.com/193Eric/XCXdemo.git 小程序技术文档一．小程序应用分析 1. ...
微信小程序 - 简易天气预报
预览图: 一.代码部分 1:WXML:  <view class="father_box"> ...
微信小程序显示天气预报
1问题描述使用小程序使用天气api显示天气. 2算法描述首先打开微信开发者工具创建一个新的小程序项目,但是可以不选择任何模板,进入新建的小程序,先将index中的js,wxml,wxss中的原有格 ...
微信小程序实现天气预报接入
第一种方法: 1.后台接入第三方平台获取最近的天气预报信息 2.将数据返回给前端,此时返回信息的是最近所有的天气预报信息例如(当前8月3号10点整返回的会从当前8月3号10点整-8月5号10点整中 ...
c语言写天气预报程序,微信小程序实现天气预报功能
获取应用实例 var app = getApp() Page({ data: { //加载状态 loadingHidden: false,//当前温度 currentTemperature: '',/ ...

微信小程序之天气预报

微信小程序之天气预报相关推荐

最新文章

热门文章