项目实训周报（二）：

本期周报来介绍一下一个简单主页面的设计与实现，我所实现的页面如下图所示：

                                   

（一）主页面的区域分布：

      可以看到，该页面主要由四部分组成分别是顶层的轮播图，中部的搜索区和功能区（景点介绍、天气情况等）以及底部的tabBar导航区。

      因此我的wmxl即页面布局文件，也将分成这几个部分去写。

                     

（二）：轮播图区

               轮播图区的实现十分简单，在wmxl文件里按固定格式写好<swiper>组件，其中的属性：autoplay表示自动播放，interval表示播放间隔，circular表示循环播放。接着在css文件里设置好尺寸，在js文件里配置好想要轮播的图片即可（图片既可以是本地路径也可以是网页连接）。

                            

（三）：搜索区

     搜索区有两行，第一行显示搜索图标与文字提示（没什么用起装饰作用），第二行为搜索框与搜索按钮。搜索框会将输入文本传给变量，搜索按钮会跳转相应所绑定的搜索函数。相应的在.js文件里写好相应的函数。

（三）：功能区。

          功能区以2*2的结构放置了四个相应功能的跳转区域，我们通过wx:for语句循环放置相应的图片与文本介绍。在设置布局时，让每个区域水平、垂直对齐，同时每个占据50%的宽度，这样当放置四个区域时，就形成了2*2的布局。以下三张图分别为实现该区域的wxml、css、js文件。

（四）：tabBar导航区。

         该页面的最低端是tabBar导航区，我设置了两个区域分别是主页面与地图区域，由于tapbar是针对整体项目的，所以它要在全局配置的app.json文件中进行设置，在文件中设置"tabBar"属性设置好相应的图标、文字说明与跳转页面路径即可，如下图所示。