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

清疚 2024-03-25 20:40 85阅读 0赞

> **介绍**
> 
> 这里是小编成长之路的历程，也是小编的学习之路。希望和各位大佬们一起成长！
> 
> 以下为小编最喜欢的两句话：
> 
> 要有最朴素的生活和最遥远的梦想，即使明天天寒地冻，山高水远，路远马亡。
> 
> 一个人为什么要努力？ 我见过最好的答案就是：因为我喜欢的东西都很贵，我想去的地方都很远，我爱的人超完美。因此，小编想说：共勉！

--------------------

**目录**

前言

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

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

1、登录高德开放平台

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

3、创建应用

编辑

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

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

3）添加api key

4）获取到api key

三、获取amap-wx.js

四、创建一个微信小程序

weather.js

weather.wxml

weather.wxss

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

--------------------

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

高德官网：[高德开放平台 | 高德地图API (amap.com)][_ _API _amap.com]

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

### 1、登录高德开放平台 ###

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

![0cd806e6643c47f685bc390db1074e83.png][]

### 3、创建应用 ###

#### ![1c17328bdc704023875fc6139b812eca.png][] ####

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

![5e58ae73112e41b08893b4f17f8f1010.png][]

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

![ca78c7383dac47dab9af8556bc389011.png][]

#### 3）添加api key ####

![474ac593a4f34bddab6a88fb17b436b7.png][]

![dba10aa5d7ef40ae8d50e6260badff58.png][]

#### 4）获取到api key ####

![75d75695a68849fd94366620fa161269.png][]

## 三、获取amap-wx.js ##

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

![85b39f21abf44110a0879fc51a449cab.png][]

## 四、创建一个微信小程序 ##

![0653699ef0c341cbacc66ab95bbadc68.png][]

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

[【微信小程序】注册小程序账号、做一个案例——你好我的小程序\_determine ZandR的博客-CSDN博客][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 ###

<view class="wetheritemtr" wx:for="{
       {forecast}}" wx:key="index">
      <view class="td" wx:if="{
       {item.week == 1}}">周一</view>
      <view class="td" wx:if="{
       {item.week == 2}}">周二</view>
      <view class="td" wx:if="{
       {item.week == 3}}">周三</view>
      <view class="td" wx:if="{
       {item.week == 4}}">周四</view>
      <view class="td" wx:if="{
       {item.week == 5}}">周五</view>
      <view class="td" wx:if="{
       {item.week == 6}}">周六</view>
      <view class="td" wx:if="{
       {item.week == 7}}">周日</view>
      <view class="td">天气：{
       {item.dayweather}}转{
       {item.nightweather}}</view>
      <view class="td">温度：{
       {item.daytemp}}℃</view>
      <view class="td">风速：{
       {item.daywind}} {
       {item.daypower}}</view>
    </view>

### weather.wxss ###

> page \{
> 
> background: -webkit-linear-gradient(bottom, lightblue, rgb(3, 171, 238), lightblue);
> 
> color: \#fff;
> 
> \}

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

第一步：

![f5c22b35a8864ae1b8d87728f00027b2.png][]

第二步：

![c985d029163d4c87b861da164be23a18.png][]

第三步：

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

>  *  https://restapi.amap.com

![cd207baf3894495f8431e6eec700ee57.png][]

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

![c393939190e147e9b31942623b2aa4bf.png][]

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

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

[_ _API _amap.com]: https://lbs.amap.com/
[0cd806e6643c47f685bc390db1074e83.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/b9912c2af9164184ba9ae63474bbbf3d.png
[1c17328bdc704023875fc6139b812eca.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/b5b17a827e424daf9662fc4b8466393d.png
[5e58ae73112e41b08893b4f17f8f1010.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/cc565fd04e6e4120bee78d54c7b56468.png
[ca78c7383dac47dab9af8556bc389011.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/1f08f103cd94440fbbdffe1bdddef078.png
[474ac593a4f34bddab6a88fb17b436b7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/7e94b92667bd4af385fa6d34a6069ca9.png
[dba10aa5d7ef40ae8d50e6260badff58.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/dedae0f34c144a51abe80c46b82863db.png
[75d75695a68849fd94366620fa161269.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/16d885edfe904576a04d4994a82c047f.png
[-_-_-_API _amap.com]: https://lbs.amap.com/api/wx/guide/get-data/weather
[85b39f21abf44110a0879fc51a449cab.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/d9d514aa4a3f4a94b0e6ff3919a9ed0a.png
[0653699ef0c341cbacc66ab95bbadc68.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/856934d404934fbc9da99cc42e1b8174.png
[determine ZandR_-CSDN]: https://blog.csdn.net/weixin_60387745/article/details/129643253?spm=1001.2014.3001.5501
[f5c22b35a8864ae1b8d87728f00027b2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/a90ce7acd3cd4c6fb3a166936f57d144.png
[c985d029163d4c87b861da164be23a18.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/3993c8d680bd4ea69205fc9ba16ff389.png
[cd207baf3894495f8431e6eec700ee57.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/6ba5f7b606f84e4f86e8b895285afe04.png
[c393939190e147e9b31942623b2aa4bf.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/e06a97b4c5824c1e889f349ee181c603.png