微信小程序开发——调用免费天气api接口(高德、天气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,就可以得到当天以及以后三天的天气信息,如图:

  • 18
    点赞
  • 138
    收藏
    觉得还不错? 一键收藏
  • 8
    评论
好的,我会尽力回答你的问题。首先,获取用户位置需要在小程序使用微信提供的API,具体步骤如下: 1. 引入API ``` // 在页面的JS文件引入API const QQMapWX = require('../../utils/qqmap-wx-jssdk.min.js'); ``` 2. 初始化API ``` // 在页面的JS文件初始化API const qqmapsdk = new QQMapWX({ key: '你的腾讯地图开发者密钥' }); ``` 3. 获取用户位置 ``` // 在页面的JS文件获取用户位置 wx.getLocation({ type: 'gcj02', success(res) { const latitude = res.latitude; const longitude = res.longitude; qqmapsdk.reverseGeocoder({ location: { latitude, longitude }, success(res) { console.log(res); } }); }, fail(res) { console.log(res); } }); ``` 接下来是异常流处理的完整示例: ``` // 在页面的JS文件引入API const QQMapWX = require('../../utils/qqmap-wx-jssdk.min.js'); // 在页面的JS文件初始化API const qqmapsdk = new QQMapWX({ key: '你的腾讯地图开发者密钥' }); // 在页面的JS文件获取用户位置 wx.getLocation({ type: 'gcj02', success(res) { const latitude = res.latitude; const longitude = res.longitude; qqmapsdk.reverseGeocoder({ location: { latitude, longitude }, success(res) { console.log(res); }, fail(res) { console.log(res); wx.showToast({ title: '获取位置失败', icon: 'none' }); } }); }, fail(res) { console.log(res); wx.showModal({ title: '提示', content: '获取位置失败,请检查是否开启定位权限', showCancel: false, confirmText: '知道了' }); } }); ``` 在这个示例,我们通过`wx.getLocation`方法获取用户位置,并且使用`qqmapsdk.reverseGeocoder`方法将经纬度转换为详细地址信息。如果获取位置或转换地址信息失败,我们会使用`wx.showToast`或`wx.showModal`方法提醒用户。这就是异常流处理的完整示例。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值