案例三——天气预报

1、
加背景图，小程序不可以background-image，这样只能加网络图片

这里写图片描述

应该：
index.wxml

<!-- 添加背景图片 -->
  <image src='../../images/back.jpg' class='bgi' mode='aspectFill'></image>
  <!-- 所有的内容 -->
  <view class='body'>

  </view>

index.wxss

.bgi{
  width: 100%;
  height: 100%;
  display: block;

  /* 作为背景图，其他的都要放在其上面 */
  /* 绝对定位 */
  position: absolute;
  left: 0;
  top: 0;
}
.body{
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

2、
绝对定位：

绝对定位使元素的位置与文档流无关，因此不占据空间。普通文档流中其他的元素的布局就像绝对定位元素不存在时一样。绝对定位的元素的位置相对于最近的已定位的祖先元素。如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。

因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其他元素，这样就出现了一个层次的问题，我们可以通过z-index属性来控制这些框的堆放次序。z-index的值越高，框在堆中的位置就越高。

参考文章：https://blog.csdn.net/hyr_ii/article/details/53769223

3、
弹性布局居中
index.wxml

<view class='body'>
    <view class='header'>
      <!-- 左部文字 -->
      <image src='{{nowweatherImg}}'></image>
      <!-- 右边文字 -->
      <view>
        <text style='font-size: 80rpx;'>{{cityname}}</text>
        <text class='txtaph'>{{weekday}}</text>
        <text class='txtaph'>{{weatherinfo}}</text>
      </view>
    </view>
  </view>

index.wxss

.body .header{
  /* 使用弹性布局居中 */
  display: flex;
  justify-content: center;

  margin-top: 50rpx;

  /* 将图片靠下对齐 */
  align-items: flex-end;
}

效果：
这里写图片描述

flex布局参考：https://www.cnblogs.com/huihuizhang/p/7998902.html

4、
并列的text向下排列

.body .header view{
  /* 将view内的三个text竖着排列 */
  display: flex;
  flex-direction: column;
}

5、
字体透明度

color: rgba(255, 255,255, 0.6);

或者

  color: rgb(255, 255, 255);
  opacity: 0.6;

opacity取值为0.0-1.0

6、
获取城市天气：工具为：和风天气
https://free-api.heweather.com/s6/weather/now?key=289eb322373d499890558a037ee1d816&location=北京

两个必填参数为：location和key

获得内容为：

{"HeWeather6":[{"basic":{"cid":"CN101010100","location":"北京","parent_city":"北京","admin_area":"北京","cnty":"中国","lat":"39.90498734","lon":"116.4052887","tz":"+8.00"},"update":{"loc":"2018-07-17 14:48","utc":"2018-07-17 06:48"},"status":"ok","now":{"cloud":"100","cond_code":"305","cond_txt":"小雨","fl":"26","hum":"94","pcpn":"1.2","pres":"1004","tmp":"24","vis":"10","wind_deg":"91","wind_dir":"东风","wind_sc":"2","wind_spd":"8"}}]}

参考文档：
https://www.heweather.com/documents/api/s6/weather-now

7、
向腾讯发出网络请求，提交经纬度，并获取城市信息

url: `https://apis.map.qq.com/ws/geocoder/v1/?location=${latitude},${longitude}&key=WV7BZ-IPMK2-PSLU2-C63EH-7FBMF-TTBX3`,

这个url内包含变量，所以必须`，而不是’

8、
下拉刷新：
index.js

// 下拉刷新
  onPullDownRefresh: function(){
      console.log('在刷新！');
      this.onLoad();
  },

index.json

{
  "enablePullDownRefresh": true,
  "backgroundTextStyle": "dark"
}

9、
循环
数组，wx:for=”{{数组名}}”

 <block wx:for="{{forecastData}}">

        <view>
          <image style='width:120rpx; height:120rpx;' mode='aspectFit' src='../../images/140.png'></image>
          <view>
            <text>{{item.date}}{{item.cond_txt_d}}</text>
          </view>
          <view>
            <text>{{item.tmp_min}}°C ~ {{item.tmp_max}}°C</text>
          </view>
        </view>

      </block>

10、
数据缓存

在修改数据之后：

//设置缓存,键值对
  wx.setStorageSync('data', 'that.data');

在onload函数内：

 //获取缓存数据,不需要带大括号
    that.setData(wx.getStorageSync('data'))

案例三——天气预报

猜你喜欢