微信小程序实现天气预报功能

本文实例为大家分享了微信小程序实现天气预报功能的具体代码,供大家参考,具体内容如下

这个案例是仿UC中天气界面做的中间也有点出入,预留了显示当前城市名字和刷新图标的位置,自己可以写下,也可以添加搜索城市。值得注意的是100%这个设置好像已经不好使了,可以通过获取设备的高度通过数据绑定设置高度。地址:weather

界面主要分为四部分:

第一部分

这里是预留的一块可以自行添加补充下

<view class="newTopView">
<!--左边添加当前城市名字,点击跳转选择城市 右边添加刷新当前天气-->
</view>

第二部分:

 <view class="topView">
 <view class="degreeView">
 <!--当前温度-->
 <text class="degree">{{currentTemperature}}</text>
 <!--度数图标-->
 <image class="circle" src="../../image/circle.png"></image>
 </view>
 <view class="detailInfo">
 <view class="degreeView">
 <!--夜间天气情况-->
 <text class="detailInfoDegree">{{nightAirTemperature}}</text>
 <image class="detailInfoCircle" src="../../image/circle.png" />
 <text class="detailInfoLine">/</text>
 <!--白天天气-->
 <text class="detailInfoDegree">{{dayAirTemperature}}</text>
 <!-- style优先级比class高会覆盖class中相同属性 -->
 <image class="detailInfoCircle" style="margin-left: 57rpx; margin-right: 40rpx" src="../../image/circle.png" />
 <!-- 当前天气名字 -->
 <text class="detailInfoName">{{weather}}</text>
 </view>
 </view>
 </view>

第三部分:

 <!-- 中间部分 -->
 <view class="centerView">
 <view class="centerItem" style="margin-right: 25rpx;">
 <image class="centerItemImage" src="../../image/leaf.png" />
 <!-- 相同属性抽出来! -->
 <!--污染指数-->
 <text class="centerItemText" style="margin-left: 10rpx; margin-right: 10rpx">{{aqi}}</text>
 <!--污染指数对应name-->
 <text class="centerItemText">{{quality}}</text>
 </view>
 <view class="centerItem" style="margin-left: 25rpx">
 <image class="centerItemImage" src="../../image/wind.png" />
 <text class="centerItemText" style="margin-left: 10rpx; margin-right: 10rpx">{{windPower}}</text>
 <!--风-->
 <text class="centerItemText">{{windDirection}}</text>
 </view>
 </view>

第四部分:

<!-- 底部view -->
 <view class="bottomView">
 <!--数据返回的不是数组 在js中拼接的数组-->
 <block wx:for-items="{{list}}">
 <view class="bottomItemView">
 <image class="bottomImage" src="{{item.day_weather_pic}}" style="margin-bottom: 15rpx;" />
 <text wx:if="{{item.weekday == 1}}" class="bottomText">星期一</text>
 <text wx:elif="{{item.weekday == 2}}" class="bottomText">星期二</text>
 <text wx:elif="{{item.weekday == 3}}" class="bottomText">星期三</text>
 <text wx:elif="{{item.weekday == 4}}" class="bottomText">星期四</text>
 <text wx:elif="{{item.weekday == 5}}" class="bottomText">星期五</text>
 <text wx:elif="{{item.weekday == 6}}" class="bottomText">星期六</text>
 <text wx:else="{{item.weekday == 7}}" class="bottomText">星期日</text>
 <view class="degreeView" style="margin-top: 20rpx;">
  <text class="detailInfoDegree">{{item.night_air_temperature}}</text>
  <image class="detailInfoCircle" src="../../image/circle.png" />
  <text class="detailInfoLine">/</text>
  <text class="detailInfoDegree">{{item.day_air_temperature}}</text>
  <!-- style优先级比class高会覆盖class中相同属性 -->
  <image class="detailInfoCircle" style="margin-left: 57rpx; margin-right: 40rpx" src="../../image/circle.png" />
 </view>
</view>

js

