DAY07 微信小程序项目第三方接口应用（天气查询）

最新推荐文章于 2024-07-07 17:05:32 发布
最新推荐文章于 2024-07-07 17:05:32 发布
阅读量473 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq920896923/article/details/93966196
版权
本文介绍了如何在微信小程序中实现天气查询功能，包括获取其他城市天气的方法，如通过百度地图的地理编码接口获取经纬度，调用天气API获取数据。同时详细阐述了显示7天预报、具体天气数据和生活指数的实现过程，涉及到自定义函数和模板文件的使用。
摘要由CSDN通过智能技术生成

今天做的是天气预报小程序的收尾工作，需要添加天气的详情以及生活小贴士，并设计好样式和布局，在页面中展示出来。引入并实例化SDK核心类，声明一个全局变量。页面初始化完整后调用接口，表单触发后先声明this，调用方法（该方法需要获取到经纬度），进行逆地址解析。

1.获取其他城市天气（例：北京市）

1.1实现方法

①要获取其他的城市的天气数据，需要传入经纬度。为了获取其他城市的经纬度，这里使用的地图的地理编码接口，输入城市名，输出经纬度，然后调用获取天气数据 API 即可。

②自定义获取城市的函数loadCity()，调用wx.request，在“百度地图开放平台”网站中注册自己的AK，通过获取城市信息的网址（http://api.map.baidu.com/geocoder/v2/?ak=自己的ak&location=纬度值,经度值&output=json）实现当前城市名称的获取。并在loadCity()函数中接着调用loadWeather()函数。

1.2程序截图

 

2.显示7天预报、具体天气数据、生活指数等信息。

2.1实现方法

①天气数据来自百度地图开放平台。

②自定义获取天气的函数loadWeather(),根据已有的城市名称，通过获取天气信息的网址实现天气信息的数据获取。

③未来天气部分通过import调用了自定义模板文件。然后分析项目中文件的源码。

2.2 程序代码

index.wxml

<!-- 7日天气 -->
<view class='title'>7 天预报</view>

    <view class='guide' wx:if='{{cityDatas.daily_forecast}}'>
      <view class='guides'>
        <view class='item' wx:for='{{cityDatas.daily_forecast}}' wx:key='{{index}}'>
          <view class='date i'>{{item.date}}</view>
          <view class='temperature i'>{{item.tmp_max}}~{{item.tmp_min}}℃</view>
          <view class='weather i'>
            <text>{{item.cond_txt_d}}</text>
            <image mode='widthFix' src='{{weatherIconUrl}}{{item.cond_code_d}}.png'></image>
          </view>
          <view class='wind i'>{{item.wind_dir}}{{item.wind_sc}}级</view>
        </view>
      </view>
    </view>
   

    <view class='details'>
      <view class='detail' wx:for='{{detailsDic.key}}' wx:key='{{index}}'>
        <view>{{detailsDic.val[item]}}</view>
        <view>{{cityDatas.now[item]}}</view>
      </view>
    </view>
    <view class='hourly' wx:if='{{hourlyDatas.length}}'>
      <view class='title'>24 小时逐 3 小时预报</view>
      <view class='hours'>
        <swiper style='height:360rpx;' indicator-dots="{{false}}" autoplay="{{false}}" circular="{{false}}" duration="300" next-margin="50rpx">
          <block wx:for="{{hourlyDatas}}" wx:key="{{index}}">
            <swiper-item>
              <view class='hour'>
                <view class='detail'>
                  <view>温度(℃)</view>
                  <view>{{item.tmp}}</view>
                </view>
                <view class='detail'>
                  <view>天气</view>
                  <view class='weather'>
                    <text>{{item.cond_txt}}</text>
                    <image mode='widthFix' src='{{weatherIconUrl}}{{item.cond_code}}.png'></image>
                  </view>
                </view>
                <view class='detail'>
                  <view>相对湿度(%)</view>
                  <view>{{item.hum}}</view>
                </view>
                <view class='detail'>
                  <view>露点温度(℃)</view>
                  <view>{{item.dew}}</view>
                </view>
                <view class='detail'>
                  <view>降水概率</view>
                  <view>{{item.pop}}</view>
                </view>
                <view class='detail'>
                  <view>风向</view>
                  <view>{{item.wind_dir}}</view>
                </view>
                <view class='detail'>
                  <view>风向角度(deg)</view>
                  <view>{{item.wind_deg}}</view>
                </view>
                <view class='detail'>
                  <view>风力(级)</view>
                  <view>{{item.wind_sc}}</view>
                </view>
                <view class='detail'>
                  <view>风速(mk/h)</view>
                  <view>{{item.wind_spd}}</view>
                </view>
                <view class='detail'>
                  <view>气压(mb)</view>
                  <view>{{item.pres}}</view>
                </view>
                <view class='detail'>
                  <view>云量</view>
                  <view>{{item.cloud}}</view>
                </view>
              </view>
              <view class='time'>{{item.time}}</view>
            </swiper-item>
          </block>
        </swiper>
      </view>
    </view>
    <!-- <ad unit-id="adunit-785cc3f710cc3d4c"></ad> -->
    <view class='livingIndex' wx:if='{{!setting.hiddenIndex}}'>
      <view class='item' wx:for='{{cityDatas.lifestyle}}' wx:key='{{index}}'>
        <image class='icon' src='/img/lifestyle_{{item.type}}.png'></image>
        <view class='right'>
          <view class='key'>{{lifestyles[item.type]}} {{item.brf}}</view>
          <view class='value'>{{item.txt}}</view>
        </view>
      </view>
    </view>
    
  </view>

