微信小程序开发笔记—天气获取显示

这篇具有很好参考价值的文章主要介绍了微信小程序开发笔记—天气获取显示。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、实现效果

本人的需求比较简单,只是一个页面用来显示两个人所在地的实时天气信息,主要信息包括所在省份、所在地区、天气、实时气温、风向、风力、空气湿度和发布时间,可以根据实时天气信息显示相应天气图标,下面是实现效果
微信小程序获得天气信息,微信小程序开发,微信小程序,微信,小程序

二、天气查询API

本人使用的是高德的天气查询API,相关文档可点击链接查看。高德的天气查询API是一个简单的HTTP接口,可以根据用户输入的城市编码获取相应地区的天气情况,但是使用前需要申请自己的key,具体申请方法可以点击这篇大佬的文章查看微信小程序开发——调用免费天气api接口(高德、天气API)

使用高德天气查询API是免费的,而且可查询次数非常多,完全足够普通的个人开发者使用。

三、微信小程序设计思路

1、页面跳转

看过之前文章的应该清除,本人的小程序是分三个部分,最中间是首页,也就是公共部分,查询天气是常用的功能,因此直接放在了公共部分的页面,点击天气图标可以进入上面的天气显示页面,公共页面如下图
微信小程序获得天气信息,微信小程序开发,微信小程序,微信,小程序
点击图中的天气图标即可,音乐是另外一个功能,但是由于时间有限,本文只介绍天气查询功能的实现,音乐功能后续会另外介绍,此外还有已经基本实现的记事本功能,期待的小伙伴们可以关注一下专栏呀,希望大家互相学习,共同进步。

2、获取天气信息

跳转到天气页面后需要获取天气信息,根据高德的开发指南,需要知道两个人所在地区的城市编码,城市编码可以根据高德开发指南里的城市编码表确定。此外,根据开发指南,不仅可以获取实况天气,还可以获取预报天气,也就是未来几天的天气,本人尝试过,获取预报天气时只有白天天气、夜间天气、白天温度、夜间温度、白天风力、风向和夜间风力、风向这些信息,没有发布时间、实时气温、空气湿度这些信息。

3、信息显示

正如最开始的效果图,本人的需求只是显示两个人的实时天气,所以在信息显示方面设计的较为简单,为了不那么单一,特地加上了两个头像,大家也可以根据自己的想法进行渲染修饰。

天气图标的话是利用wx:if函数判别当前天气情况然后显示的,实现方法较为粗暴,如果大佬有更好的方法可以评论区交流呀。

四、程序实现

1、页面跳转功能

页面跳转功能实现较为简单,只是插入了一张图片,给图片加入了点击触发的跳转函数,当然还有其他方法,这里就暂时不做介绍了,后续记事本的文章会介绍另一种方法。

主页.wxml代码如下

<!-- 天气 -->
 <view class="app">
 <image src="../../image/weather_cover/weather.png" bindtap="weather" style="width: 133rpx; height: 129rpx; display: inline-block; box-sizing: border-box; position: relative; left: -60rpx; top: -300rpx"></image>
 <text style="position: relative; left: -155rpx; top: -260rpx">天气</text>
 </view>

咳咳,本人由于能力有限,在调整图标位置和大小时使用了微信开发工具的可视化开发功能,所以导致整体代码有些长,希望大家多多指教,虽然后来发现可以通过在.wxss文件增加对应的样式可以达到这种调整大小的效果,但是在尝试的过程中发现对于位置的调节并没有达到预期效果,需要继续学习。

页面跳转.wxss文件代码如下

.app{
  width: auto;
  height: auto;
}

页面跳转.ts文件代码如下

weather:function(){
    wx.navigateTo({url:'/pages/weather/weather'})
  },

2、获取天气信息

获取天气信息需要上面申请的key和所在地的城市编码,还是按照惯例,先上程序

2.1、变量声明

data: {
    lin_weather_inform:{},
  },

声明一个变量用来存储查询到的天气信息。

2.2、获取所在地区天气信息

onLoad:function(){
    var that = this;
    // 获取小林所在地区温度
    wx.request({
      url: 'https://restapi.amap.com/v3/weather/weatherInfo',
      data:{
        'key': '自己申请的key',   //改为自己申请的Key
        'city': '210911',
      },
      success:function(res){
        that.setData({
          lin_weather_inform: res.data,
        })
      }
    })
  }

在对应位置填入自己申请的key和城市编码即可,url的网址可以直接用同一个。

3、天气信息显示

这里先解释一下,本人为了实现天气图标显示并且能够根据实况天气显示对应图标,加入了一个判断过程,所以显得程序非常繁杂,如果大佬有好的方法还请评论区指教呀。

天气显示代码如下

