草庐IT

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

determine ZandR 2023-04-14 原文

介绍

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

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

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

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


目录

前言

一、去注册一个高德地图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)

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

1、登录高德开放平台

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

 3、创建应用

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

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

 3)添加api key

 

4)获取到api key

三、获取amap-wx.js

获取实时天气数据-获取数据-开发指南-微信小程序插件|高德地图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

<!--wx:for默认数组的当前项的下标变量名默认为 index,数组当前项的变量名默认为 item-->
<!--这是一周的天气 注意:高德api只能获取三天的天气-->
<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域

 第一步:

第二步:

第三步:

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

  • https://restapi.amap.com

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

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

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

有关【微信小程序】免费的高德地图api——获取天气(全过程)的更多相关文章

  1. ruby-on-rails - ActionController::RoutingError: 未初始化常量 Api::V1::ApiController - 2

    我有用于控制用户任务的Rails5API项目,我有以下错误,但并非总是针对相同的Controller和路由。ActionController::RoutingError:uninitializedconstantApi::V1::ApiController我向您描述了一些我的项目,以更详细地解释错误。应用结构路线scopemodule:'api'donamespace:v1do#=>Loginroutesscopemodule:'login'domatch'login',to:'sessions#login',as:'login',via::postend#=>Teamroutessc

  2. 【鸿蒙应用开发系列】- 获取系统设备信息以及版本API兼容调用方式 - 2

    在应用开发中,有时候我们需要获取系统的设备信息,用于数据上报和行为分析。那在鸿蒙系统中,我们应该怎么去获取设备的系统信息呢,比如说获取手机的系统版本号、手机的制造商、手机型号等数据。1、获取方式这里分为两种情况,一种是设备信息的获取,一种是系统信息的获取。1.1、获取设备信息获取设备信息,鸿蒙的SDK包为我们提供了DeviceInfo类,通过该类的一些静态方法,可以获取设备信息,DeviceInfo类的包路径为:ohos.system.DeviceInfo.具体的方法如下:ModifierandTypeMethodDescriptionstatic StringgetAbiList​()Obt

  3. ruby-on-rails - Mandrill API 模板 - 2

    我正在使用Mandrill的RubyAPIGem并使用以下简单的测试模板:testastic按照Heroku指南中的示例,我有以下Ruby代码:require'mandrill'm=Mandrill::API.newrendered=m.templates.render'test-template',[{:header=>'someheadertext',:main_section=>'Themaincontentblock',:footer=>'asdf'}]mail(:to=>"JaysonLane",:subject=>"TestEmail")do|format|format.h

  4. 微信小程序通过字典表匹配对应数据 - 2

    前言一般来说,前端根据后台返回code码展示对应内容只需要在前台判断code值展示对应的内容即可,但要是匹配的code码比较多或者多个页面用到时,为了便于后期维护,后台就会使用字典表让前端匹配,下面我将在微信小程序中通过wxs的方法实现这个操作。为什么要使用wxs?{{method(a,b)}}可以看到,上述代码是一个调用方法传值的操作,在vue中很常见,多用于数据之间的转换,但由于微信小程序诸多限制的原因,你并不能优雅的这样操作,可能有人会说,为什么不用if判断实现呢?但是if判断的局限性在于如果存在数据量过大时,大量重复性操作和if判断会让你的代码显得异常冗余。wxswxs相当于是一个独立

  5. 计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2

    项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明:前端使用微信微信小程序开发工具:后端使用ssm:VU

  6. 微信小程序开发入门与实战(Behaviors使用) - 2

    @作者:SYFStrive @博客首页:HomePage📜:微信小程序📌:个人社区(欢迎大佬们加入)👉:社区链接🔗📌:觉得文章不错可以点点关注👉:专栏连接🔗💃:感谢支持,学累了可以先看小段由小胖给大家带来的街舞👉微信小程序(🔥)目录自定义组件-behaviors    1、什么是behaviors    2、behaviors的工作方式    3、创建behavior    4、导入并使用behavior    5、behavior中所有可用的节点    6、同名字段的覆盖和组合规则总结最后自定义组件-behaviors    1、什么是behaviorsbehaviors是小程序中,用于实现

  7. 阿里云国际版免费试用:如何注册以及注意事项 - 2

    作为新的阿里云用户,您可以50免费试用多种优惠,价值高达1,700美元(或8,500美元)。这将让您了解和体验阿里云平台上提供的一系列产品和服务。如果您以个人身份注册免费试用,您将获得价值1,700美元的优惠。但是,如果您是注册公司,您可以选择企业免费试用,提交基本信息通过企业实名注册验证,即可开始价值$8,500的免费试用!本教程介绍了如何设置您的帐户并使用您的免费试用版。​关于免费试用在我们开始此试用之前,您还必须遵守以下条款和条件才能访问您的免费试用:只有在一年内创建的账户才有资格获得阿里云免费试用。通过此免费试用优惠,用户可以免费试用免费试用活动页面上列出的每种产品一次。如果您有多个帐

  8. ruby-on-rails - 在 Ruby (on Rails) 中使用 imgur API 获取图像 - 2

    我正在尝试使用Ruby2.0.0和Rails4.0.0提供的API从imgur中提取图像。我已尝试按照Ruby2.0.0文档中列出的各种方式构建http请求,但均无济于事。代码如下:require'net/http'require'net/https'defimgurheaders={"Authorization"=>"Client-ID"+my_client_id}path="/3/gallery/image/#{img_id}.json"uri=URI("https://api.imgur.com"+path)request,data=Net::HTTP::Get.new(path

  9. ruby-on-rails - 使用 HTTParty 的非常基本的 Rails 4.1 API 调用 - 2

    Rails相对较新。我正在尝试调用一个API,它应该向我返回一个唯一的URL。我的应用程序中捆绑了HTTParty。我已经创建了一个UniqueNumberController,并且我已经阅读了几个HTTParty指南,直到我想要什么,但也许我只是有点迷路,真的不知道该怎么做。基本上,我需要做的就是调用API,获取它返回的URL,然后将该URL插入到用户的数据库中。谁能给我指出正确的方向或与我分享一些代码? 最佳答案 假设API为JSON格式并返回如下数据:{"url":"http://example.com/unique-url"

  10. ruby-on-rails - 是否使用 API - 2

    关闭。这个问题是opinion-based.它目前不接受答案。想要改进这个问题?更新问题,以便editingthispost可以用事实和引用来回答它.关闭4年前。Improvethisquestion我的公司有一个巨大的数据库,该数据库接收来自多个来源的(许多)事件,用于监控和报告目的。到目前为止,数据中的每个新仪表板或图形都是一个新的Rails应用程序,在巨大的数据库中有额外的表,并且可以完全访问数据库内容。最近,有一个想法让外部(不是我们公司,而是姊妹公司)客户访问我们的数据,并且决定我们应该公开一个只读的RESTfulAPI来查询我们的数据。我的观点是-我们是否也应该为我们的自己

随机推荐