微信小程序-使用高德获取实时天气和天气预报

最新推荐文章于 2024-08-20 14:36:57 发布

置顶阿瑶ay

最新推荐文章于 2024-08-20 14:36:57 发布

阅读量4.5k

点赞数 2

分类专栏：微信小程序开发笔记文章标签：小程序

本文链接：https://blog.csdn.net/aykkkkkkk/article/details/111248596

版权

微信小程序开发笔记专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、获取实时天气可以完全按照官方步骤操作（点链接可跳转）：

1.获取高德的key，获取实时天气数据时需要

2.设置安全通信域名，在小程序中记得刷新不会设置可以点这里，第五步有写

3.获取实时天气数据，下图为获取到的实时天气报文

二、获取天气预报（高德只提供后三天的预报）

前面的准备步骤和获取实时天气一样，所以下面只放获取的代码。

1.从高德获取到的天气预报报文：

2.index.js中的onload方法下代码：

AMapWX基本方法可参照-->参考手册

此处的var amap = require('../../libs/amap-wx');

var that = this
var myAmapFun = new amap.AMapWX({key:'你申请的高德key'});
myAmapFun.getWeather({
      type:'forecast',//表示获取的是预报信息 默认live（实时天气）
      success: function(data){
        console.log(data)
        //成功回调
        var weatherarr = new Array(3);
        for(var i = 0; i < 3; i++){
          weatherarr[i] = data.forecast.casts[i+1];//获取后三天预报信息 今日的不保存
        }
        that.setData({
          forecast:weatherarr
        })
      },
      fail: function(info){
        //失败回调
        console.log(info)
      }
    });

3.index.wxml下

<!--wx:for默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item-->
<!--此处周一至周日的判断是博主作为一个初学者能想到的办法 如有更好的方法望留言告知 谢谢-->
<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>

4.index.wxss可自行发挥