<!-- 小林天气 -->
<view class="lin_weather">
  <image src="../../image/weather_cover/lin.png" style="width: 232rpx; height: 227rpx; display: inline-block; box-sizing: border-box; position: absolute; left: 473rpx; top: 30rpx"></image>
  <view class="info" style="position: absolute; left: 55rpx; top: 120rpx"> 所在省份:{{lin_weather_inform.lives[0].province}}</view>
  <view class="info" style="position: absolute; left: 55rpx; top: 190rpx"> 城市:{{lin_weather_inform.lives[0].city}}</view>
  <view class="info" style="position: absolute; left: 55rpx; top: 250rpx">天气:{{lin_weather_inform.lives[0].weather}}</view>
  <!-- 天气图标判断显示 -->
  <image class="weather_icon" wx:if="{{lin_weather_inform.lives[0].weather == ('晴')}}" src="../../image/weather_cover/fine.png" style="position: absolute; left: 220rpx; top: 250rpx"></image>
  <image class="weather_icon" wx:if="{{lin_weather_inform.lives[0].weather == ('阴')}}" src="../../image/weather_cover/cloudy_yin.png" style="position: absolute; left: 220rpx; top: 250rpx"></image>
  <image class="weather_icon" wx:if="{{lin_weather_inform.lives[0].weather == ('多云')}}" src="../../image/weather_cover/cloudy.png" style="position: absolute; left: 220rpx; top: 250rpx"></image>
  <image class="weather_icon" wx:if="{{lin_weather_inform.lives[0].weather == ('雨') || lin_weather_inform.lives[0].weather == ('阵雨') || lin_weather_inform.lives[0].weather == ('小雨') || lin_weather_inform.lives[0].weather == ('中雨') || lin_weather_inform.lives[0].weather == ('大雨') || lin_weather_inform.lives[0].weather == ('暴雨')}}" src="../../image/weather_cover/rain.png" style="position: absolute; left: 220rpx; top: 250rpx"></image>
  <image class="weather_icon" wx:if="{{lin_weather_inform.lives[0].weather == ('雷阵雨') || lin_weather_inform.lives[0].weather == ('雷阵雨并伴有冰雹')}}" src="../../image/weather_cover/thunderstorm.png" style="position: absolute; left: 220rpx; top: 250rpx"></image>
  <image class="weather_icon" wx:if="{{lin_weather_inform.lives[0].weather == ('雪') || lin_weather_inform.lives[0].weather == ('阵雪') || lin_weather_inform.lives[0].weather == ('小雪') || lin_weather_inform.lives[0].weather == ('中雪') || lin_weather_inform.lives[0].weather == ('大雪') || lin_weather_inform.lives[0].weather == ('暴雪')}}" src="../../image/weather_cover/snow.png" style="position: absolute; left: 220rpx; top: 250rpx"></image>
  <image class="weather_icon" wx:if="{{lin_weather_inform.lives[0].weather == ('雾')}}" src="../../image/weather_cover/fog.png" style="position: absolute; left: 220rpx; top: 250rpx"></image>
  <view class="info" style="position: absolute; left: 55rpx; top: 310rpx"> 实时气温:{{lin_weather_inform.lives[0].temperature}}</view>
  <view class="info" style="position: absolute; left: 55rpx; top: 370rpx"> 风向:{{lin_weather_inform.lives[0].winddirection}}</view>
  <view class="info" style="position: absolute; left: 55rpx; top: 430rpx"> 风力:{{lin_weather_inform.lives[0].windpower}}</view>
  <view class="info" style="position: absolute; left: 55rpx; top: 490rpx"> 空气湿度:{{lin_weather_inform.lives[0].humidity}}%</view>
  <view class="info" style="position: absolute; left: 55rpx; top: 550rpx"> 发布时间:{{lin_weather_inform.lives[0].reporttime}}</view>
</view>

五、总结

1、遇到的问题

在利用上述方法实现天气查询时需要在微信小程序开发工具中不校验合法域名这一项勾选,否则会报错,这么设置的话虽然可以正常调试,但是对于需要发布的微信小程序会导致无法发布,要根本解决这个问题需要我们将网址添加到request的合法域名中。
微信小程序获得天气信息,微信小程序开发,微信小程序,微信,小程序

2、后续优化方向

后续可以添加一个按钮,用来查询未来天气,点击可以看到未来几天的天气情况。

3、获取未来天气的方法

首先看一下高德官方文档的介绍
微信小程序获得天气信息,微信小程序开发,微信小程序,微信,小程序
由此可以看出,只需要在wx.request中将气象类型修改成all即可,具体程序如下文章来源地址https://www.toymoban.com/news/detail-772994.html

wx.request({
      url: 'https://restapi.amap.com/v3/weather/weatherInfo',
      data:{
        'key': '自己的key',   //改为自己申请的Key
        'city': '210911',
        'extensions': 'all',
      },
      success:function(res){
        that.setData({
          lin_weather_inform: res.data,
        })
      }
    })

