推荐下载
-
2020-05-12 浏览：740
-
2020-05-06 浏览：521
-
2020-05-08 浏览：510
-
2020-04-04 浏览：504
-
2020-05-12 浏览：502
一周学会小程序-日播天气
发布时间:2020-10-03
1. 通过定位或选取位置获取当天详细天气预报
（1）天气情况，包括温度「当前温度、最低温度和最高温度」、天气、空气质量、湿度、风向和风速、日出和日落、气压、能见度等； （2）生活指数，包括舒适度、穿衣、感冒、运动、旅游、紫外线强度、洗车、污染扩散等。
2. 24小时天气预报 3. 7天天气预报 细节：增加类似于App的启动页
具体功能实现： 1.接口部分：使用京东万象提供的免费天气接口（京东万象官网地址）
（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=http://www.yiyongtong.com/archives/"../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.数据交互部分：
- 上一篇：微信小程序·云开发初体验
- 下一篇：大风起兮云飞扬！ 小程序云开发实战奉上
