微信小程序开发——调用免费天气api接口

一、使用高德天气接口：
- （一）注册并获取Key
- （二）调用API接口
二、使用“天气API”提供的接口
- （一）注册获取APPID和APPSecret
- （二）调用API接口

开发一个现实天气信息的微信小程序，主要的是从网上请求到天气信息数据，网上也有很多介绍免费天气api接口的，我试了好多没法用，或者就是像百度api一样弄了半天没搞明白，我这里使用了高德和“天气API”提供的两种天气api接口。

一、使用高德天气接口：

网址链接为：

https://lbs.amap.com/api/webservice/guide/api/weatherinfo

（一）注册并获取Key

使用时候需要注册获取Key，因为是阿里旗下公司，可以使用支付宝扫码注册。注册后在图中所示的页面中点击 申请Key：

在打开的页面中点击右上角的“创建新应用”，填写应用名称和类型，我这里随便把应用名称定为Weather，创建好之后点击“添加”

可以给Key添加名字，服务平台注意要选择 Web服务，这个选项才能使用天气查询API（这里不需要再点击它了）

提交之后就可以找到申请的Key了，这时候就可以去使用API了。

（二）调用API接口

页面中介绍了接口地址和请求方式，以及请求参数，应该比较好理解。
注意，使用微信开发者工具进行开发时，需要将网址添加到request的合法域名中，如果只是调试而不发布，可以在开发者工具本地设置中勾选不校验合法域名、web-view（业务域名）、TLS版本以及HTTPS证书，不过这样的设置是没法发布的，最后发布还是需要将网址添加到request的合法域名中。
根据请求参数，我们需要添加Key和city城市编码，我们可以先测试下：

新建项目后，在index.js（或者新建一个页面）中加入以下代码：