//index.js
//获取应用实例
var app = getApp()
Page({
 data: {
 //加载状态
 loadingHidden: false,
 //当前温度
 currentTemperature: '',
 //夜间温度
 nightAirTemperature: '',
 //白天温度
 dayAirTemperature: '',
 //当前天气
 weather: '',
 //污染指数
 aqi: '',
 //污染程度
 quality: '',
 //风力
 windPower: '',
 //风向
 windDirection: '',
 //因为数据返回不是数组所以要自己封装一个数组
 list: [],
 height: 0,

 },

 onLoad: function () {
 console.log('onLoad')
 var that = this

 //100%好像不好使 可以获取设备高度
 wx.getSystemInfo({
 success: function (res) {
 that.data.height = res.windowHeight;
 }
 })

 wx.getLocation({
 success: function (res) {
 //通过经纬度请求数据
 wx.request({
  //这个网站有免费API赶紧收藏
  url: 'http://route.showapi.com/9-5',
  data: {
  showapi_appid: '11697',
  showapi_sign: '6c0c15c5ec61454dac5288cea2d32881',
  //
  from: '5',
  lng: res.longitude,
  lat: res.latitude,
  //获取一周情况 0是不获取
  needMoreDay: '1',
  needIndex: '1'
  },
  success: function (res) {
  console.log(res)
  console.log(res.data.showapi_res_body.now.api)
  that.setData({
  //改变加载状态
  loadingHidden: true,

  currentTemperature: res.data.showapi_res_body.now.temperature,
  nightAirTemperature: res.data.showapi_res_body.f1.night_air_temperature,
  dayAirTemperature: res.data.showapi_res_body.f1.day_air_temperature,
  weather: res.data.showapi_res_body.now.weather,
  aqi: res.data.showapi_res_body.now.aqi,
  quality: res.data.showapi_res_body.now.aqiDetail.quality,
  windPower: res.data.showapi_res_body.now.wind_power,
  windDirection: res.data.showapi_res_body.now.wind_direction,
  //拼接数组
  list: [
  {
   'day_weather_pic': res.data.showapi_res_body.f1.day_weather_pic,
   'weekday': res.data.showapi_res_body.f1.weekday,
   'day_air_temperature': res.data.showapi_res_body.f1.day_air_temperature,
   'night_air_temperature': res.data.showapi_res_body.f1.night_air_temperature
  },
  {
   'day_weather_pic': res.data.showapi_res_body.f2.day_weather_pic,
   'weekday': res.data.showapi_res_body.f2.weekday,
   'day_air_temperature': res.data.showapi_res_body.f2.day_air_temperature,
   'night_air_temperature': res.data.showapi_res_body.f2.night_air_temperature
  },
  {
   'day_weather_pic': res.data.showapi_res_body.f3.day_weather_pic,
   'weekday': res.data.showapi_res_body.f3.weekday,
   'day_air_temperature': res.data.showapi_res_body.f3.day_air_temperature,
   'night_air_temperature': res.data.showapi_res_body.f3.night_air_temperature
  },
  {
   'day_weather_pic': res.data.showapi_res_body.f4.day_weather_pic,
   'weekday': res.data.showapi_res_body.f4.weekday,
   'day_air_temperature': res.data.showapi_res_body.f4.day_air_temperature,
   'night_air_temperature': res.data.showapi_res_body.f4.night_air_temperature
  },
  {
   'day_weather_pic': res.data.showapi_res_body.f5.day_weather_pic,
   'weekday': res.data.showapi_res_body.f5.weekday,
   'day_air_temperature': res.data.showapi_res_body.f5.day_air_temperature,
   'night_air_temperature': res.data.showapi_res_body.f5.night_air_temperature
  },
  {
   'day_weather_pic': res.data.showapi_res_body.f6.day_weather_pic,
   'weekday': res.data.showapi_res_body.f6.weekday,
   'day_air_temperature': res.data.showapi_res_body.f6.day_air_temperature,
   'night_air_temperature': res.data.showapi_res_body.f6.night_air_temperature
  },
  {
   'day_weather_pic': res.data.showapi_res_body.f7.day_weather_pic,
   'weekday': res.data.showapi_res_body.f7.weekday,
   'day_air_temperature': res.data.showapi_res_body.f7.day_air_temperature,
   'night_air_temperature': res.data.showapi_res_body.f7.night_air_temperature
  }

  ]
  })
  }
 })

 }
 })

 }
})

