接触微信小程序也有一段时间了，为了挑战下自己吧，于是决定试着仿一个微信小程序，并且决定把它写成文章发表出来，同大家一起学习交流，会试着一直更新，直到把小程序写完，写的不好或者需要改进的，欢迎大家指出来一起交流进步。今天要跟大家分享的是青桔单车首页的框架布局。

布局思路

观察原图

首先来看一下官方小程序的首页图

得出以下几点结果

1. 整个页面为上下布局
2. 最顶部的导航栏没有采用小程序自带的默认样式

   

3. 整个页面左右两边离外边距存在相同的间距，中下一部分有相同的背景色
4. 部分区域存在相同的样式

布局

有了以上的观察，在结合这个小程序的其他页面的情况，我决定将这个页面切为的六部分，而功能栏和活动中心栏又可用一个大盒子装起来，因为它们的背景色和外边距相同

实现

顶部导航栏

官方的单车小程序众多页面的顶部导航栏内容样式大概分为两种，一种是首页的这种导航栏不带返回按钮，还有一种是如下图这种带返回按钮导航栏，还需考虑的就是导航栏背景颜色的不同。

考虑到以上的情况，我决定自定义一个兼容性较好的顶部导航栏组件，其可根据父组件传递的数据来控制具体的导航栏的生成。 考虑到完成该小程序可能会自定义多个组件，我打算在根目录专门创建一个名为"components"的文件夹来放置自定义的组件，然后在其中创建小程序的第一个自定义的组件，名为"topNav"，接着再在首页的.json文件夹去引用新建的这个topNav组件。

{
  "usingComponents": {
    "topNav": "../../components/topNav/topNav"
  },
}
复制代码

之后就是如何是编写我们的topNav组件了。 首先我们要知道顶部的导航栏可被细分为最上面显示时间的状态栏和与胶囊按钮在同一层次的内容栏

状态栏的高度(statusBarHeight)可根据微信小程序自带的api wx.getStorageSync() 取得并且所有品牌的手机都是一样的，内容栏的高度(navBarHeight 自定义的变量)会因为手机品牌的不同而不同，不过一般也将其分为安卓和苹果两大类，苹果的一般为48px，安卓的为44px,至于手机型号也可以根据上述的api来取得，所有我们可以在全局定义一个用户的对象来专门存储与用户有关的信息，然后把高度存入其中，方便之后的调用

 wx.user = {} // 新建一个用户对象用来存储用户的基本信息
    let info = wx.getSystemInfoSync()//获取用户系统信息
    // console.log(info) // 可打印出来
    wx.user.statusBarHeight = info.statusBarHeight // 获取状态栏高度
    if(info.platform === 'android'){ // 判断机型来设置内容栏高度 
      wx.user.navBarHeight = 48
    }else{
      wx.user.navBarHeight = 44
    }
复制代码

接着来写topNav的wxml结构，这个结构就比较简单了，我简单说下思路，首先在最外面布局一个view来装所有的内容，然后再在这个view里放置两个同级的盒子，一个用来装整个的顶部导航栏内容，一个用来 占位使用 ，之所以需要这么一个占位块，是因为我们顶部导航栏要使用固定定位使其始终固定在页面的顶部，而使用定位会使其脱离文档流，导致后面的dom结构往前顶，于是使用这么一个占位块来占用它的位置，消除对后面dom结构的影响。装整个的顶部导航栏内容的盒子里面再放入两个view分别来装状态栏和内容栏，大致就是这样

<view>
   <!-- 占位块，顶替脱离文档流的顶部导航栏 -->
  <view style="height:{{topHeight}}px">
  </view>
  <view class="container" style="background-color:{{backgroundColor}}">
    <!-- 状态栏 -->
    <view style="height:{{statusBarHeight}}px"></view>
    <!-- 内容栏 -->
    <view wx:if="{{isIncludingisReturn}}" class="two" style="{{navBarStyle}}">
      <image src="http://www.wxapp-union.com/image/左箭头.png"/>
      {{content}}
    </view>
    <view wx:else style="{{navBarStyle}}">{{content}}</view>
  </view>
</view>

复制代码

因为顶部导航栏样式分为带不带返回按钮，所有我干脆自定义一个可通过父组件传过来 类型为boolean的变量 "isIncludingisReturn" ，再在dom结构使用 wx:if语句通过判断"isIncludingisReturn"的值来决定导航栏的样式，再定义一些其他的变量来接收父组件传过来的值。

 properties: {
    isIncludingReturn:{
      type: Boolean,
      value: false
    },
    backgroundColor:{
      type: String,
      value: ''
    },
    content:{
      type: String,
      value: ''
    },
    textColor:{
      type: String,
      value:''
    }
  },

