Android程序猿从零开发小程序项目(二)

 

前言

经过3天的中秋小长假后，今天又开始回到我疯狂的学习状态中了，记得前面我已经分享了一篇：Android程序猿从零开发小程序项目(一)，接下来已经完成了这个小程序项目的天气预报部分了，这天气预报是我刚接触小程序的时候，跟着别人学习的，由于当时很多不懂的，做得也有点乱，所以今天就重新整理到本项目中。

效果图

先看效果图吧。。。

 

实践

涉及到的必备知识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}}&nbsp;{{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}}&nbsp;|&nbsp;{{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

扫一扫关注我的微信公众号：程序猿在广东