index.wxss

.guide .title,
.hourly .title {
  border-bottom: 1rpx solid rgba(250, 250, 250, .2);
  background: rgba(0, 0, 0, .6);
  font-size: 24rpx;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
}
.guide .item {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 170rpx;
  flex-shrink: 0;
}
.guide image {
  width: 44rpx;
}
.guide .i {
  padding-bottom: 20rpx;
}
.guide .i.weather,
.hour .weather {
  display: flex;
  justify-content: center;
  align-items: center;
}
.guide .i image,
.hour .weather image {
  width: 40rpx;
  margin-left: 4rpx;
}
.hourly {
  margin-bottom: 20rpx;
}
.hourly .hours {
  padding: 20rpx 10rpx 0;
  background: rgba(0, 0, 0, .6);
}
.hourly .hours .time {
  font-size: 22rpx;
  height: 60rpx;
  line-height: 60rpx;
  text-align: center;
}
.details {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  background:rgba(0, 0, 0, .6);
  margin-bottom:20rpx;
  font-size: 24rpx;
}
.hour {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  background: rgb(107, 102, 102);
  font-size: 24rpx;
  box-sizing: border-box;
  border-radius: 8rpx;
}
.hourly swiper-item {
  box-sizing: border-box;
  padding: 0 10rpx;
  background: rgba(0, 0, 0, 0);
}
.details .detail,
.hour .detail {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  padding: 10rpx 0;
  height: 100rpx;
  width: 25%;
  border-right: 1rpx solid rgba(250, 250, 250, 0.2);
  border-bottom: 1rpx solid rgba(250, 250, 250, 0.2);
  box-sizing: border-box;
}
.details .detail:nth-child(4n),
.hour .detail:nth-child(4n) {
  border-right: none;
}
.details .detail:nth-child(n+9),
.hour .detail:nth-child(n+9) {
  border-bottom: none;
}
.livingIndex {
  /* border-bottom: 1rpx solid rgba(240, 240, 240, .4); */
  background: rgba(0, 0, 0, .6);
  margin-bottom: 20rpx;
}
.livingIndex .item {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  border-bottom: 1rpx solid rgba(250, 250, 250, .2);
  padding: 20rpx 0;
  margin: 0 30rpx;
}
.livingIndex .item:last-child {
  border-bottom: none;
}
.livingIndex .item .right {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  flex: 1;
}
.livingIndex .item .value {
  margin-top: 10rpx;
  font-size: 24rpx;
}
.livingIndex .icon {
  width: 80rpx;
  height: 80rpx;
  padding: 0 24rpx;
}

 

 

2.3程序截图

 

 

