微信小程序－微天气（下）
| 这次咱们继续进行 UI 层的开发：
那么咱们继续， 首先咱们来看一下 index.wxml, 这个页面中定义了 index 页面的 UI：
首页的所有 UI 内容就都在这里了， 大家是否还记得咱们这个小程序主界面的样子？ 贴出来再给大家回顾一下：
 |
这个界面就是上面那段代码生成的了。 接下来咱们逐一分解。 把上面的完整代码简化一下，咱们先来看看整个 UI 的结构：
复制代码 最外层是一个 class 为 container 的 View， 它的里面放了 4 个子 View， 分别为 top， topRegion，summary 和 daily。
复制代码 里面的 3 个子视图分别对应了要显示的几个数据条目， 并且用一对大括号来引用我们 index.js 中定义的 data 数据中的内容。 关于数据绑定的基本知识咱们在之前的文章中已经介绍过， 如果对数据绑定不熟悉的话还可以参看之前的内容~ |
然后接下来就是 topRegion, 这个区域也很简单，显示我们当前地区的温度以及天气情况：
复制代码 还是简单的数据绑定， 体现在界面上就是这个区域：
复制代码 它的第一个子视图使用了 wx:for 这个语法。 这个标记相当于对传入它的属性进行一个循环遍历， 也就是 。 然后这个标签内部的子标签会根据集合的数量重复出现，如果要引用每次遍历到的元素， 可以使用 item， 比如我们这里的 和 等。 |
这样，我们最终在界面看到的效果是一个循环遍历后的结果: 到此为止， index.wxml 的内容咱们就都介绍完了。 但是单纯的只有这些还不能构成完整的 UI 界面。 还需要最后一个东西， 那就是 wxss，也就是样式表。 那么继续来看几个例子：
复制代码 这个是最外层 container 的样式，它除了可以使用传统的 css 样式， 还可以使用微信特有的一些样式， 比如 display: flex 和 flex-direction: column。 还要注意我们这里用到了一个新的单位 rpx。 这个也是微信自有的特性 – responsive pixel。 它相当于一个自适应尺寸，所有的屏幕宽度都是 750rpx， 我们只需要记得这个特性即可， 其他的微信小程序会根据具体的手机尺寸自行计算相对尺寸。 |