wxss

.container {
 display: flex;
 flex-direction: column;
 justify-content: space-between;

}

.newTopView {
 display: flex;
 flex-direction: row;
 justify-content: space-between;
}

/* 头部样式上半部分*/
.topView {
 flex-direction: column;
 align-self: center;
 margin-top: -450rpx;
}
/*当前度数样式*/
.degreeView {
 flex-direction: row;
 position: relative;
}
/*当前温度度数图标*/
.circle {
 width: 35rpx;
 height: 35rpx;
 position: absolute;
 left: 130rpx;
}
/*当前度数数组*/
.degree {
 color: white;
 font-size: 130rpx
}

/*详细View样式*/
.detailInfoView {
 flex-direction: row;
}
/*当前最高和最低温度度数图标*/
.detailInfoCircle {
 width: 20rpx;
 height: 20rpx;
 position: absolute;
 left: 30rpx;
} 

/*当前度数数组*/
.detailInfoDegree {
 color: white;
 font-size: 30rpx
}

/*斜线*/
.detailInfoLine {
 color: white;
 margin-left: 15rpx;
 font-size: 30rpx;
}
/*比如阴天 晴天,暴雨*/
.detailInfoName {
 font-size: 30rpx;
 color: white;
 margin-left: 20rpx;
 align-self: center
}

/*中间view样式*/
.centerView {
 display: flex;
 flex-direction: row;
 margin-top: -550rpx;
 justify-content: center;
 align-items: center;
}

/*中间view分为两个view*/
.centerItem {
 display: flex;
 flex-direction: row;
 align-items: center;
 justify-content: center;
}
/*Item中图片样式*/
.centerItemImage {
 width: 25rpx;
 height: 25rpx;
}
/*文字样式*/
.centerItemText {
 font-size: 28rpx;
 color: white;
}

/*底部view样式*/
.bottomView {
 margin-top: -200rpx;
 display: flex;
 flex-direction: row;
 justify-content: space-around;
 align-items: center;
}

.bottomItemView {
 display: flex;
 flex-direction: column;
 align-items: center;
 margin-bottom: 200rpx;
}

/*最近七天样式*/
.bottomImage {
 width: 70rpx;
 height: 70rpx;
}

.bottomText {
 font-size: 28rpx;
 color: white;
}

PS:

开发者工具无法显示问题:是因为View没有获得高度,默认个高度或者直接修改wxml中height高度即可。

