【微信小程序】免费的高德地图api——获取天气（全过程）

介绍

这里是小编成长之路的历程，也是小编的学习之路。希望和各位大佬们一起成长！

以下为小编最喜欢的两句话：

要有最朴素的生活和最遥远的梦想，即使明天天寒地冻，山高水远，路远马亡。

一个人为什么要努力？ 我见过最好的答案就是：因为我喜欢的东西都很贵，我想去的地方都很远，我爱的人超完美。因此，小编想说：共勉！ 

---

目录

前言

一、去注册一个高德地图api的账号

二、获取天气前的准备工作

1、登录高德开放平台

2、进入控制台===》点击应用管理===》我的应用===》创建应用

 3、创建应用

​编辑

1)可以选择其他也可以选择天气 

 2)在刚刚创建的应用中，点击添加

 3）添加api key

4）获取到api key

三、获取amap-wx.js

四、创建一个微信小程序

weather.js

weather.wxml

weather.wxss

注意：需要添加高德地图的request域

---

高德官网：高德开放平台 | 高德地图API (amap.com)

1、登录高德开放平台

2、进入控制台===》点击应用管理===》我的应用===》创建应用

 3、创建应用

1)可以选择其他也可以选择天气 

 2)在刚刚创建的应用中，点击添加

 3）添加api key

 

4）获取到api key

获取实时天气数据-获取数据-开发指南-微信小程序插件|高德地图API (amap.com)

 如果是没有账号的话，可以看看小编的另一篇文章

 【微信小程序】注册小程序账号、做一个案例——你好我的小程序_determine ZandR的博客-CSDN博客

weather.js

注意：虽然数组为7但是展现的页面还是3天的数据所以小编建议数组长度还是为3，美观一点

// 引用百度地图微信小程序JSAPI模块let amap = require('../../lib/amap-wx.130.js');Page({    data: {    ak:"你刚刚获取的api key",    weatherData:'',    futureWeather:[]  },    onLoad: function (options) {    var that = this    var myAmapFun = new amap.AMapWX({ key: '你刚刚获取的api key' });    myAmapFun.getWeather({      type: 'forecast',//表示获取的是预报信息 默认live（实时天气）      success: function (data) {        console.log(data)        //成功回调        var weatherarr = new Array(7);        for (var i = 0; i < 7; i++) {          weatherarr[i] = data.forecast.casts[i + 1];//虽然数组长度为7但是只能获取到 后三天预报信息 今日的不保存        }        that.setData({          forecast: weatherarr        })      },      fail: function (info) {        //失败回调        console.log(info)      }    });  },    onReady: function () {  },    onShow: function () {  },    onHide: function () {  },    onUnload: function () {  },    onPullDownRefresh: function () {  },    onReachBottom: function () {  },    onShareAppMessage: function () {  }})

weather.wxml

  周一  周二  周三  周四  周五  周六  周日  天气：{{item.dayweather}}转{{item.nightweather}}  温度：{{item.daytemp}}℃  风速：{{item.daywind}} {{item.daypower}}

weather.wxss

page {

  background: -webkit-linear-gradient(bottom, lightblue, rgb(3, 171, 238), lightblue);

  color: #fff;

}

注意：需要添加高德地图的request域

 第一步：

第二步：

第三步：

因为百度地图的天气接口有点问题，所以小编用得是高德api的天气接口

• https://restapi.amap.com

最后展示出来的页面是这样的

 效果出来了，但是页面没写什么样式，美感好的同学可以自己写一下样式。

感谢各位大佬的观看，希望大佬们可以多多指教

来源地址：https://blog.csdn.net/weixin_60387745/article/details/129642301