微信小程序－微天气（下）_微信小程序小程序模板-微信小程序

欢迎光临，了解微信小程序开发，就上易用通！

微信小程序－微天气（下）

模板分类：小程序模板	模板编号： Y39	源码文件：完全开源	下载权限： VIP会员
模板大小：	模板指数： ℃	更新时间： 2018-01-16 09:33	模板等级： ☆☆☆☆☆

模板截图：

这次咱们继续进行 UI 层的开发：

那么咱们继续，首先咱们来看一下 index.wxml, 这个页面中定义了 index 页面的 UI：

<view class="container">
<view class="top">
<view>{{weather.city}}</view>
<view>{{weather.current.formattedDate}}</view>
<view>{{weather.current.formattedTime}} 更新</view>
</view>
<view class="topRegion">
<view id="temperature" >{{weather.current.temperature}}℃</view>
<view id="summary" >{{weather.current.summary}}</view>
</view>
<view class="summary" >
<view>一周天气预报</view>
<view style="margin-top:20rpx">{{weather.daily.summary}}</view>
</view>
<view class="daily" >
<view class="daily_item" wx:for="{{weather.daily.data}}">
<view class="daily_weekday" >{{item.weekday}}</view>
<view class="daily_temperature" >{{item.temperatureMin}}-{{item.temperatureMax}}℃ </view>
<view class="daily_summary" >{{item.summary}}</view>
</view>
</view>
</view>

复制代码

　　首页的所有 UI 内容就都在这里了，大家是否还记得咱们这个小程序主界面的样子？贴出来再给大家回顾一下：

　这个界面就是上面那段代码生成的了。接下来咱们逐一分解。把上面的完整代码简化一下，咱们先来看看整个 UI 的结构：

<viewclass="container">
<viewclass="top">
</view>
<viewclass="topRegion">
</view>
<viewclass="summary">
</view>
<viewclass="daily">
</view>
</view>
</view>

复制代码

　最外层是一个 class 为 container 的 View，它的里面放了 4 个子 View，分别为 top， topRegion，summary 和 daily。　　top 区域是我们最顶部的地方微信小程序－微天气（下）(图2)

　来看看 top 的完整定义：

<view class="top">
<view>{{weather.city}}</view>
<view>{{weather.current.formattedDate}}</view>
<view>{{weather.current.formattedTime}}更新</view>
</view>

复制代码

　里面的 3 个子视图分别对应了要显示的几个数据条目，并且用一对大括号来引用我们 index.js 中定义的 data 数据中的内容。关于数据绑定的基本知识咱们在之前的文章中已经介绍过，如果对数据绑定不熟悉的话还可以参看之前的内容~

然后接下来就是 topRegion, 这个区域也很简单，显示我们当前地区的温度以及天气情况：

<view class="topRegion">
<view id="temperature" >{{weather.current.temperature}}℃</view>
<view id="summary" >{{weather.current.summary}}</view>
</view>

复制代码

　还是简单的数据绑定，体现在界面上就是这个区域：微信小程序－微天气（下）(图3)

　summary 区域的逻辑和前面两个分别不大，就不多说了。最后再来看一下 daily 部分，这里面用到了一个循环语法：

<viewclass="daily">
<viewclass="daily_item"wx:for="{{weather.daily.data}}">
<viewclass="daily_weekday">{{item.weekday}}</view>
<viewclass="daily_temperature">{{item.temperatureMin}}-{{item.temperatureMax}}℃ </view>
<viewclass="daily_summary">{{item.summary}}</view>
</view>
</view>

复制代码

它的第一个子视图使用了 wx:for 这个语法。这个标记相当于对传入它的属性进行一个循环遍历，也就是。然后这个标签内部的子标签会根据集合的数量重复出现，如果要引用每次遍历到的元素，可以使用 item，比如我们这里的和等。

这样，我们最终在界面看到的效果是一个循环遍历后的结果: 微信小程序－微天气（下）(图4)

到此为止， index.wxml 的内容咱们就都介绍完了。但是单纯的只有这些还不能构成完整的 UI 界面。还需要最后一个东西，那就是 wxss，也就是样式表。那么继续来看几个例子：

.container{
　　height:100%;
　　display:flex;
　　flex-direction:column;
　　box-sizing:border-box;
　　background-image:url(images/bg.jpg);
　　background-size:100%;
　　padding:20rpx;
　　}

复制代码

　这个是最外层 container 的样式，它除了可以使用传统的 css 样式，还可以使用微信特有的一些样式，比如 display: flex 和 flex-direction: column。还要注意我们这里用到了一个新的单位 rpx。这个也是微信自有的特性 - responsive pixel。它相当于一个自适应尺寸，所有的屏幕宽度都是 750rpx，我们只需要记得这个特性即可，其他的微信小程序会根据具体的手机尺寸自行计算相对尺寸。　　这里我就捡两个重要的特点和大家介绍一下。这个小程序完整的样式表比较繁琐。而且都是相似的内容，就不跟大家过多讲解。如果大家需要了解完整的内容，还是可以到咱们的 Github 主页上面下载完整的项目 https://github.com/swiftcafex/wechat-weather