预览图：

一、代码部分

1：WXML：

<!--pages/weather/weather.wxml-->
<view class="father_box"><!--上 --><view class="top_box"><!-- 背景图片 --><image class="bg-image" mode="widthFix" src="../../images/l.jpg"></image><text class="pm2_5">{{city}}:{{pm2_5}}</text><view class="temperature">{{weatherArray[0].temperature_curr}}</view><view class="weather">{{weatherArray[0].weather}}</view><view class="wind">{{weatherArray[0].wind}}</view><view class="pm2_5_remark">{{pm2_5_remark}}</view></view><!-- 下 --><view class="bottom_box"><view class="bottom_box_father"><view class="bottom_left"><view class="bottom_left_left"><view style="margin-bottom: 10rpx;">今天</view><view>{{weatherArray[0].weather}}</view></view><view class="bottom_left_right"><view style="margin-bottom: 10rpx;">{{weatherArray[0].temperature}}</view><view><image class="icon" mode="widthFix" src="{{weatherArray[0].weather_icon}}"></image></view></view></view><view style="height: 120rpx;width: 3rpx;background-color: #b9b9b9;"></view><view class="bottom_right"><view class="bottom_right_left"><view style="margin-bottom: 10rpx;">明天</view><view>{{weatherArray[1].weather}}</view></view><view class="bottom_right_right"><view style="margin-bottom: 10rpx;">{{weatherArray[1].temperature}}</view><view><image class="icon" mode="widthFix" src="{{weatherArray[1].weather_icon}}"></image></view></view></view></view></view>
</view>

2：WXSS：

/* pages/weather/weather.wxss */
page{height: 100%;width: 100%;
}
.bg-image
{ width : 100%;position: fixed;  z-index: -1;
}
.father_box{height: 100%;width: 100%;display: flex;flex-direction: column;
}
/* 上 */
.top_box{flex: 4;
}
.pm2_5{color: white;padding: 10rpx;margin-left: 20rpx;background-color:violet
}
.temperature{text-align: center;margin-top: 10%;color: white;font-size:100rpx;
}
.weather{text-align: center;color: white;font-size:40rpx;padding-right: 20rpx;
}
.wind{text-align: center;color: white;font-size:40rpx;
}
.pm2_5_remark{margin-top: 15%;text-align: center;color: white;font-size:40rpx;
}
/* 下 */
.bottom_box{flex: 1;background-color:white ;}
.bottom_box_father{display: flex;height: 100%;width: 100%;margin-right: 10rpx;box-sizing:content-box;background-color: white;align-items: center;justify-content: center;
}
.bottom_left{flex: 1;display: flex;align-items: center;justify-content: center;
}
.bottom_left_left{flex: 1;margin-left: 30rpx;
}
.bottom_left_right{flex: 1;
}
.bottom_right{flex: 1;display: flex;align-items: center;justify-content: center;
}
.bottom_right_left{flex: 1;margin-left: 30rpx;
}
.icon{width: 60rpx;
}
.bottom_right_right{flex: 1;
}

3：JS:

