校内实习第七天

作业详情：链接：https://pan.baidu.com/s/1AA7gLDZqsBDEuqo5EawbkQ 
提取码：0mpr 

本次实验在微信公众平台的开发设置上新增了一个有关与天气的合法域名，使得定位地点具体到了区。

request 合法域名

https://apis.map.qq.com

而且在libs文件引入了两个天气的.js文件用来获取今天的天气以及7天的天气。

另外利用组件scroll-view对整个页面进行了上下滚动。scroll-y

以及对部分天气信息的显示和利用flex布局对其进行相关布局

wxml部分代码：

<!-- 24小时逐3小时预报 -->

<view class="today">24小时逐3小时预报</view>

<scroll-view class="toscroll-view_H" scroll-x="true">

<view class="toscroll-view-item_H" wx:for="{{weatherweek.data[0].hours}}" wx:key="{{item}}">

<view class="todetail">

<view class="toitem">

<text>时间</text>

<text>{{item.day}}</text>

</view>

<view class="toitem">

<text>温度(℃)</text>

<text>{{item.tem}}</text>

</view>

<view class="toitem">

<text>天气</text>

<text>{{item.wea}}</text>

</view>

<view class="toitem">

<text>风向</text>

<text>{{item.win}}</text>

</view>

<view class="toitem">

<text>风速</text>

<text>{{item.win_speed}}</text>

</view>

</view>

</view>

</scroll-view>

wxss部分代码：

.today{

color: #999;

text-align: center;

font-size: 28rpx;

margin: 5rpx 0;

/* padding-bottom: 10rpx; */

}

/* todetail */

.todetail{

margin: 30rpx 0;

display: flex;

flex-wrap: wrap;

border-left:1rpx solid #ddd;

border-top:1rpx solid #ddd;

box-sizing: border-box;

}

.todetail>.toitem{

padding: 10rpx 0;

height: 100rpx;

width:150rpx;

flex-basis: 33.3%;

font-size: 26rpx;

border-right: 1rpx solid #ddd;

border-bottom: 1rpx solid #ddd;

box-sizing: border-box;

display: flex;

justify-content: space-around;

flex-direction: column;

align-items: center;

}

.toscroll-view_H{

white-space: nowrap;

}

.toscroll-view-item_H{

display: inline-block;

}

结果：

具体利用各种布局以及信息显示以后的结果如下：