剑客
关注科技互联网

微天气 – 开发一个完整的微信小程序(下)

微天气这个系列的最后一篇,这次来讨论一下小程序 UI 层相关的知识。

前面两篇文章中, 我们分别讨论了微天气小程序的数据层,以及应用层的相关思路。 这次咱们继续进行 UI 层的开发。 如果需要了解前面的内容,大家还可以参考这两篇文章:

微天气 – 开发一个完整的微信小程序(上)

微天气 – 开发一个完整的微信小程序(中)

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

<!--index.wxml-->
<!--
<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 的结构:

<!-- 
<view class="container">
<view class="top">
</view>
<view class="topRegion">
</view>
<view class="summary" >
</view>
<view class="daily" >
</view>
</view>
</view>
-->

最外层是一个 class 为 container 的 View, 它的里面放了 4 个子 View, 分别为 top, topRegion,summary 和 daily。

top 区域是我们最顶部的地方

微天气 - 开发一个完整的微信小程序(下)

来看看 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>
-->

还是简单的数据绑定, 体现在界面上就是这个区域:

微天气 - 开发一个完整的微信小程序(下)

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

<!-- 
<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>
-->

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

这样,我们最终在界面看到的效果是一个循环遍历后的结果:

微天气 - 开发一个完整的微信小程序(下)

到此为止, 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

结尾

到此为止,用了三篇文章跟大家介绍了一个小程序从构建到开发的完整过过程。 这个天气小程序逻辑并不复杂,但通过它大家应该可以对整个开发的过程有一个亲身的了解。也是希望它能起到一个抛砖引玉的作用,大家如果有好的想法 也欢迎大家在 Github 上面 Fork 这个项目,一起来完善它。

如果你觉得这篇文章有帮助,还可以关注微信公众号 swift-cafe,会有更多我的原创内容分享给你~

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址