微信小程序实战之天气预报
为什么80%的码农都做不了架构师?>>>
这个案例是仿UC中天气界面做的中间也有点出入,预留了显示当前城市名字和刷新图标的位置,自己可以写下,也可以添加搜索城市。值得注意的是100%这个设置好像已经不好使了,可以通过获取设备的高度通过数据绑定设置高度。地址:https://github.com/shuncaigao/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高度即可
转载于:https://my.oschina.net/hzdx/blog/894414
微信小程序实战之天气预报相关推荐
- axure 小程序 网盘_万门大学微信小程序实战开发特训班【完结】网盘高清全套最新系列精品课程...
万门大学微信小程序实战开发特训班[完结]网盘高清全套最新系列精品课程 课 程 简介 我买了这个课程,课程很有价值,我们通过链接或百度网盘群的形式在共享资料库中与您共享,需要万门大学微信小程序实战开发特 ...
- 微信小程序实战篇:商品属性联动选择(案例)
本期的微信小程序实战篇来做一个电商网站经常用到的-商品属性联动选择的效果,素材参考了一点点奶茶. 效果演示: 商品属性联动.gif 代码示例 1.commodity.xml <!-- <v ...
- 微信小程序实战开发视频
微信小程序实战开发视频: 链接:http://pan.baidu.com/s/1jIAwBLs 密码:ej3b
- 小程序swiper怎么让内容撑开高度_[视频]微信小程序实战优购商城,涵盖你所学的技能点...
很多友友都在找视频教程学习,IT技术教程分享网[http://www.mano100.cn]已经为你收集了各种各样的视频教程,不用再到处找视频教程学习了.无论是免费的,还是收费的,都在这里了.只要你注 ...
- 微信小程序实战 购物车功能
代码地址如下: http://www.demodashi.com/demo/12400.html 一.准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.com ...
- [转]微信小程序之购物车 —— 微信小程序实战商城系列(5)
本文转自:http://blog.csdn.net/michael_ouyang/article/details/70755892 续上一篇的文章:微信小程序之商品属性分类 -- 微信小程序实战商城 ...
- 微信小程序实战篇-下拉刷新与加载更多
下拉刷新 实现下拉刷新目前能想到的有两种方式 调用系统的API,系统有提供下拉刷新的API接口 下拉刷新API.png 监听scroll-view,自定义下拉刷新,还记得scroll-view里面有一 ...
- 微信小程序之顶部导航栏(选项卡)实例 —— 微信小程序实战系列(1)
需求:顶部导航栏 效果图: wxml: <!--导航条--> <view class="navbar"><text wx:for="{{na ...
- 微信小程序实战教程-闫涛-专题视频课程
微信小程序实战教程-38472人已学习 课程介绍 介绍微信小程序API,包括页面布局.网络交互.媒体文件.本地缓存.地理位置.WebSocket和传感器技术,后以翼健康为模板,开发一套 ...
最新文章
- JVM---StringTable(字符串常量池)
- [linux]解决vsftpd 读取目录列表失败的问题
- maven scope/site/effective-pom/assembly
- python两数之和(hash 表)
- jQuery的入口函数
- keil如何添加h文件_【专栏】Keil系列教程
- csdn中使用Git的一些注意问题
- SQL Server 查询数据库中所有的表名及行数
- Python元组的操作
- C#Winform中运用DevExpress提供的ChartControl控件绘制多条曲线图
- dev万能头文件_【C++】Dev-C++的“万能头文件”真的万能吗?
- java面试 自我介绍_java面试自我介绍
- CDR服装设计-旗袍款式图
- macOS如何格式化移动硬盘和U盘
- 23王道——层次遍历、非递归中序遍历
- Ubuntu18.04 wifi已连接却没办法上网~代理服务器出现问题
- dev cpp调试无法显示蓝条情况解决方案
- matlab积分e (x 2),e^(x^2)的定积分
- h5活动是什么意思_H5活动页能给你带来什么?
- 根据轨道根数来计算卫星位置