和风天气OUC——通过搜索城市快速查询天气

在小程序的首页，默认会获取用户的地理位置信息，之后将此位置信息进行转换，作为参数再去调用和风天气的API。但有时候想要看一下其它城市的天气情况，这时就可以通过在首页进行搜索来查询天气。
搜索函数的代码如下

  //搜索城市commitSearch (res) {let val = ((res.detail || {}).value || '').replace(/\s+/g, '')this.search(val)},clearInput () {this.setData({searchText: '',})},search (val, callback) {wx.pageScrollTo({scrollTop: 0,duration: 300,})if (val) {this.setData({located: false,})this.getWeather(val)//this.getHourly(val)}callback && callback()},

从上面的代码中可以看到，search函数中调用了一个API，名称为pageScrollTo，此API是用来实现滚动效果的，因为在首页中，除了可以搜索查询城市外，还可以通过选择城市的方式来进行查询。
后面if语句中的val的内容就是用户输入的想要搜索的城市名，如果此名不为空，那么将located设置为false，也就是说现在不使用定位信息了。后面再调用查询天气的函数，次函数具体实现如下。

  //根据获取到的地理位置，查询天气getWeather (location) {wx.request({url: `${globalData.requestUrl.weather}`,data: {location,key,},success: (res) => {//console.log(res)if (res.statusCode === 200) {let data = res.data.HeWeather6[0]if (data.status === 'ok') {this.clearInput()this.success(data, location)} else {wx.showToast({title: '查询失败',icon: 'none',})}}},fail: () => {wx.showToast({title: '查询失败',icon: 'none',})},})},

此函数调用了和风天气的网络API，通过它返回josn格式的数据。
搜索框通过input组件实现，此组件在citychose页面中，通过下面的代码调用citychose页面。

  toCitychoose () {wx.navigateTo({url: '/pages/citychoose/citychoose',})},

最终效果图如下

和风天气OUC——通过搜索城市快速查询天气相关推荐

java 搜索框快速查询_Java项目搜索功能的实现
今天是刘小爱自学Java的第110天. 感谢你的观看,谢谢你. 话不多说,开始今天的学习: 事先说明:关于今天的搜索功能实现. 并没有使用到倒排索引这样的主流搜索技术,就一个普通的模糊查询. 在此之前 ...
android天气搜索框,Android简易天气App
原标题:Android简易天气App 前言本打算是写一个贝塞尔曲线的demo,想了一下哪种场景可以直观的表现出贝塞尔曲线,想到天气预报中的那些24小时和未来几日天气变化正好适用.接着开始构思,开始是 ...
android往天气接口里面传城市,Android使用中国天气网API数据通过城市名称获取天气情况...
项目要求在应用首页面展示本地当日天气的概况,首先想到的是google和雅虎,前者很久之前接触过,听说后来用不了了,后者由于邮箱事件的缘故个人不喜欢(虽然貌似苹果也用雅虎的天气预报),之后又想到了前段时 ...
php天气api接口,PHP博客_天气API接口的实现代码，实况天气，生活指数等
城市查询API接口说明功能强大的城市搜索服务,支持中英文模糊搜索,支持IP.经纬度坐标和中国行政区域编码(AD Code)查询城市的详细信息,可指定搜索范围,设置返回结果数量,查询全球热门城市列表等 ...
python输入城市名称_python 查询天气（输入城市名，输出天气）
python 查询天气,输入城市名,输出天气 def get_whether(city_name): """ """ city_code_d ...
Python案例：通过城市区域代码查询天气
文章目录一.获取城市代码 (一)通过城市名称查询城市代码 1.解决思路 2.代码实现 (二)逐级获取城市代码 1.获取省份列表 2.获取某省的城市列表 3.获取某个城市的区域列表 4.编程通过省份城 ...
javaScript学习笔记：用城市代码查询城市天气
javaScript学习笔记:AXAJ基础一.准备工作 1.python案列:查询城市天气并绘制最高气温与最低气温折线图 2.使用JSON Viever直观查看JSON数据二.任务任务2.输入城 ...
微信查询天气php程序,微信公众号开发-输入城市查询天气
/** * 查询天气输入城市名称比如:北京,即可返回天气信息 */ //define your token define("TOKEN", "******") ...
心知天气api，根据城市名/id查询天气
心知天气api可以根据城市名/id查询天气,向开发者提供的准确.稳定.丰富的天气数据云服务. 接口名称:心知天气api 接口平台:聚合数据接口地址:http://v.juhe.cn/weather/ ...
大快搜索城市运河大数据政务管理平台案例解读
2019独角兽企业重金招聘Python工程师标准>>> 大快搜索城市运河大数据政务管理平台案例解读大数据在政务当中的应用对于提高问题解决的效率可谓大有帮助,但政务大数据平台的应用开 ...

和风天气OUC——通过搜索城市快速查询天气

和风天气OUC——通过搜索城市快速查询天气相关推荐

最新文章

热门文章