文档章节

微信小程序实战之天气预报

Mr韦淋
 Mr韦淋
发布于 2017/05/07 20:22
字数 1100
阅读 6
收藏 0
点赞 0
评论 0

这里写图片描述

这个案例是仿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高度即可

本文转载自:http://blog.csdn.net/u014360817/article/details/52803527

共有 人打赏支持
Mr韦淋
粉丝 2
博文 80
码字总数 23114
作品 0
江门
高级程序员
【福利】微信小程序精选Demo合集

小编最近在开发小程序,也读到了不少优秀的小程序源码,项目中有些需求可以直接从源码里粘贴复制过来,虽然这样做不利于自己独立编写代码,但比较是给公司做项目啊,秉着效率第一的原则,简直...

祈澈姑娘 ⋅ 03/19 ⋅ 0

腾讯云+社区沙龙·小程序敏捷开发实战(北京)开启报名

欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 作者:由云加社区技术沙龙发表在云+社区 2018伊始,最火爆的不是春晚和红包,而是从天而降的“跳一跳”。这款来自微信的轻量级小...

腾讯云+社区 ⋅ 03/22 ⋅ 0

打造个人版微信小程序(1)——本地开发api接口调用

如果觉得这篇文章对您有所启发,欢迎关注我的公众号,我会尽可能积极和大家交流,谢谢。   从今天开始,开始打造一个个人版的微信小程序,尽早上线,方便大家使用以及技术讨论。这套小程序...

u013088062 ⋅ 05/01 ⋅ 0

微信小程序 - 考勤签到:第一课--tabBar的用法

如何搭建多选面板(HH自己理解):tabBar的用法??? 1,打开微信小程序的开发工具:微信web开发者工具,创建自己的小程序的项目 2,目录结构中,找到app.json文件,在page中输入tabBar的相...

qq_31653405 ⋅ 04/20 ⋅ 0

微信小程序商店 | 即速商店_小程序流量平台

微信小程序商店 | 即速商店 即速应用商店-分类最齐全的微信小程序商店,收录当前最新最热门小程序,汇集各行业小程序案例及评测,在这里可以轻松找到各种实用好玩的小程序,也可 免费发布 自...

jisuapp ⋅ 02/08 ⋅ 0

奖金高达120万的微信小程序职业开发大赛,你还不来?

随着微信小程序掀起了微信生态中的重要革新,小程序开发也成为了时下受欢迎的开发实践方向。 如何开发一款优秀的小程序,既考验开发者的系统开发能力,也锻炼开发者的运营思维与商业意识。 ...

bjweimengshu ⋅ 04/19 ⋅ 0

开发微信小程序外包公司怎么选择

  人们的生活已经离不开网络,走在大街上许多人都在看着手机,获取各类信息,有刷微博关注新闻动态,有刷朋友圈了解熟人近况,乐在其中。由于微信用户数量多,小程序推出之后,不少企业和商...

彩薇 ⋅ 05/25 ⋅ 0

一大波编程视频资料赠送(亲自整理)

为了感恩大家长久以来的关注和支持,小编准备了一些福利,整理了包含前端,Java,产品经理,微信小程序,Python,网站源码,Android应用视频教程,微信公众平台开发教程及材料等资源合集大放...

祈澈姑娘 ⋅ 05/08 ⋅ 0

使用微信小程序和腾讯云实现直播功能

不久前微信小程序开放了直播接口,正好阿北的服务器在腾讯云上,就用腾讯云的直播服务实战了一下,以下为实战过程,希望对你有用。 我是通过obs实现推流,然后用小程序进行直播播放,也就是P...

abei2017 ⋅ 01/30 ⋅ 0

开发了几个小程序后,说说我对小程序的看法

刚看到新闻,微信小程序MAU高达4.7亿,TOP100小游戏占比28% 小程序从发布前的大众期待,到刚发布时成为热点,再到迅速被人遗忘,再到后来慢慢发力缓慢爬坡 现在与一年前已经是完全不一样的情...

codeGoogle ⋅ 05/23 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

看东方明珠新媒体如何基于阿里视频云,构建完整的视频OTT平台SaaS服务

摘要: 东方明珠新媒体如何基于阿里云,搭建了面向第三方的视频SaaS服务?6月8日,上海云栖大会视频专场中,东方明珠新媒体股份有限公司云计算中心的副总周少毅带来了《东方明珠视频云》为题...

阿里云云栖社区 ⋅ 20分钟前 ⋅ 0

C#调用WebService实例和开发 VS2013

简单的理解就是:webservice就是放在服务器上的函数,所有人都可以调用,然后返回信息。 Web Service的主要目标是跨平台的可互操作性。为了实现这一目标,Web Service 完全基于XML(可扩展标...

布衣大侠 ⋅ 23分钟前 ⋅ 0

基于FlumeNG+Kafka+ElasticSearch+Kibana的日志系统

环境准备 1.服务器概览 hostname ip 操作系统 说明 安装内容 node1.fek 192.168.2.161 centos 7 node1节点 nginx,jdk1.8, flumeNG, elasticsearch slave1 node2.fek 192.168.2.162 centos ......

张shieppp ⋅ 23分钟前 ⋅ 0

问答网站已成过去,深度问答社区才是当下

曾几何时,各类问答网站数不胜数,从百度知道这类综合型问答网站到各种垂直细分的问答网站,都有不少,但到了移动互联网时代,很明显的一大趋势是,网站整体的流量都在下滑,随着移动智能设备...

ThinkSNS账号 ⋅ 26分钟前 ⋅ 0

Android平台架构(ART)

Android平台架构(ART) 本文目的:准确表述Android平台架构 本文转载自[Android官网] 本文定位:学习笔记 学习过程记录,加深理解。也希望能给学习的同学一些灵感 本文更新时间:2018.06.22(...

lichuangnk ⋅ 28分钟前 ⋅ 0

看东方明珠新媒体如何基于阿里视频云,构建完整的视频OTT平台SaaS服务

摘要: 东方明珠新媒体如何基于阿里云,搭建了面向第三方的视频SaaS服务?6月8日,上海云栖大会视频专场中,东方明珠新媒体股份有限公司云计算中心的副总周少毅带来了《东方明珠视频云》为题...

猫耳m ⋅ 29分钟前 ⋅ 0

Java 动态代理 原理解析

概要 AOP的拦截功能是由java中的动态代理来实现的。说白了,就是在目标类的基础上增加切面逻辑,生成增强的目标类(该切面逻辑或者在目标类函数执行之前,或者目标类函数执行之后,或者在目标...

轨迹_ ⋅ 32分钟前 ⋅ 0

js 获取当前时间

var myDate = new Date();myDate.getYear(); //获取当前年份(2位)myDate.getFullYear(); //获取完整的年份(4位,1970-????)myDate.getMonth(); //获取当前月份(0-11,0代表1月)myDate...

夜醒者 ⋅ 38分钟前 ⋅ 0

windows删除或修改本地Git保存的账号密码

在win10或者win7都是一样的步骤: (一)进入控制面板(二)选择用户账户(三)选择管理你的凭据(四)选择Windows凭据(五)选择git保存的用户信息(六)选择编辑或者进...

果树啊 ⋅ 38分钟前 ⋅ 0

8个基本的Docker容器管理命令

前言: 在这篇文章中,我们将带你学习 8 个基本的 Docker 容器命令,它们操控着 Docker 容器的基本活动,例如 运行run、 列举list、 停止stop、 查看历史纪录logs、 删除delete 等等。文末福...

java高级架构牛人 ⋅ 40分钟前 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部