微信小程序连接百度地图API实现天气查询

一、获取百度地图开放平台天气查询API
二、添加百度天气查询域名
三、微信小程序代码

一、获取百度地图开放平台天气查询API

进入百度地图开放平台.（没有账号的需要先申请一下，获取api不需要收费）

二、添加百度天气查询域名

然后进入微信公众平台

在request合法域名中添加域名 api.map.baidu.com
添加域名完了，接下来是代码

三、微信小程序代码

这里的代码我是从哔哩哔哩上学的，但是因为它的接口是用的天气网的接口是http协议的，现在微信小程序只支持https的，所以我将他的代码改了一下（刚学小程序，可能有很多问题，多多见谅）

// js代码
Page({/*** 页面的初始数据*/data: {city:"",today:{},future:{},pollution:"",},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {this.loadInfo();},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {},loadInfo:function(){var page=this;wx.getLocation({type: 'gcj02',success:function(res) {var latitude = res.latitudevar longitude = res.longitudeconsole.log(latitude, longitude);page.loadCity(latitude, longitude)}})},loadCity: function (latitude, longitude){var page = this;wx.request({url: 'https://api.map.baidu.com/geocoder/v2/?ak=输入你自己的AK&location=' + latitude + ',' + longitude +'&output=json',header:{'Content-Type':'application/json'},success:function(res){var city = res.data.result.addressComponent.city;city=city.replace("市","")page.setData({city:city});page.loadWeather(city);}});},loadWeather: function (city) {var page = this;wx.request({url: 'https://api.map.baidu.com/telematics/v3/weather/?ak=输入你自己的AK&location=' + city + '&output=json',header: {'Content-Type': 'application/json'},success: function (res) {console.info(res);var a = new RegExp("[0-1][0-9]月[0-3][0-9]日","g");var future=res.data.results[0].weather_data;var today = res.data.results[0];var pollution;future[0].date = future[0].date.replace("周一 ", "");future[0].date = future[0].date.replace("周二 ", "");future[0].date = future[0].date.replace("周三 ", "");future[0].date = future[0].date.replace("周四 ", "");future[0].date = future[0].date.replace("周五 ", "");future[0].date = future[0].date.replace("周六 ", "");future[0].date = future[0].date.replace("周日 ", "");future[0].date = future[0].date.replace(a,"");future[0].date = future[0].date.replace(" (实时：", "");future[0].date = future[0].date.replace("℃)", "");if (today.pm25<=35){pollution=" 空气质量优";}else if (today.pm25 > 35 && today.pm25<=75) {pollution = " 空气质量良";}else if (today.pm25 > 75 && today.pm25<=115) {pollution = " 轻度污染";}else if (today.pm25 > 115 && today.pm25<=150) {pollution = " 中度污染";}else if (today.pm25 > 150 && today.pm25<=250) {pollution = " 重度污染";}else if (today.pm25 > 250) {pollution = " 严重污染";}page.setData({today:today,future:future,pollution:pollution});}});}
})

有两处需要修改AK的地方

//wxml<view class="content" mode="widthFix" ><view  class='today'><view  class='info'><view class='temp'>{{future[0].date}}°C</view><view class='weather'>PM25：{{today.pm25}}{{pollution}}</view><view>友情提示：{{today.index[0].des}}</view><view class='city'>{{city}}</view></view></view><view class='future'><view class='future-item'><view>今天</view><view> {{future[0].temperature}}</view><view>{{future[0].weather}}</view><view>{{future[0].wind}} </view></view><view class='future-item'><view>{{future[1].date}}</view><view> {{future[1].temperature}}</view><view>{{future[1].weather}}</view><view>{{future[1].wind}} </view></view><view class='future-item'><view>{{future[2].date}}</view><view> {{future[2].temperature}}</view><view>{{future[2].weather}}</view><view>{{future[2].wind}} </view></view><view class='future-item'><view>{{future[3].date}}</view><view> {{future[3].temperature}}</view><view>{{future[3].weather}}</view><view>{{future[3].wind}} </view> </view></view></view>

// json
{"navigationBarTitleText": "天气预报"
}

