每周学习小程序 - 每日天气
最编程
2024-06-13 14:56:11
...
前言:欢迎收看一周学会小程序系列2-日播天气。看了苹果的自带天气软件,发现很简单实用。在小程序上看了一下天气的小程序,没有发现类似的,于是就模仿了一个。虽然模仿的不是很像,请大家不要见笑!
主要功能:
1. 通过定位或选取位置获取当天详细天气预报
(1)天气情况,包括温度「当前温度、最低温度和最高温度」、天气、空气质量、湿度、风向和风速、日出和日落、气压、能见度等; (2)生活指数,包括舒适度、穿衣、感冒、运动、旅游、紫外线强度、洗车、污染扩散等。
2. 24小时天气预报
3. 7天天气预报
细节:
增加类似于App的启动页
具体功能实现:
1.接口部分:使用京东万象提供的免费天气接口(京东万象官网地址)
2.页面部分:
(1)布局构思:主页面使用小程序推荐flex列布局,使用4个模板(当前天气温度信息模板、24小时模板、7天天气模板、生活指数模板),2个scrollview(24小时、7天天气预报) (2)详细模板使用:
- 以当前天气信息为例(单一样式):
.wxss
<template name="nowTemplate">
<view class='template-bgview'>
<view class='temperature-bg'>
<text class='temperature-text'>{{nowweather.tmp}}</text>
<text class='temperature-degree'>°</text>
</view>
<view class='weather-bg'>
<text>{{nowweather.cond.txt}}</text>
<view class='weather-line'>|</view>
<view class='aqi-bg'>
<text class='aqi-text'>{{aqi.aqi + " " + aqi.qlty}}</text>
<!-- <text>{{aqi.aqi}}</text> -->
</view>
</view>
<view class='winter-bg'>
<text class='hum-text'>{{"湿度 "+nowweather.hum+"%" + " "}}</text>
<text class='wind-text'>{{" " + nowweather.wind.dir+" "+nowweather.wind.sc+"级"}}</text>
</view>
</view>
</template>
.wxss
.template-bgview {
width: 100%;
/* height: 175px; */
align-items: center;
display: flex;
flex-direction: column;
justify-content: center;
}
.temperature-bg {
/* align-items: center; */
display: flex;
flex-direction: row;
justify-content: center;
}
.temperature-text {
font-size: 160rpx;
font-weight: lighter;
}
.temperature-degree {
font-size: 80rpx;
font-weight: lighter;
}
.weather-bg {
display: flex;
flex-direction: row;
justify-content: center;
}
.weather-line {
margin-left: 5px;
color: gray;
}
.aqi-bg {
margin-left: 5px;
background-color: yellow;
border-radius: 3px;
}
.aqi-text {
margin-left: 5px;
margin-right: 5px;
}
.winter-bg {
margin-top: 10px;
display: flex;
flex-direction: row;
justify-content: center;
}
.hum-text {
margin-right: 10px;
}
.wind-text {
margin-left: 10px;
}
模板使用: 1.模板页面导入 .wxml
<import src="../template/now-template.wxml" />
.wxss
@import "../template/now-template.wxss";
2.外层嵌套view使用
<view class='now-view'>
<template is="nowTemplate" data="{{nowweather:weather.now, aqi:weather.aqi}}" />
</view>
- 以7天天气模板为例(列表样式): 使用方法相同,具体wxml和wxss代码如下
wxml
<template name="sevenDays">
<view class='template-sevendays'>
<view class='week' wx:if="{{index==0}}">{{item.week.week+" (今天)"}}</view>
<view class='week' wx:else>{{item.week.week+" ("+item.week.month+"/"+item.week.day+")"}}</view>
<view class='condition' wx:if="{{isnight}}">{{item.cond.txt_n}}</view>
<view wx:else class='condition'>{{item.cond.txt_d}}</view>
<view class='hight-temperature'>{{item.tmp.max+"°"}}</view>
<view class='low-temperature'>{{item.tmp.min+"°"}}</view>
</view>
</template>
wxss
.template-sevendays {
width: 100%;
height: 30px;
display: flex;
flex-direction: row;
}
.week {
margin-left: 10px;
flex: 4;
}
.condition {
text-align: center;
flex: 4;
/* width: 40%; */
}
.hight-temperature {
text-align: center;
flex: 1;
}
.low-temperature {
text-align: center;
flex: 1;
}
3.数据交互部分:
原理:使用腾讯地图api获取当前位置经纬度,通过经纬度调用腾讯的逆地理编码函数获取当前位置信息,然后再通过当前位置获取当前的天气信息。解析天气信息数据,完成页面和数据的交互绑定。
(1)数据解析
// 解析天气信息函数 构建数据赋值
analysisData: function(weather) {
var that = this;
var str = JSON.stringify(weather);
var hourly_forecast = [];
hourly_forecast.push({
date: "现在",
cond: weather.now.cond,
tmp: weather.now.tmp
});
// 24小时 数组
for (var i = 0; i < weather.hourly_forecast.length; i++) {
var hourDic = weather.hourly_forecast[i];
hourDic.date = hourDic.date.substr(11, 5);
hourly_forecast.push(hourDic);
}
// 7天天气 数组
var daily_forecast = [];
// 使用forEach遍历
weather.daily_forecast.forEach(function (dailyDic) {
dailyDic.week = util.dateLater(dailyDic.date, 0);
daily_forecast.push(dailyDic);
});
// 生活指数数组 按照指定顺序排列
var suggestion = [];
var comf = weather.suggestion.comf;
comf.title = "舒适度";
comf.id = 0;
suggestion.push(comf);
var drsg = weather.suggestion.drsg;
drsg.title = "穿衣";
drsg.id = 1;
suggestion.push(drsg);
var flu = weather.suggestion.flu;
flu.title = "感冒";
flu.id = 2;
suggestion.push(flu);
var sport = weather.suggestion.sport;
sport.title = "运动";
sport.id = 3;
suggestion.push(sport);
var trav = weather.suggestion.trav;
trav.title = "旅游";
trav.id = 4;
suggestion.push(trav);
var uv = weather.suggestion.uv;
uv.title = "紫外线强度";
uv.id = 5;
suggestion.push(uv);
var cw = weather.suggestion.cw;
cw.title = "洗车";
cw.id = 6;
suggestion.push(cw);
var air = weather.suggestion.air;
air.title = "污染扩散";
air.id = 7;
suggestion.push(air);
this.setData({
weather: {
hourly_forecast: hourly_forecast,
daily_forecast: daily_forecast,
aqi: weather.aqi.city,
now: weather.now,
astro: daily_forecast[0].astro,
suggestion: suggestion
},
updateTimeHidden: false,
updateTime: weather.basic.update.loc
});
// 2秒后隐藏更新时间
var timer = setTimeout(function() {
that.setData({
updateTimeHidden: true
});
}, 2000);
},
(2)数据绑定,以7天天气为例
<view class='sevendays-bg'>
<view class='sevendays-title'>7天天气预报</view>
<scroll-view>
<block wx:key="daily_forecast" wx:for="{{weather.daily_forecast}}" wx:for-item="item" wx:for-index="index">
<view class='sevendays-templatebg'>
<template is="sevenDays" data="{{item: item, isnight: isNight, index: index}}" />
</view>
</block>
</scroll-view>
</view>
至此,日播天气就结束了。一周学会小程序,怎么不可能?学的很精通那是有难度的,入门还是可以的,我就是一周就写了这个小程序的。
2021.2.2更新 附下载地址
上一篇: Android studio+uniapp】将Android插件打包成ar包在uniapp中使用,Android studio会将uniapp本地资源包打包成apk,以及一些常用配置
下一篇: 8 月 6 日 李佳琪现场预览
推荐阅读
-
在线学习在线教育小程序:亲手搭建
-
学习小程序笔记(二)——了解view、text、image标签和flex布局
-
打造个性化学习天地:知识付费小程序的开发技术实践
-
全球首个微信小程序(应用号)开发教程!通宵吐血赶稿,每日更新!
-
2020全新微信小程序学习宝典:一网打尽文档、视频教程、实战课、开源项目及框架资源
-
go语言Socket编程-Socket编程 什么是Socket Socket,英文含义是插座、插孔,一般称之为套接字,用于描述IP地址和端口。可以实现不同程序间的数据通信。 Socket起源于Unix,而Unix基本哲学之一就是“一切皆文件”,都可以用“打开open –> 读写write/read –> 关闭close”模式来操作。Socket就是该模式的一个实现,网络的Socket数据传输是一种特殊的I/O,Socket也是一种文件描述符。Socket也具有一个类似于打开文件的函数调用:Socket,该函数返回一个整型的Socket描述符,随后的连接建立、数据传输等操作都是通过该Socket实现的。 套接字的内核实现较为复杂,不宜在学习初期深入学习,了解到如下结构足矣。 套接字通讯原理示意 在TCP/IP协议中,“IP地址+TCP或UDP端口号”唯一标识网络通讯中的一个进程。“IP地址+端口号”就对应一个socket。欲建立连接的两个进程各自有一个socket来标识,那么这两个socket组成的socket pair就唯一标识一个连接。因此可以用Socket来描述网络连接的一对一关系。 常用的Socket类型有两种:流式Socket(SOCK_STREAM)和数据报式Socket(SOCK_DGRAM)。流式是一种面向连接的Socket,针对于面向连接的TCP服务应用;数据报式Socket是一种无连接的Socket,对应于无连接的UDP服务应用。 网络应用程序设计模式 C/S模式 传统的网络应用设计模式,客户机(client)/服务器(server)模式。需要在通讯两端各自部署客户机和服务器来完成数据通信。 B/S模式 浏览器(Browser)/服务器(Server)模式。只需在一端部署服务器,而另外一端使用每台PC都默认配置的浏览器即可完成数据的传输。 优缺点 对于C/S模式来说,其优点明显。客户端位于目标主机上可以保证性能,将数据缓存至客户端本地,从而提高数据传输效率。且,一般来说客户端和服务器程序由一个开发团队创作,所以他们之间所采用的协议相对灵活。可以在标准协议的基础上根据需求裁剪及定制。例如,腾讯所采用的通信协议,即为ftp协议的修改剪裁版。 因此,传统的网络应用程序及较大型的网络应用程序都首选C/S模式进行开发。如,知名的网络游戏魔兽世界。3D画面,数据量庞大,使用C/S模式可以提前在本地进行大量数据的缓存处理,从而提高观感。 C/S模式的缺点也较突出。由于客户端和服务器都需要有一个开发团队来完成开发。工作量将成倍提升,开发周期较长。另外,从用户角度出发,需要将客户端安插至用户主机上,对用户主机的安全性构成威胁。这也是很多用户不愿使用C/S模式应用程序的重要原因。 B/S模式相比C/S模式而言,由于它没有独立的客户端,使用标准浏览器作为客户端,其工作开发量较小。只需开发服务器端即可。另外由于其采用浏览器显示数据,因此移植性非常好,不受平台限制。如早期的偷菜游戏,在各个平台上都可以完美运行。 B/S模式的缺点也较明显。由于使用第三方浏览器,因此网络应用支持受限。另外,没有客户端放到对方主机上,缓存数据不尽如人意,从而传输数据量受到限制。应用的观感大打折扣。第三,必须与浏览器一样,采用标准http协议进行通信,协议选择不灵活。 因此在开发过程中,模式的选择由上述各自的特点决定。根据实际需求选择应用程序设计模式。 简单的C/S模型通信 Server端:Listen函数 func Listen(network, address string) (Listener, error) network:选用的协议:TCP、UDP, 如:“tcp”或 “udp” address:IP地址+端口号, 如:“127.0.0.1:8000”或 “:8000” Listener 接口: type Listener interface { Accept (Conn, error) Close error Addr Addr } Conn 接口: type Conn interface { Read(b byte) (n int, err error) Write(b byte) (n int, err error) Close error LocalAddr Addr RemoteAddr Addr SetDeadline(t time.Time) error SetReadDeadline(t time.Time) error SetWriteDeadline(t time.Time) error } 参看 [<u>https://studygolang.com/pkgdoc</u>](https://studygolang.com/pkgdoc) 中文帮助文档中的demo: 示例代码:TCP服务器.go package main import ( "net" "fmt" ) func main { // 创建监听 listener, err:= net.Listen("tcp", ":8000") if err != nil { fmt.Println("listen err:", err) return } defer listener.Close // 主协程结束时,关闭listener fmt.Println("服务器等待客户端建立连接...") // 等待客户端连接请求 conn, err := listener.Accept if err != nil { fmt.Println("accept err:", err) return } defer conn.Close // 使用结束,断开与客户端链接 fmt.Println("客户端与服务器连接建立成功...") // 接收客户端数据 buf := make(byte, 1024) // 创建1024大小的缓冲区,用于read n, err := conn.Read(buf) if err != nil { fmt.Println("read err:", err) return } fmt.Println("服务器读到:", string(buf[:n])) // 读多少,打印多少。 }
-
Python 每日小程序 3 命令行绘制棋盘
-
Android 学习 - 每日时钟应用程序 - 定时闹钟提醒功能
-
打孔卡学习小程序_小型打孔卡小程序_小型打孔卡小程序
-
基于微信小程序实现日常学习打卡系统项目演示【附项目源码】--微信小程序文件目录