微信小程序—天气预报查询

前不久用安卓做了个天气预报，麻烦的要死，故想体验一下微信小程序开发（其实没有可比性）

发现了一个免费的天气接口

天气接口api 地址：http://wthrcdn.etouch.cn/weather_mini?city=城市名称

（1）index.wxml文件

<!--index.wxml-->
<view class="page"><!-- top部分 --><view class="top"><input placeholder="输入城市名进行搜索" bindinput="bindKeyInput"></input><view class="icon"><icon type="search" size="25" bindtap="search" /></view></view><!-- body部分 --><view class="body"><view class="city"><text>{{city}}</text></view><view class="today"><text>{{date}}</text></view><view><image src="{{pic}}" mode="aspectFit" style="width: 400rpx; height: 400rpx" /></view></view><!-- bottom部分 --><view class="bottom"><view class="weather"><text>{{weather}}</text></view><view class="right"><view class="temp"><text>{{temp}}</text></view><view class="wind"><text>{{wind}}</text></view></view></view>
</view>

（2）index.wxss文件

/**index.wxss**/
page {background-color: #5a9cd8;color: #fff;}.page {margin: 50rpx;}.top {display: flex;padding: 20rpx;flex-direction: row;background-color: #efefef;position: relative;margin-bottom: 20rpx;border-radius: 10rpx;}.input {width: 80%;font-size: 32rpx;}.icon {width: 10%;position: absolute;right: 0;bottom: 5rpx;}.body {text-align: center;display: flex;flex-direction: column;}.city {font-size: 80rpx;}.today {font-size: 34rpx;}.bottom {display: flex;flex-direction: row;align-items: center;text-align: center;}.weather {font-size: 38rpx;width: 50%;}.right {display: flex;flex-direction: column;}.wind {font-size: 40rpx;}.temp {font-size: 40rpx;font-weight: bold;font-family: Arial, Helvetica, sans-serif;}input {color: #333;}

（3）index.js文件

主要是实现三个动作

一个是初始化加载

一个是动态获取input的城市名称

一个是绑定搜索按钮，实现搜索功能

当然，最关键的是weather函数，用来将给.wxml页面中所需的天气数据赋值

// index.js
// 定义城市、天气、温度、风级、图片,日期参数
var defaultcity, getweather, gettemp, getwind, getpic, getdate
var vurl = 'http://wthrcdn.etouch.cn/weather_mini?city='
Page({data: {},// 初始化加载onLoad: function (e) {// 默认城市名称defaultcity = '长沙'this.weather()},// 动态获取input输入值 城市名称bindKeyInput: function (e) {defaultcity = e.detail.value},// 搜索城市search: function (e) {this.weather()},weather: function () {wx.showLoading({title: '加载中',})wx.request({url: vurl + defaultcity,success: res => {console.log(res.data)if (!res.data) {console.log('获取天气接口失败')return}getweather = res.data.data.forecast[0].high + '\n' + res.data.data.forecast[0].lowgettemp = res.data.data.forecast[0].highgetwind = res.data.data.forecast[0].fengxiang + '，' + res.data.data.forecast[0].fengli.replace(/<\!\[CDATA\[(.*)\]\]>/, '$1')getpic = ''getdate = res.data.data.forecast[0].datethis.setData({city: defaultcity,weather: getweather,temp: gettemp,wind: getwind,pic: getpic,date: getdate})wx.hideLoading()}})}
})

不得不说这个免费的天气接口真的香，微信小程序的天气API封装的也不错，对于喜欢偷懒的我来说，真心比安卓开发香

效果图

微信小程序—天气预报查询相关推荐

微信小程序-天气预报查询
废话不说,直接上源码采用的接口是https://api.asilu.com/这个网站的 wether.js部分 var defaultcity, getweather, gettemp, getwi ...
微信小程序--订单查询页面
微信小程序–订单查询页面包含功能点: 订单查询结构:order.wxml <tabs tabList="{{tabList}}" binditemChange=" ...
基于微信小程序公交查询系统设计与实现
[摘要]随着互联网的技术的不断更新发展,人们生活节奏也在不断的加快,对于网络的依赖也越来越紧密,尤其是在等公交,经常会错过班次,但又不知道,下次班次几点发车,这样会导致乘客花掉大把时间在等待,如果可 ...
微信小程序星座查询
微信小程序星座查询 1.界面布局 1. .xml代码 <image class="anime_bg" src="/images/cartoon_2.jpg&quo ...
微信小程序--火车票查询
写在最前面微信小程序自九月份推出内测资格以来,经历了舆论热潮到现在看似冷清,但并不意味着大家不那么关注或者不关注了.我想不管是否有内测资格,只要是感兴趣的开发者已经进入潜心耕耘产品的阶段了,至少是静 ...
微信小程序火车票查询直取12306数据
最终效果图: 样式丑哭了,我毕竟不是前端,宗旨就是练练手,体验微信小程序的开发,以最直接的方式获取12306数据查询火车票. 目录结构: search1是出发站列表,search2是目的站列表,命名没 ...
微信小程序-天气预报1.0版本
1.0版本的功能: 后台方面: 1.将从接口拿到的json转为pojo. 2.使用Redis缓存提升应用的并发访问能力. 3.Quartz Schedule定时获取天气数据存入缓存进一步提升并发访问能 ...
基于微信小程序菜谱查询app设计
设计一个基于微信小程菜单查询app,一共有2个身份包括用户和管理员!用户通过微信小程序打开app后可以查询最新上架的菜谱信息,查询和查看菜谱详情信息,收藏自己喜欢的菜谱,发布留言和查看新闻公告!管理员 ...
微信小程序 —— 快递查询Demo（入门）
源码地址及提醒: 1.seach.js中的wx.request所用URL需要用申请所得数据接口替换,数据接口申请地址:https://www.juhe.cn/docs/api/id/43 2.由于使用 ...

微信小程序—天气预报查询

微信小程序—天气预报查询相关推荐

最新文章

热门文章