var QQMapWX = require('../../libs/qqmap-wx-jssdk');    // 百度地图js包文件
Page({data: {city: "",weaid: "",    // 城市气象编号// 数据pm2_5: "",pm2_5_remark: "",weatherArray: [{temperature: "",temperature_curr: "",weather: "",wind: "",weather_icon:""}, {temperature: "",weather: "",weather_icon:""}],pd:[false,false,false]},onLoad(e) {wx.showLoading({title: '拼命加载中...',})this.getLocationInfo()},// 获取当前城市getLocationInfo() {let _this = thislet qqmapsdk = new QQMapWX({key: 'NL2BZ-6A46Q-GDY5V-GHTNI-SEL3S-Q6FM5'});wx.getLocation({isHighAccuracy: true,type: "gcj02",success(res) {let { latitude, longitude } = resqqmapsdk.reverseGeocoder({location: {latitude: latitude,longitude: longitude},success: function (res) {console.log(res.result)let city = res.result.address_component.city_this.setData({ city })_this.getcityId()},fail: function (res) {console.log(res);},});}})},// 获取城市编号getcityId() {let _this = thiswx.request({url: 'http://api.k780.com/?app=weather.city&areaType=cn&appkey=10003&sign=b59bc3ef6191eb9f747dd4e83c99f2a4&format=json',method: "GET",dataType: "json",success: (res) => {let dtList = res.data.result.dtListfor (var key in dtList) {if (_this.data.city.indexOf(dtList[key].cityNm) != -1) {_this.setData({ weaid: dtList[key].weaId })break}}_this.SearchCityWeather()},fail: (result) => {wx.showToast({title: '获取城市编号失败',icon: "error"})},})},// 获取当前城市的天气指数SearchCityWeather() {let _this = this// 获取今天天气wx.request({url: 'http://api.k780.com:88/?app=weather.today&weaid=' + _this.data.weaid + '&appkey=10003&sign=b59bc3ef6191eb9f747dd4e83c99f2a4&format=json',method: "GET",dataType: "json",success: (res) => {let resultArray = res.data.resultconsole.log(resultArray)_this.setData({'weatherArray[0].temperature': resultArray.temperature,'weatherArray[0].temperature_curr': resultArray.temperature_curr,'weatherArray[0].weather': resultArray.weather + resultArray.weather_curr,'weatherArray[0].wind': resultArray.wind + " " + resultArray.winp})},fail: (result) => {wx.showToast({title: '获取当前城市天气失败',icon: "error"})},complete:()=>{_this.setData({'pd[0]':true})}})// 获取pm2.5wx.request({url: 'http://api.k780.com/?app=weather.pm25&weaId=' + _this.data.weaid + '&appkey=10003&sign=b59bc3ef6191eb9f747dd4e83c99f2a4&format=json',method: "GET",dataType: "json",success: (res) => {let resultArray = res.data.resultconsole.log(resultArray)_this.setData({pm2_5: resultArray.aqi_levnm,pm2_5_remark: resultArray.aqi_remark})},fail: (result) => {wx.showToast({title: '获取当前城市天气失败',icon: "error"})},complete:()=>{_this.setData({'pd[1]':true})}})// 获取未来天气wx.request({url: 'http://api.k780.com:88/?app=weather.future&weaid='+_this.data.weaid+'&appkey=10003&sign=b59bc3ef6191eb9f747dd4e83c99f2a4&format=json',method: "GET",dataType: "json",success: (res) => {let resultArray = res.data.resultconsole.log(resultArray)_this.setData({'weatherArray[0].weather_icon': resultArray[0].weather_icon,'weatherArray[1].weather_icon': resultArray[1].weather_icon,'weatherArray[1].temperature': resultArray[1].temperature,'weatherArray[1].weather': resultArray[1].weather})},fail: (result) => {wx.showToast({title: '获取未来城市天气失败',icon:"error"})},complete:()=>{_this.setData({'pd[2]':true})}})let Interval = setInterval(()=>{if(_this.data.pd[0] && _this.data.pd[1] &&_this.data.pd[2]){wx.hideLoading()console.log("关闭")clearInterval(Interval)}},500);}
})

4：下载地图包：

不了解的可以通过这个链接查看，其中有关于小程序定位的内容，本章也使用到过：微信小程序获取位置信息_微信小程序获取当前位置_鸢与浅忆的博客-CSDN博客

5：app.json:

和page、window同级

"permission": {"scope.userLocation": {"desc": "你的位置信息将用于小程序获取当前定位信息"}}

二、接口文档

该项目使用的接口为nowapi平台提供的接口，官方链接：实时天气接口 - 数据接口 - NowAPI

链接中使用的appkey、sign是免费，但每天有一个次数限制，用来做一个简单的项目足够了。

2.1、获取城市列表

URL:http://api.k780.com/?app=weather.city&areaType=cn&appkey=10003&sign=b59bc3ef6191eb9f747dd4e83c99f2a4&format=json

参数	作用
app	接口此处应为:weather.city
areaType	cn:国内城市 gb:国外城市

2.2、获取当前城市天气

URL: http://api.k780.com:88/?app=weather.today&weaid=94&appkey=10003&sign=b59bc3ef6191eb9f747dd4e83c99f2a4&format=json

参数	作用
weaid	城市气象编号
appkey	10003

2.3、获取未来5天城市天气

URL:http://api.k780.com:88/?app=weather.future&weaid=101280601&appkey=10003&sign=b59bc3ef6191eb9f747dd4e83c99f2a4&format=json

欢迎大家在评论区多多交流留言。

微信小程序 - 简易天气预报相关推荐

微信小程序-简易计算器
代码地址如下: http://www.demodashi.com/demo/14210.html 一.前期准备工作软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.c ...
微信小程序简易搭建之框架/组件库
微信小程序简易搭建之框架/组件库 Vant weapp 下面看看如何导入 https://github.com/youzan/vant-weapp 使用教程: 1.下载后找到dist 2. 在你的项目 ...
微信小程序之天气预报
入门小程序之后跟着视频做了一个简易版的"天气预报",在手机运行的话能准确定位所在城市并查询到相应的天气状况,页面就一个,功能也不复杂,主要调用了百度地图api查询所在位置和和天气a ...
微信小程序实现天气预报功能（内置自动定位）（源码）
文章目录序言样例图和风天气API获取微信小程序后台域名配置页面代码相关问题源码留言序言此小程序使用的是最新和风天气API. 样例图和风天气API获取在这个小程序中我使用的是和风 ...
微信小程序实现天气预报功能(附源码)
目录前言效果图天气API获取微信小程序后台域名配置页面代码注意问题(必看) 留言前言最近在学小程序开发,刚好学到天气预报功能的制作,于是给大家分享下. 效果图天气API获取这里我用 ...
微信小程序实现天气预报功能（支持自动定位）（附源码）
目录前言效果图天气API获取微信小程序后台域名配置页面代码注意问题(必看) 源码留言前言由于和风天气API的更新,之前写的那篇文章可能会出现版本不兼容的情况.所以更新了这个 ...
微信小程序--简易计算器
一.项目概述本文主要介绍了微信小程序的一个简易计算器的实现代码实例. 实现的功能有: 实现简单的加减乘除删除全部清空小程序页面目录如下: 计算器页面如下: 二.WXML文件编写首先我们对计算 ...
微信小程序简易评分样式
微信小程序的简单评分功能实现注意:以下代码加入了Node框架的脚本直接上代码 JS: Page({ data:{ }, showModal:function(){ wx.showModal({ t ...
微信小程序实例——天气预报开发笔记（进行中...）
★ 背景 [提示]:正在补充更新中- 首先,附上一张效果图. 之前就有关注过小程序的发展,感觉可以抽一点的时间来学习一下,通过官方文档以及提供的示例 Demo,发现兴趣挺高,不失为一个可以扩展自身技能 ...

微信小程序 - 简易天气预报

一、代码部分

二、接口文档

微信小程序 - 简易天气预报相关推荐

最新文章

热门文章

微信小程序 - 简易天气预报

一、代码部分

二、 接口文档

微信小程序 - 简易天气预报相关推荐

最新文章

热门文章

二、接口文档