// wxss.content{font-family: 微软雅黑,宋体;font-size: 14px;background-size: cover;height:100vh;width: 100vw;background-image: url("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1553696593722&di=d447006d38b37385438443163d9860e8&imgtype=0&src=http%3A%2F%2Fp1.gexing.com%2FG1%2FM00%2F75%2FC3%2FrBACE1MvA5ngraHSAAESYDiqWJ8441.jpg");color: #ffffff;}
.info{padding: 5px;background: #ffffff;background: rgba(0, 0, 0, 0.5);box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);
}
.today{padding-top: 50rpx;height: 50%;
}
.city{color: white;font-size: 16px;text-align: right;margin-right: 10rpx;margin-top: 30rpx;
}
.temp{font-size: 50px;text-align: center;
}
.weather{text-align: center;}.future{display: flex;flex-direction:row;height: 40%;padding-left: 5rpx;background: #ffffff;background: rgba(247, 238, 238, 0.1); box-shadow: 10px 10px 20px rgba(252, 249, 249, 0.5);text-align: center;padding-top: 10rpx;padding-bottom: 20rpx; }.future-item{min-height: 100%;width: 165rpx;margin-left: 10rpx;margin-right: 10rpx;border: 1px solid rgb(170, 156, 150);border-radius: 10px;padding-top: 10rpx;}.future-item view{margin-top: 10px;}

最后完成应该是：

可以在Console栏中查看API的一些信息：

微信小程序连接百度地图API实现天气查询相关推荐

微信小程序百度地图API移动选点
微信小程序百度地图API移动选点本文首发微信小程序百度地图API移动选点因为业务需要使用百度地图API,参考一位大佬编写腾讯API的思路和方法,改造成百度地图API移动选点. 思路: wxml前端 ...
高德地图api调用demo_微信小程序----高德地图API实现的DEMO
[实例简介] 微信小程序----高德地图API实现的周边,天气,路线规划,地址详情等的DEMO.简单的效果,问一下官方能不能不要乱涨积分,你们涨积分,作者被骂!我真的很失望,再这样,我就不上传资源了! ...
（更新源码）AndroidStudio新手开发：天气app（百度地图api+和风天气api+城市查询+折线展示）
AndroidStudio新手开发:天气app(百度地图api+和风天气api+城市查询+折线展示) 1.内容简介 2.环境配置 3.导入他人demo 4.AS项目分析 5.天气项目流程 6.数据探寻 ...
利用百度地图API进行车辆查询并用鼠标拾点获取经纬度
利用百度地图API查询公交车线路位置信息以及鼠标取点的经纬度先从官网申请秘钥http://lbsyun.baidu.com/ 2. 如果是用jsp写动态web项目,在jsp页面中引入js库,并且引入 ...
right 微信小程序_微信小程序高德地图API
本文章介绍微信小程序调用高德地图API的过程,使用高德定位功能做演示. 微信小程序目前支持百度地图.高德地图.腾讯地图.用法可以说是基本完全一样,本文章以高德为例,简单说一下他们的区别,高德地图精度应 ...
微信小程序---高德地图API
本文章介绍微信小程序调用高德地图API的过程,使用高德定位功能做演示. 微信小程序目前支持百度地图.高德地图.腾讯地图.用法可以说是基本完全一样,本文章以高德为例,简单说一下他们的区别,高德地图精度应 ...
高德地图API实现天气查询
核心: 1.在高德地图注册开发者账号,获取key,取得调用API权限(用于个人学习的话,不用花钱的) 2.查看官方文档和demo,学习使用方法 --通过调用API,高德的服务器会传回一些带有天气数据的 ...
小程序通过API获取位置信息微信API 百度地图API
博客简介本篇博客介绍如何调用微信API获取经纬度,如何调用百度地图API获取实物位置微信API获取经纬度信息百度地图API获取实物位置微信小程序获取经纬度微信提供了获取当前设备经纬度的API ...
微信小程序城市定位(百度地图API)
概述微信小程序提供一些API(地址)用于获取当前用户的地理位置等信息,但无论是wx.getLocation,还是wx.chooseLocation均没有单独的字段表示国家与城市信息,仅有经纬度信息. ...

微信小程序连接百度地图API实现天气查询

微信小程序连接百度地图API实现天气查询

一、获取百度地图开放平台天气查询API

二、添加百度天气查询域名

三、微信小程序代码

微信小程序连接百度地图API实现天气查询相关推荐

最新文章

热门文章