到了这里,关于微信小程序开发笔记—天气获取显示的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 「教程」微信小程序获取经纬度查询天气预警信息

    使用天气预警API 可以帮助人们及时获取和了解天气预警信息,以便采取相应的措施来保护自身和财产。天气预警通常是由气象部门或相关机构发布的,用于提醒公众可能出现的极端天气或自然灾害,如暴雨、洪水、台风、暴风雪、雷暴、高温、低温、霜冻等。 本文将详细介

    2024年02月08日
    浏览(65)
  • 微信小程序开发-云数据库添加及获取显示

    全国的疫情一个是东北一个是上海两个重灾区。被关在家里10天了,看了一下B站,看到了一个微信小程序开发的视频教程感觉不错,闲来无事就自己实践一下。 微信小程序出来已经好几年了,原来玩过一段时间,最后由于微信小程序开发的不断迭代,以后域名必须使用https,

    2024年02月09日
    浏览(52)
  • 【微信小程序】免费的高德地图api——获取天气(全过程)

    介绍 这里是小编成长之路的历程,也是小编的学习之路。希望和各位大佬们一起成长! 以下为小编最喜欢的两句话: 要有最朴素的生活和最遥远的梦想,即使明天天寒地冻,山高水远,路远马亡。 一个人为什么要努力? 我见过最好的答案就是:因为我喜欢的东西都很贵,

    2024年02月02日
    浏览(89)
  • 微信小程序 | 小程序开发

    🖥️ 微信小程序专栏:小程序开发 初级知识 🧑‍💼 个人简介:一个不甘平庸的平凡人🍬 ✨ 个人主页:CoderHing的个人主页 🍀 格言: ☀️ 路漫漫其修远兮,吾将上下而求索☀️ 👉 你的一键三连是我更新的最大动力❤️ 目录 一、认识小程序开发 什么是小程序? 各个平台小

    2024年01月24日
    浏览(64)
  • uniapp(微信小程序/支付宝小程序) - 最新解决canavs绘制海报、二维码图片等不显示问题,在uniapp小程序开发中使用canavs制作base64图片在真机运行时空白不显示(详细解决方法)

    在uniapp微信小程序 | uniapp支付宝小程序中,详解canavs技术绘制图像后在真实手机上运行不显示的问题,解决uniapp安卓苹果ios运行小程序后二维码/海报无法加载和展示,完美解决兼容问题、图片太大画不出来、加载失败等。支持保存到相册中或长按保存。 很多教程都无效,本

    2024年04月25日
    浏览(53)
  • 实时更新天气微信小程序开发

    1.新建一个天气 weather项目 2.在app.json中创建一个路由页面  当我们点击保存的时候,微信小程序会自动的帮我们创建好页面 3.在weather页面上书写我们的骨架  4.此时我们的页面很怪,因为没有给它添加样式和值。此时我们给它一个样式。(样式写在wxss中) 5.给它值,使用插值

    2024年02月01日
    浏览(97)
  • 【微信小程序项目】——十分钟开发网络API·天气查询小程序、天气查询,美观简约,简单易上手

    【实验目的】 复习小程序项目 的 新建过程 掌握 配置https域名的方式 使用微信 网络请求能力获取天气预报 使用腾讯提供的网络通信API,调用第三方提供的API PART I 准备工作 A PI 密钥申请( 非必做 ) 本小节主要介绍如何申请获得开源API的密钥。这里选择了可以提供全球气象

    2023年04月20日
    浏览(56)
  • 微信小程序开发之微信小程序交互

    目录 一、小程序交互 前端: 1、先在登陆界面中编写代码 2、在前端中编写js代码 后端:           1、先导入依赖:           2、定义好配置文件           3、编写好实体类           4、将帮助类进行配置           5、编写mapper类           6、定义service层以及对应的

    2024年02月09日
    浏览(59)
  • 微信小程序 -- 小程序开发能力与拓展

    1. 获取用户头像 当小程序需要让用户完善个人资料时,我们可以通过微信提供的头像、昵称填写能力快速完善。如图: 想使用微信提供的头像填写能力,需要两步: 将 button 组件 open-type 的值设置为 chooseAvatar 当用户选择需要使用的头像之后,可以通过 bindchooseavatar 事件回调

    2024年04月15日
    浏览(64)
  • 微信小程序开发笔记 进阶篇④——基于iconfont快速实现icon图标显示

    进入iconfont素材网 挑选想要的素材,加入购物车 点击右上角购物车图标,将图标 添加至项目 项目设置,勾选base64 生成代码,下载至本地 有用的是 iconfont.css iconfont.wxss 就是iconfont.cn网站下载的 iconfont.css 改下后缀即可 关键代码在于 text class=\\\"icon-alipay iconfont icon\\\"/text 其中 ico

    2024年02月08日
    浏览(52)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包