复制代码

我们可以在data里再定义一个navBarStyle变量，通过ES6的拼接把之前获取高度以及一些其他的样式存进里面，再传到dom里 之后只要在父组件里传值就行了，这个板块的css样式很简单，只要实现文字的垂直居中，选择的方法也很多，设置line-height，或者弹性布局都行。

用户个人信息

这个板块的内容比较细，我们可以采用左右布局来实现，左边放文字信息，右边放图片和查看特权条

再写之前注意到左边文字内容的上下间距是一样的，写的时候注意设置的间距要统一，实现方式magrin padding都行，不过在使用padding注意需不需要设置box-sizing转化为内边距 这一块的布局我采用的是弹性布局 从最外面的盒子开始就设置弹性布局，让装有文字信息和图片的盒子直接处于同一行，昵称和等级排在同一行的实现也是在装有它们的盒子设置弹性布局，徽章这个小图标用定位实现，下划线可以上面的盒子border-botom，查看特权条居中显示设置align-item；center，也可以用定位实现，总之实现的方法有许多。

消息推送栏

消息推送栏里的消息是每隔几秒会跳转的，放在小程序里实现还是简单的，因为有swiper组件。

<swiper class="pushMessage" autoplay interval="3000" duration="200" vertical="true" circular="true">
    <block wx:for="{{messageList}}" wx:key="index">
      <swiper-item>
        <view class="message-box">{{item.content}}</view>
      </swiper-item>
    </block>
  </swiper>
复制代码

把messageList从数据源data调用，用上循环遍历，在稍微设置一下swiper的基本属性就行了。具体的可以查官方的小程序文档，这里的布局也是弹性布局

青桔功能栏

这块的布局和下面的青桔活动栏可直接用一个大盒子装起来，再在大盒子里设背景色和padding值。 直接上弹性布局，先切一个小框出来，其他用循环实现，这里比较要注意在外面的盒子设置flex-wrap: wrap 使其换行，还有就是 justify-content: space-between让同一行的两个盒子处于两端，宽度再设置一下，两个盒子中间的缝隙就出来了，单个小框里也直接用弹性布局，分为左中右，algin-item：center垂直居中。

青桔活动中心栏

上下布局，上面的盒子放标题文字，下面放具体的活动框，活动框左右布局，左边文字右边图，也是先写好一个样式再用循环导出。其他比较好实现，唯一比较难一点的就是框里面的图片了，你会发现的里面图片上面会溢出来但是图片下面却像是被切割了一样，我实现的方法是最外面放一个盒子，盒子设为矩形，背景色为白色，然后把图片放入其中，图片的大小跟盒子的大小一样，再设置盒子的border-radius为50%，overflow：hidden，使其变圆把图片下部切割，然后再用定位放一个长宽和之前盒子的宽相等的盒子，也设置border-radius为50%，给他一个蓝色的背景色，把放入之前盒子的底部，再通过设置z-index让图片盖到盒子上，差不多也能实现这个效果

底部导航栏

这个官方的小程序是没有tabBar的，只有首页存在这个底部导航栏整，底部导航栏也要固定定位底部。因此只要这个页面实现就行了，我是这样布局的，因为中间要放个按钮，并且四个标题的左右间距是一样的，首先所以先在最外面的盒子上弹性布局和justify-content: space-between，里面放两个盒子，这两个盒子肯定会一左一右被放置再两边，然后每个盒子先设弹性布局然后再里面又分别放两个盒子用来装标题，再设置放标题的小盒子的padding值和弹性垂直居中，扫二维码的按钮用定位实现，通过盒子嵌套盒子，盒子设置弹性布局让盒子垂直水平居中，再最里面的盒子放二维码图片，同时设置一个padding值，二维码外面需要设置一个阴影，才有阴影的效果。

<view class="footer-bar">
  <view class="bar bar-left">
    <navigator class="footer-btn bar-mine" url="">我的</navigator>
    <navigator class="footer-btn bar-findCar" url="">找车</navigator>
  </view>
  <view class="bar bar-right">
    <navigator class="footer-btn bar-parkingArea" url="">停车区</navigator>
    <navigator class="footer-btn bar-more" url="">更多</navigator>
  </view>
</view>
<view class="footer-bar__code">
  <view class="code-box">
    <image src="http://www.wxapp-union.com/image/扫二维码.png" />
  </view>
</view>
复制代码

实现效果

还是有点像的吧。。。

总结

这个页面的布局还是不难的，很适合刚学不久的同学们作为入手，用的最多的还是弹性布局，有不懂的或者有改进的，欢迎在评论区留言