前言
经过3天的中秋小长假后，今天又开始回到我疯狂的学习状态中了，记得前面我已经分享了一篇：Android程序猿从零开发小程序项目(一)，接下来已经完成了这个小程序项目的天气预报部分了，这天气预报是我刚接触小程序的时候，跟着别人学习的，由于当时很多不懂的，做得也有点乱，所以今天就重新整理到本项目中。
效果图
先看效果图吧。。。
image
实践
涉及到的必备知识css的一些基础、小程序的网络请求、小程序js交互逻辑，如果对这些不够了解的话，建议先补充这些方面知识。
1.新建天气预报页面pages：
新建好小程序pages后，开发工具会自动生成页面的.js、.json、.wxml、.wxss这4个文件，具体的作用我就不啰嗦了！
2.定义页面标题为“天气预报”，当然这里可以不定义，将默认显示app.js里定义的全部标题
1{
2 "navigationBarTitleText": "天气预报"
3}
3.布局排版wxml
1<!--天气预报-->
2<view class='page-body'>
3 <view class='top'>
4 <image src="../../images/weather_bg.jpg" class="img-bg"></image>
5 <view class='top-context'>
6 <!--城市+天气信息-->
7 <view class="currentWeather">
8 <view class="city">
9 <text decode="{{true}}">{{currCity}} {{currLocation}}</text>
10 </view>
11 <view class='temp-view'>
12 <text class='temp'>{{nowTmp}}</text> <text >℃</text>
13 </view>
14 <view class='weather-view'>
15 <text decode="{{true}}">{{condTxt}} | {{lifeType}}</text>
16 </view>
17 </view>
18 <!--天气详情-->
19 <view class="weatherDetail">
20 <view>
21 <view>{{dir}}</view>
22 <view>{{windDir}}</view>
23 <view class="bold">{{windSc}}级</view>
24 </view>
25 <view class="wline"></view>
26 <view>
27 <view>相对湿度</view>
28 <view class="bold">{{hum}}%</view>
29 </view>
30 <view class="wline"></view>
31 <view>
32 <view>体感温度</view>
33 <view class="bold">{{fl}}℃</view>
34 </view>
35 </view>
36 </view>
37 </view>
38
39 <view wx:for="{{dailyForecast}}" wx:key="this" wx:for-index="i" wx:for-item="item">
40
41 <view class="future-weather-view">
42
43 <!--开头 日期显示判断 -->
44 <view class="item_temp" wx:if="{{i>=3}}">{{item.date}}</view>
45 <view class="item_temp" wx:else>{{day[i]}}</view>
46
47 <!--中间部分 图片(区分白天黑夜) 和天气情况-->
48 <view>
49 <image class="forecast-img" src="../../images/icons/{{item.cond_code_d}}.png" wx:if="{{updateTime < 18}}"></image>
50 <image class="forecast-img" src="../../images/icons/{{item.cond_code_n}}.png" wx:else></image>
51 <view class="item_temp" wx:if="{{item.cond_txt_d == item.cond_txt_n}}">{{item.cond_txt_d}}</view>
52 <view class="item_temp" wx:else>{{item.cond_txt_d}}转{{item.cond_txt_n}}</view>
53 </view>
54 <!--最后 温度 -->
55 <view class="item_temp">{{item.tmp_min}}/ {{item.tmp_max}}℃</view>
56 </view>
57</view>
58</view>
4.wxss样式，就是wxml的样式设置，主要用到flex布局，这里就只贴部分了，具体看demo
1.page-body {
2 width: 100%;
3 min-height: 100%;
4 display:flex;
5 flex-direction:column;
6 justify-content: space-between;
7 font-size: 32rpx;
8 font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif;
9}
5.js交互逻辑。主要是获取当前的位置经纬度，然后请求和风天气的接口，获取到天气数据后，动态展示到页面，具体看demo
1//通过微信，获取当前经纬度
2 getLocation: function () {
3 var that = this;
4 wx.getLocation({
5 type: "wgs84",
6 success: function (res) {
7 var latitude = res.latitude //纬度
8 var longitude = res.longitude //经度
9 //显示加载动画
10 wx.showLoading({
11 title: '加载中',
12 })
13
14 //调用天气查询
15 that.getWeatherInfo(latitude, longitude);
16 }
17 })
18 },
19 //通过和风天气接口，获取天气情况
20 getWeatherInfo: function (latitude, longitude) {
21 var that = this;
22 var keyV = '01a7798b060b468abdad006ea3de4713';//你自己的key
23 var url = 'https://free-api.heweather.com/s6/weather';
24 wx.request({
25 url: url,
26 data: {
27 key: keyV,
28 location: longitude + ',' + latitude
29 },
30 success: function (res) {
31 //1解析整理数据
32
33 //2设置数据
34
35 }
36 });
37
38 //隐藏加载动画
39 setTimeout(function () {
40 wx.hideLoading()
41 }, 2000)
42 }
接下来我将会利用业余时间来完成这个属于自己的小程序项目，欢迎大家关注本公众号，一起学习，谢谢！
项目地址：https://github.com/zsml2016/LivingTools
支持我的话可以关注下我的公众号，也欢迎大家投稿~
扫一扫关注我的微信公众号：程序员在广东my二维码.jpg
网友评论