实验2：天气查询小程序

一、实验目标

1、掌握服务器域名配置和临时服务器部署；2、掌握 wx.request 接口的用法。

二、实验步骤

申请api密钥并申请为开发者
在应用管理中创建应用，选择web api并申请key值
创建项目，构建HTML结构

<!-- <view class="container"> --><picker mode="region" bindchange='regionChange'><text wx:for="{{region}}">{{item}}</text></picker><view class="textContainer"><text>{{temp}}℃</text><text>{{weather}}</text></view><image src="/node_modules/qweather-icons/icons/{{imgsrc}}.svg" mode="widthFix"></image><view class="infoContainer"><view wx:for="{{nowInfo}}"><text>{{item.name}}</text> <text>{{item.num}}</text></view></view>
<!-- </view> -->

编写css样式

picker{margin: 0 auto;text-align: center;
}
picker text{font-size: 30px;
}
picker :nth-child(2){margin: 0 10px;
}
page{display: flex;height: 100%;flex-direction: column;justify-content:space-around;align-items: center;
}
.textContainer{font-size: 25px;text-align: center;
}
image{width: 200px;margin: 0 auto;
}
.textContainer text{margin-left: 10px;
}
.infoContainer{display: flex;flex-wrap: wrap;width: 100%;justify-content:space-around;
}
.infoContainer view{flex: 33%;display: flex;font-size: 20px;line-height: 45px;text-align: center;flex-direction: column;
}

5. 配置服务器请求合法域名

6. 分析需求，需要获取查询地的详细天气情况，需要使用到实时天气的接口，而实时天气的请求接口需要携带地区的LocationID，这个id的查询需要用到另外一个城市信息查询的接口

7. 明确第一步应该获取id，而获取id需要请求携带地名，这可以从picker组件中获得，将其绑定函数

regionChange(e){this.setData({region:e.detail.value,})this.getLocationID(e.detail.value[1],e.detail.value[2])this.getinfo(this.localID)},

获取到地区名字之后，将其传给获取id的函数处理，这里避免模糊搜索，将地区及其上级都传给函数处理，请求成功之后修改本地数据，通过id请求具体信息

  getLocationID(city,area){var that=thiswx.request({url: 'https://geoapi.qweather.com/v2/city/lookup?',method:"GET",data:{location:area,adm:city,key:'583ed323bb62490dba0158e445e81d2f'},success:function(res){that.getinfo(res.data.location[0].id)that.setData({localID:res.data.location[0].id})}})},

请求具体的天气信息，并修改本地的值进行渲染

  getinfo(id){var that=thiswx.request({url: 'https://devapi.qweather.com/v7/weather/now?',data:{location:id,key:'583ed323bb62490dba0158e445e81d2f'},success(res){var resdata=res.data.nowconsole.log(resdata);var restemp=resdata.tempthat.setData({temp:restemp,weather:resdata.text,imgsrc:resdata.icon,nowInfo:[{name:"湿度",num:resdata.humidity+'%'},{name:"气压",num:resdata.pressure+'hPa'},{name:"能见度",num:resdata.vis+'km'},{name:"风向",num:resdata.windDir},{name:"风速",num:resdata.windSpeed+'km/h'},{name:"风力",num:resdata.windScale+'级'}]})}})},

在onload函数中默认初始请求青岛崂山的数据

  onLoad() {this.getLocationID('青岛','崂山区')this.getinfo(101120202)},

完整js代码