另外,本站在线工具小程序上有一款天气查询工具,还添加了城市选择的功能,感兴趣的朋友可以扫描如下小程序码查看:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • 微信小程序使用map组件实现路线规划功能示例

    本文实例讲述了微信小程序使用map组件实现路线规划功能.分享给大家供大家参考,具体如下: 效果图 实现原理 1. 通过map组件标记起始点和绘制路线图: 2. 通过高德地图API获取不同类型的路线坐标点,以及耗费时间和路程. WXML <view class="flex-style"> <view class="flex-item {{status == 'car' ? 'active' : ''}}" data-status="car&

  • 微信小程序使用map组件实现解析经纬度功能示例

    本文实例讲述了微信小程序使用map组件实现解析经纬度功能.分享给大家供大家参考,具体如下: 声明 bug: 页脚的详细地址在真机测试是会出现不显示问题? 造成原因:在小程序map组件的同一区域,map组件的视图层比普通的文本视图层要高,所以在真机会遮挡! 解决办法:将该文本视图采用cover-view,放在map中. 感谢: 感谢Lrj_estranged指出问题! 效果图 实现原理 1. map组件实现定位标记或者指定定位标记,并保存location. 2. 采用高德地图微信小程序开发API(

  • 微信小程序地图(map)组件点击(tap)获取经纬度的方法

    微信小程序中使用地图(map)组件,通过点击(tap)获取经纬度,按照官方的回应,暂时是没法做到的,从地图组件API多有残缺判断,怀疑是个实习生干的... 做个变通,适用性有限,请大家参考.基本思路就是在地图上铺满一层marker,从而通过点击marker获得经纬度. 复制代码 代码如下: <map id="map" longitude="102.324520" latitude="40.099994" scale="4"

  • 微信小程序使用map组件实现获取定位城市天气或者指定城市天气数据功能

    本文实例讲述了微信小程序使用map组件实现获取定位城市天气或者指定城市天气数据功能.分享给大家供大家参考,具体如下: 效果图 实现原理 采用高德地图微信小程序开发API(getWeather),如果 city 属性的值为空(或者没有city属性),默认返回定位位置的天气数据:如果 city 不为空,则返回 city 指定位置的天气数据. WXML <view class="map-weather"> <view><text>城市:</text&

  • 微信小程序 地图map详解及简单实例

    微信小程序 地图map 微信小程序map 地图 属性名 类型 默认值 说明 longitude Number   中心经度 latitude Number   中心纬度 scale Number 1 缩放级别 markers Array   标记点 covers Array   覆盖物 标记点 标记点用于在地图上显示标记的位置,不能自定义图标和样式 属性 说明 类型 必填 备注 latitude 纬度 Number 是 浮点数,范围 -90 ~ 90 longitude 经度 Number 是

  • 微信小程序 开发MAP(地图)实例详解

    微信小程序 开发MAP(地图)实例详解 在创建MAP(地图)前,请各位小伙伴们认真的去了解微信小程序开发的说明. https://mp.weixin.qq.com/debug/wxadoc/dev/component/map.html#map 了解完MAP(地图)里的属性之后,接下来我们就来创建一个简单的MAP(地图)控件. 第一步:肯定是创建项目.起项目名.项目地址 PS:我这里以index的文件为名 第二步:我们来写 index.wxml 文件的代码 WXML文件代码: <map id=&quo

  • 微信小程序 wxapp地图 map详解

    微信小程序 wxapp地图 map: map 属性名 类型 默认值 说明 longitude Number   中心经度 latitude Number   中心纬度 scale Number 1 缩放级别 markers Array   标记点 covers Array   覆盖物 标记点 标记点用于在地图上显示标记的位置,不能自定义图标和样式 属性 说明 类型 必填 备注 latitude 纬度 Number 是 浮点数,范围 -90 ~ 90 longitude 经度 Number 是 浮

  • 微信小程序 地图(map)实例详解

    微信小程序 地图(map)实例 这里是小编对微信小程序 地图(map API )做的资料整理,获取当前的地址,应该如何实现的实例,大家可以看下. 今天做到地图定位的模块.模拟器肯定是获取不到位置的.下面为真机测试结果. 上图: 经纬度不说了.定位用的,我这里直接输入的数字定位.但是有许多问题 下图中scale是缩放比例,这个属性目前无效.后期微信团队应该会修复.毕竟现在刚开始公测.这样就导致我不管怎么修改scale,我的地图都是在默认的缩放比例.如上图. markers中的rotate是图标的旋

  • 微信小程序 天气预报开发实例代码源码

    微信小程序 天气预报 实例主要功能 自动定位所在城市 根据所定位的城市获取天气信息 显示未来几天的天气情况 查看当天天气的详情信息 先看效果图 微信小程序-天气 首页 微信小程序-天气 详情页 思路及编码部份自动定位所在城市 wx.getLocation:通过官方文档的API中可以看到wx.getLocation可以获取到当前的地理位置和速度,不过获取到的地理位置只是经纬度,而不是真正的城市名称,但我们可以根据这个经纬度来获取城市名称等信息(需要用到第三方接口),再通过城市名称和城市ID获取对应

  • 微信小程序实现天气预报功能

    本文实例为大家分享了微信小程序实现天气预报功能的具体代码,供大家参考,具体内容如下 这个案例是仿UC中天气界面做的中间也有点出入,预留了显示当前城市名字和刷新图标的位置,自己可以写下,也可以添加搜索城市.值得注意的是100%这个设置好像已经不好使了,可以通过获取设备的高度通过数据绑定设置高度.地址:weather 界面主要分为四部分: 第一部分 这里是预留的一块可以自行添加补充下 <view class="newTopView"> <!--左边添加当前城市名字,点击跳

  • 微信小程序实现天气预报功能(附源码)

    前言 最近在学小程序开发,刚好学到天气预报功能的制作,于是给大家分享下. 效果图 天气API获取 这里我用的是和风天气的API,打开官网注册或者登陆你的账号 进入控制台,新建应用 这是刚刚我们创建好的应用,点击添加KEY 选择WebAPI 这注册好我们的API了 微信小程序后台域名配置 登陆小程序后台,分别点击开发和开发设置 点击修改,将我们API的域名添加到request合法域名里面https://free-api.heweather.net 页面代码 .wxml <view class=&quo

  • 微信小程序 在线支付功能的实现

    微信小程序 在线支付功能 最近需要在微信小程序中用到在线支付功能,于是看了一下官方的文档,发现要在小程序里实现微信支付还是很方便的,如果你以前开发过服务号下的微信支付,那么你会发现其实小程序里的微信支付和服务号里的开发过程如出一辙,下面我就具体说一下小程序里微信支付的开发流程和注意点. 1.开通微信支付和微信商户号 这个过程就和开通服务号的微信支付过程一样,没有什么可以说的. 2.获得用户的openid 首页我们需要在小程序的客户端js中获取当前用户的openid,通过调用wx.login方法可

  • 微信小程序 五星评价功能的实现

    微信小程序 五星评价功能 话不多说,我们来看一下效果图: 要实现的效果:点击到第几颗星,就要显示到第几颗星, 接下来直接查看源码: <view class="l-evalbox row"> <text class="l-evaltxt">满意度:</text> <view class="l-evalist flex-1" bindtap="chooseicon"> <ico

  • Android中微信小程序支付倒计时功能

    看效果 由于web 经验弱爆- -  一开始我的思路是找事件,但是看了半天API 基本都是点击触摸,通过物理触发- - 我居然忽略了生命周期,生命周期+线程不就完全OK吗- 事实证明,线程还是王道啊,一开始就应该这么搞嘛- 度娘上面也看了很多都是用js写的,but,可能刚做没几天吧,我对js与微信小程序掌握还不够熟练 思路: onLoad:function(options)调用倒计时方法函数 定义线程进行数据动态现实 1. 日期转化成毫秒 2.定义线程动态显示 3.渲染倒计时 1.毫秒转成固定格

  • 微信小程序列表渲染功能之列表下拉刷新及上拉加载的实现方法分析

    本文实例讲述了微信小程序列表渲染功能之列表下拉刷新及上拉加载的实现方法.分享给大家供大家参考,具体如下: 微信小程序为2017年1月9日打下了一个特殊的标签,迅速刷爆了网络和朋友圈,最近我也写了一个demo程序体验一把.微信小程序和vuejs有些像,都是数据驱动视图&单向数据绑定,而其体验要比H5页面好很多,这得益于微信环境的支持以及首次运行时同时加载所有页面的处理.本文将分享微信小程序列表的下拉刷新和上划加载的实践. 效果图 首先来看看程序效果图,以下四张图从左至右依次是:下来刷新动画.下拉刷

  • 微信小程序显示下拉列表功能【附源码下载】

    本文实例讲述了微信小程序显示下拉列表功能.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 app.json文件: { "pages":[ "views/views", "views/navigators/navigator1/navigator1", "views/navigators/navigator2/navigator2", "views/navigators/navigator3/naviga

  • 微信小程序实现日历功能

    本文实例为大家分享了微信小程序实现日历功能的具体代码,供大家参考,具体内容如下 效果图: 代码: <view class="calendar"> <view class="selectDate"> <view class="goleft iconfont icon-jianzuo" bindtap="prevMonth"></view> <view class="

  • 微信小程序显示倒计时功能示例【测试可用】

    本文实例讲述了微信小程序显示倒计时功能.分享给大家供大家参考,具体如下: 微信小程序中显示倒计时: index.wxml: <view class='countdown'>剩:<text style='color:#6B4EFD'> {{countDownDay}} </text> 天 <text style='color:#6B4EFD'>{{countDownHour}} </text> <text style='color:#6B4E

  • 微信小程序手机号码验证功能的实例代码

    wxml <form bindsubmit='formSubmit'> <view class='all'> <text>手机号:</text> <input name="phone" placeholder='请输入手机号' type='number' style='color:#333' placeholder-style="color:#666" maxlength="11" bindi

随机推荐