今天也想吃冰淇淋
关注
DAY05 微信小程序项目第三方接口应用（天气查询）
qq920896923的博客
06-24 242
一.“我的”页面头像、昵称、设备信息展示 1.用弹性布局实现文本的两端对齐 <view> <text>型号</text> <text>{{model}}</text> </view> 2.用open-data直接获取用户信息 3.写样式，在主轴左右居中，在交叉轴上下居中 .system.view{ /*弹性布...
DAY10微信小程序项目开发技术总结
qq920896923的博客
06-28 1853
一.每日实习任务 1．网页基础知识(html,css,js) 今天老师为我们介绍讲解了网页基础知识(html,css,js)。首先，我们安装了谷歌浏览器及sublime text。老师为我们介绍了html网页格式、块级元素、行内块级元素、行内元素、各种标签的功能及用法、css引入方式、css基础样式属性、css定义及作用、五种css选择器等基础知识，此外，老师着讲解了var语句、for循...
【微信小程序项目】——十分钟开发网络API·天气查询小程序、天气查询，美观简约，简单易上手
lijingxiaov5的博客
05-16 3677
十分钟开发网络API·天气查询小程序、天气查询，美观简约，简单易上手复习小程序项目的新建过程 掌握配置https域名的方式 使用微信网络请求能力获取天气预报 使用腾讯提供的网络通信API，调用第三方提供的API
天气预报微信小程序设计与实现
毕业作品网站
10-12 2502
本项目是一个安卓客户端应用软件，通过从气象局提供的数据接口获取实时的气象数据，将获取到的实时数据进行解析，然后提取对应的信息，通过安卓用户界面，将信息显示出来，包括日期，城市，风向，气温，天气以及对出行的着装的建议，而且数据包含今天，明天以及后天三天的数据，通过友好的交互界面，方便用户的查看。综上所述便是我们认为的一个合格的天气预报系统。通过分析和对比各种技术的特性及不足之处，基于笔者的掌握情况和系统的具体需求，明确了本系统的开发技术和工具选择，根据需求分析的结果，完成这样一个系统的总体设计。
个人微信小程序（生活服务）——天气页面
imcy的博客
11-16 2109
续上文的开发指南：http://blog.csdn.net/u013948010/article/details/78530173 这篇主要是讲一下天气主页面的设计实现。index界面获取数据主页面的index.js函数已经实现了访问和风天气接口，并把数据存入全局变量中，上一篇也有说到： weatherData air 所以天气页面直接取这两个全局数据就可以了。 主页面获取天气数据的代
python3 采集 中国天气网 七天预报和当天生活指数
anrubing2016的博客
01-11 896
python3 采集 中国天气网 七天预报和当天生活指数 数据格式 {“index”: [{“title”: “紫外线指数”, “level”: “最弱”, “desc”: “辐射弱，涂擦SPF8-12防晒护肤品。”}, {“title”: “减肥指数”, “level”: 1, “desc”: “雨雪相伴湿冷天，坚持室内低强度运动。”}, {“title”: “血糖指数：”, “level”: ...
学子影城项目DAY04（微信小程序）
07-18
【学子影城项目DAY04（微信小程序）】是一个关于微信小程序开发的实践教程，主要聚焦于实现“城市信息”这一功能模块。在微信小程序中，开发者可以利用其丰富的API和组件来创建交互性强、用户体验良好的轻量级应用。...
微信小程序自定义带价格显示日历效果
10-17
总结起来，微信小程序自定义带价格显示日历效果的知识点主要包括小程序的框架理解、页面生命周期的使用、日期处理逻辑、数据绑定和显示以及借助第三方库（如moment）来辅助开发。这些知识点对于小程序开发者而言非常...
【微信小程序】项目开发-----百度翻译API接口开发微信翻译小程序
JockLiu的博客
06-23 7144
开发环境： 微信开发者工具 V1.02.1902010版本以上 开发语言： JavaSript语言，HTML语言 API接口： 百度翻译开发平台开放接口 界面预览： 开发： 基础配置： 1.app.js App({ onLaunch: function () { // 展示本地存储能力 this.globalData.curLang =...
【愚公系列】《微信小程序开发解析》003-小程序框架（项目文件和逻辑层）
最新发布
时光隧道
07-07 2万+
小程序框架是一种提供基础开发框架和工具的软件开发框架，用于简化和加速小程序应用程序的开发过程。小程序框架提供了一套规范和标准，帮助开发者快速构建小程序应用并管理应用的结构、数据流和页面之间的交互。
微信小程序-天气预报小程序
08-07
微信小程序－天气预报 说明： 实现了天气预报和生活指数，设置城市等功能。 数据接口: https://api.getweapp.com/thirdparty/heweather/now https://api.getweapp.com/thirdparty/heweather/suggestion 目录结构： images — 存放项目图片 pages — 存放项目页面相关文件，包括about,city,index,logs,weather等页面 utils — 存放日期格式化文件 开发环境： 微信web开发者工具 v0.10.102800 项目截图： https://www.getweapp.com/project?projectId=58330132bb2538f8186c707f
微信小程序-微信小程序–简单的天气预报软件
08-06
wx-weather 微信小程序 -- 天气预报 首先使用微信获取当前所在的经纬度 使用百度地图api将获取到的经纬度转化为地理信息 使用中国气象网开放api(http://wthrcdn.etouch.cn/weather_mini?city=' 城市名) 获取当日天气及未来五天的天气
微信小程序代码入门+项目实战（天气预报）
01-26
一： 1). 注册微信小程序账户 2). 安装微信开发者工具 3). 工具的基本使用 4). 小程序开发入门 二： 1). 项目页面搭建 2). 调用微信API获取用户地址 3). 调用公共天气API获取气象信息 4). 在页面中显示动态信息
微信小程序天气预报
One of thre_tigers的博客
02-05 6449
关于博客简介 本篇博客介绍的是一个经典的小天气入门项目——天气预报的制作过程，包含了详细的步骤： WXML标记和WXSS样式 获取经纬度信息 获取位置信息 获取实况天气 数据绑定 小程序发布 效果展示 那么话不多述，开始设计 WXML标记和WXSS样式 关于在开始编写WXML标记和WXSS样式时，我们要先给整个程序的布局做出规划，这个程序布局十分简单： 整个页面分为两个部分 实况天气上面部分...
微信小程序之天气预报 ，小程序天气预报的功能实现
江南一丝凉意的博客
12-03 6909
概述 微信小程序项目实战之天气预报 一、准备工作 1、注册微信小程序 微信注册：前往：https://mp.weixin.qq.com/选择小程序，点击注册 申请AppID 2、注册微信小程序地图ak 打开开发工具—新建小程序—输入AppID（在微信平台的配置服务器中可查看） 注册百度地图API：http://...
小程序基本命令
aiven1637的博客
10-30 3314
onLoad: function () { // 生命周期函数--监听页面加载 onReady: function () { // 生命周期函数--监听页面初次渲染完成 }, onShow: function () { // 生命周期函数--监听页面显示 }, onHide: function () { // 生命周期函数--监...
day06微信小程序项目API讲解
qq920896923的博客
06-24 146
今天继续编写天气预报这个小程序，老师检查了我们提交的作业，发现大多数同学做出来的页面都是把文字堆叠在一起，虽然实现了天气查询的功能，但是界面看起来不美观，且内容繁杂。所以今天老师要求我们做出导航栏顶部的搜索栏，实现各地天气的查询；并作出左右滑动的框，实现左右滑动查看实时天气情况。因为数据内容众多，上网搜索相关天气预报小程序的示例代码，我借鉴了其中的方法及语句。 输入框搜索功能 编写.js文件 ...
微信小程序开发——调用免费天气api接口（高德、天气API）
Keeplearning
12-28 1万+
微信小程序开发——调用免费天气api接口一、注册并获取Key二、调用API接口 开发一个现实天气信息的微信小程序，主要的是从网上请求到天气信息数据，网上也有很多介绍免费天气api接口的，我试了好多没法用，或者就是像百度api一样弄了半天没搞明白，我这里使用了高德提供的天气api接口，链接如下： https://lbs.amap.com/api/webservice/guide/api/weatherinfo 一、注册并获取Key 使用时候需要注册获取Key，因为是阿里旗下公司，可以使用支付宝扫码注册。注册后
漂亮的微信小程序一周和实时天气代码分享
免费天气预报接口 - 天气api
01-02 9550
如何做一个漂亮的天气预报微信小程序 效果图如下, 附有全部代码和压缩包文件下载 index.js文件内容 //index.js //获取应用实例 const app = getApp() Page({ data: { weather: { 'wea_img': 'qing'},//实况天气 weatherweek:[],//七日天气 }, onLoad: functi...
微信小程序实战：打造详细打卡签到功能
微信小程序是一种轻量级的应用开发框架，由腾讯公司推出，主要用于构建在微信生态内的应用。它结合了HTML、JavaScript和自定义的WXML（WeChat Markup Language）与WXSS（WeChat Style Sheets）语言，使得开发者能够...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值