// index.js
// 获取应用实例
Page({data: {region:['山东省','青岛市','崂山区'],nowInfo:[{name:"温度",num:''},{name:"气压",num:''},{name:"能见度",num:''},{name:"风向",num:''},{name:"风速",num:''},{name:"风力",num:''}],temp:0,weather:'晴',imgsrc:'999-fill',localID:101120202},regionChange(e){this.setData({region:e.detail.value,})this.getLocationID(e.detail.value[1],e.detail.value[2])this.getinfo(this.localID)},getinfo(id){var that=thiswx.request({url: 'https://devapi.qweather.com/v7/weather/now?',data:{location:id,key:'583ed323bb62490dba0158e445e81d2f'},success(res){var resdata=res.data.nowconsole.log(resdata);var restemp=resdata.tempthat.setData({temp:restemp,weather:resdata.text,imgsrc:resdata.icon,nowInfo:[{name:"湿度",num:resdata.humidity+'%'},{name:"气压",num:resdata.pressure+'hPa'},{name:"能见度",num:resdata.vis+'km'},{name:"风向",num:resdata.windDir},{name:"风速",num:resdata.windSpeed+'km/h'},{name:"风力",num:resdata.windScale+'级'}]})}})},getLocationID(city,area){var that=thiswx.request({url: 'https://geoapi.qweather.com/v2/city/lookup?',method:"GET",data:{location:area,adm:city,key:'583ed323bb62490dba0158e445e81d2f'},success:function(res){that.getinfo(res.data.location[0].id)that.setData({localID:res.data.location[0].id})}})},onLoad() {this.getLocationID('青岛','崂山区')this.getinfo(101120202)},})

三、程序运行结果

四、问题总结与体会

遇到的问题是在函数请求的时候例如下

  getLocationID(city,area){var that=thiswx.request({url: 'https://geoapi.qweather.com/v2/city/lookup?',method:"GET",data:{location:area,adm:city,key:'583ed323bb62490dba0158e445e81d2f'},success:function(res){that.getinfo(res.data.location[0].id)that.setData({localID:res.data.location[0].id})}})},

在请求成功中的this指向的是wx这个对象，所以后续操作的时候发生请求404的问题，定义一个that来存储this的指向，解决问题

实验2：天气查询小程序相关推荐

【Pyqt实战】全国天气查询小程序（含UI界面，python代码）
文章目录第一步:UI界面设计第二步:获取天气参数第三步:编写主程序代码今天用Pyqt做了个全国天气查询的小程序,可以查询全国各地区当前的天气情况,主要包括温度.风力.风向以及湿度这几个天气参数 ...
python天气查询小程序加背景图_微信小程序开发背景图显示功能
这两天开发微信小程序,在设置背景图片时,发现在wxss里面设置background-image:(url) 属性,不管是开发工具还是线上都无法显示.经过查资料发现,background-image只能 ...
ouc2022移动软件开发实验二：天气查询小程序
一.实验目标 1.掌握服务器域名配置和临时服务器部署:2.掌握 wx.request 接口的用法. 二.实验步骤 1."和风天气"密钥申请 "和风天气"有着可以 ...
python天气查询小程序加背景图_Python查询天气小程序
输入城市名,打印查询结果 #!/usr/bin/env python #encoding:utf-8 #By eathings import urllib import urllib2 import ...
天气微信小程序源码，附上线教程
博主之前发布过一篇文章,微信小程序源码合集500套.不少友友反馈很多都用不了,这里博主给大家道个歉,因为博主也是花钱网上收集到的源码,来给大家免费下载,内容之多也不可能一个个去测试它的可用性.而且博主 ...
java 显示天气的小程序_超级简单的微信小程序获取今日天气预报代码小程序获取七日天气...
代码是天气api的小程序demo, 粘贴上js和wxml就可以运行看效果了, 有问题的加我qq 445899710, 可提供源代码, 效果如图如果是测试, 请勾选配置不校验合法域名.web-vie ...
用python做一个数据查询软件_使用Python实现NBA球员数据查询小程序功能
本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,如有问题请及时联系我们以作处理. 以下文章来源于早起Python ,作者投稿君一.前言有时将代码转成带有界面的程序,会极大地方便 ...
王者荣耀战力查询小程序源码下载-支持安卓ios微信和QQ战力查询支持打包成APP
王者荣耀战力查询小程序源码下载-支持安卓ios微信和QQ战力查询支持打包成APP 该源码没有后台的也无需后台的,所以也就没有什么服务器和域名的烦恼和费用了使用方法用HBuilder X软件打开文件然 ...
python进行数据查询_使用Python实现NBA球员数据查询小程序功能
本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,如有问题请及时联系我们以作处理. 以下文章来源于早起Python ,作者投稿君一.前言有时将代码转成带有界面的程序,会极大地方便 ...