//index.js
//获取应用实例
const app = getApp()Page({data: {},onLoad:function(){var self = this;wx.request({url: 'https://restapi.amap.com/v3/weather/weatherInfo',data:{'key': '***************************',//填入自己申请到的Key'city': '120102',},header:{'content-type': 'application/json'},success:function(res){console.log(res.data);}})}
})

上面代码会在页面加载好后向网络请求数据，在console中可以看到返回的信息：

其中返回的数据在api介绍页面中都有介绍，默认返回的是实况天气，也可以在请求中将extensions选项设置为all，就可以得到当天以及以后三天的天气信息，如图：

得到这些信息之后，后面的步骤就简单了，可以在页面中展示出来，我这里写了一个很简单的展示页面，没有调格式，有兴趣的可以再编写wxss文件调整样式。

index.wxml

<!--index.wxml-->
<view class="content"><view class="info"> 城市编码：{{adcode}}</view><view class="info"> 所在省份：{{province}}</view><view class="info"> 城市：{{city}}</view><view class="info">天气现象：{{weather}}</view><view class="info"> 实时气温：{{temperature}}℃</view><view class="info"> 风向：{{winddirection}}</view><view class="info"> 风力：{{windpower}}</view><view class="info"> 空气湿度：{{humidity}}%</view><view class="info"> 发布时间：{{reporttime}}</view>
</view>

index.js

//index.js
//这里只获取了实况天气信息，没有用预测信息
//获取应用实例
const app = getApp()Page({data: {adcode:'',city:'',humidity:'',province:'',reporttime:'',temperature:'',weather:'',winddirection:'',windpower:'',},onLoad:function(){var self = this;wx.request({url: 'https://restapi.amap.com/v3/weather/weatherInfo',data:{'key': '*****************************',//改为自己申请的Key'city': '120102','extensions': 'base'},header:{'content-type': 'application/json'},success:function(res){console.log(res.data);self.setData({adcode: res.data.lives[0].adcode,city: res.data.lives[0].city,humidity: res.data.lives[0].humidity,province: res.data.lives[0].province,temperature: res.data.lives[0].temperature,reporttime: res.data.lives[0].reporttime,weather: res.data.lives[0].weather,winddirection: res.data.lives[0].winddirection,windpower: res.data.lives[0].windpower})}})}
})

结果如图：

二、使用“天气API”提供的接口

网址链接：
http://www.tianqiapi.com/

（一）注册获取APPID和APPSecret

比较简单，就是注册完之后就可以在控制台中找到APPID和APPSecret了：

（二）调用API接口

比如我们想查看实况天气，可以点击进入**“专业实况天气v61”**

此时可以看到，在给出的页面中会出现一条请求示例，并且示例中已经将所申请到的APPID和APPSecret，以及version（这个api在申请数据时需要提供的参数）都包含在里面了：

可以直接将该示例放到请求url中。
同样我们还是简单看一下网络数据请求：
index.js

//index.js
//获取应用实例
const app = getApp()Page({data: {},onLoad:function(){var self = this;wx.request({//根据自己申请到的appid和appsecret替换下面的*符号url: 'https://v0.yiketianqi.com/api?version=v61&appid=******&appsecret=*******',data:{},header:{'content-type': 'application/json'},success:function(res){console.log(res.data);}})}
})

可以看到这个接口给出的天气数据十分详细：

申请的另一种格式还可以把参数放到data当中，如
index.js

//index.js
//获取应用实例
const app = getApp()Page({data: {},onLoad:function(){var self = this;wx.request({url: 'https://v0.yiketianqi.com/api',data:{'appid':'******',//填入自己申请到的appid'appsecret': '******',//填入自己申请到的appsecret'version': 'v61'},header:{'content-type': 'application/json'},success:function(res){console.log(res.data);}})}
})

可以得到和上面同样的结果。根据该网站提供所提供的不同接口，可以尝试不同的version，得到不同的信息。

微信小程序开发——调用免费天气api接口（高德、天气API）相关推荐

微信小程序前台调用讯飞语音识别接口
开整之前我这边微信小程序调用讯飞的接口还是发一段音频到后台再去连接讯飞的websocket 真的贼慢要是两三秒的还好稍微长一点就GG 最近突然发现微信小程序有PCM格式了所以就直接用小程序 ...
微信小程序开发笔记—天气获取显示
文章目录一.实现效果二.天气查询API 三.微信小程序设计思路 1.页面跳转 2.获取天气信息 3.信息显示四.程序实现 1.页面跳转功能 2.获取天气信息 2.1.变量声明 2.2.获取所在地 ...
微信小程序开发 Request Headers: Provisional headers are shown
在微信小程序开发的时候,写了两个API请求: 请求A: //请求Awx.request({url: 'https://wx.baidu.com/api/wx/getBallByDate',method ...
微信小程序开发video播放问题
问题1:微信小程序开发中,如果请求接口为本地数据,真机测试的时候video无法播放,开发工具可以正常播放解决: 真机测试的时候需要打开控制台vconsel 问题2:video组件的播放按钮显示设置无 ...
微信小程序开发系列六：微信框架API的调用
微信小程序开发系列教程微信小程序开发系列一:微信小程序的申请和开发环境的搭建微信小程序开发系列二:微信小程序的视图设计微信小程序开发系列三:微信小程序的调试方法微信小程序开发系列四:微信小程序 ...
微信小程序开发--利用和风天气API实现天气预报小程序
本来是参照<微信小程序开发实战>做一个天气预报小程序的,实际运行的时候提示错误,code 400,参数错误.说明问题应该出在查询API的语句上,没有返回结果. 查阅后才知道,可能书籍出版时 ...
微信小程序开发（3） - 微信小程序调用摄像头静默隐藏拍照功能实现方式
微信小程序最近非常火热,小编最近做了一个微信小程序开发新项目,使用小程序开发考试系统,在使用App参加考试的时候调用摄像头抓拍用户是否作弊,在开发过程中遇到点问题,下面小编把问题描述和解决方法分享给大 ...
如何在微信小程序中调用腾讯地图api
微信小程序的地图api是非常有限的,如果要搜索地图上的位置,比如附近的医院.学校等,就需要使用地图api,使用腾讯地图api的过程如下: 一.开发者申请腾讯地图进入官网http://lbs.qq.c ...
python天气查询小程序加背景图_微信小程序开发背景图显示功能
这两天开发微信小程序,在设置背景图片时,发现在wxss里面设置background-image:(url) 属性,不管是开发工具还是线上都无法显示.经过查资料发现,background-image只能 ...
微信小程序开发实录——每日速递
微信小程序开发实录--每日速递选题简介工具使用心得选题简介新闻版块创建项目数据来源(知乎日报) 基本页编写详情页编写数据获取 WxParse 样式表转换转换方法样式文件的引用天气 ...

微信小程序开发——调用免费天气api接口（高德、天气API）

微信小程序开发——调用免费天气api接口

一、使用高德天气接口：

（一）注册并获取Key

（二）调用API接口

二、使用“天气API”提供的接口

（一）注册获取APPID和APPSecret

（二）调用API接口

微信小程序开发——调用免费天气api接口（高德、天气API）相关推荐

最新文章

热门文章