接觸微信小程序也有一段時間了，為了挑戰(zhàn)下自己吧，于是決定試著仿一個微信小程序，并且決定把它寫成文章發(fā)表出來，同大家一起學習交流，會試著一直更新，直到把小程序寫完，寫的不好或者需要改進的，歡迎大家指出來一起交流進步。今天要跟大家分享的是青桔單車首頁的框架布局。

布局思路

觀察原圖

首先來看一下官方小程序的首頁圖

得出以下幾點結果

1. 整個頁面為上下布局
2. 最頂部的導航欄沒有采用小程序自帶的默認樣式

   

3. 整個頁面左右兩邊離外邊距存在相同的間距，中下一部分有相同的背景色
4. 部分區(qū)域存在相同的樣式

布局

有了以上的觀察，在結合這個小程序的其他頁面的情況，我決定將這個頁面切為的六部分，而功能欄和活動中心欄又可用一個大盒子裝起來，因為它們的背景色和外邊距相同

實現(xiàn)

頂部導航欄

官方的單車小程序眾多頁面的頂部導航欄內容樣式大概分為兩種，一種是首頁的這種導航欄不帶返回按鈕，還有一種是如下圖這種帶返回按鈕導航欄，還需考慮的就是導航欄背景顏色的不同。

考慮到以上的情況，我決定自定義一個兼容性較好的頂部導航欄組件，其可根據(jù)父組件傳遞的數(shù)據(jù)來控制具體的導航欄的生成。 考慮到完成該小程序可能會自定義多個組件，我打算在根目錄專門創(chuàng)建一個名為"components"的文件夾來放置自定義的組件，然后在其中創(chuàng)建小程序的第一個自定義的組件，名為"topNav"，接著再在首頁的.json文件夾去引用新建的這個topNav組件。

{
  "usingComponents": {
    "topNav": "../../components/topNav/topNav"
  },
}
復制代碼

之后就是如何是編寫我們的topNav組件了。 首先我們要知道頂部的導航欄可被細分為最上面顯示時間的狀態(tài)欄和與膠囊按鈕在同一層次的內容欄

狀態(tài)欄的高度(statusBarHeight)可根據(jù)微信小程序自帶的api wx.getStorageSync() 取得并且所有品牌的手機都是一樣的，內容欄的高度(navBarHeight 自定義的變量)會因為手機品牌的不同而不同，不過一般也將其分為安卓和蘋果兩大類，蘋果的一般為48px，安卓的為44px,至于手機型號也可以根據(jù)上述的api來取得，所有我們可以在全局定義一個用戶的對象來專門存儲與用戶有關的信息，然后把高度存入其中，方便之后的調用

 wx.user = {} // 新建一個用戶對象用來存儲用戶的基本信息
    let info = wx.getSystemInfoSync()//獲取用戶系統(tǒng)信息
    // console.log(info) // 可打印出來
    wx.user.statusBarHeight = info.statusBarHeight // 獲取狀態(tài)欄高度
    if(info.platform === 'android'){ // 判斷機型來設置內容欄高度 
      wx.user.navBarHeight = 48
    }else{
      wx.user.navBarHeight = 44
    }
復制代碼

接著來寫topNav的wxml結構，這個結構就比較簡單了，我簡單說下思路，首先在最外面布局一個view來裝所有的內容，然后再在這個view里放置兩個同級的盒子，一個用來裝整個的頂部導航欄內容，一個用來 占位使用 ，之所以需要這么一個占位塊，是因為我們頂部導航欄要使用固定定位使其始終固定在頁面的頂部，而使用定位會使其脫離文檔流，導致后面的dom結構往前頂，于是使用這么一個占位塊來占用它的位置，消除對后面dom結構的影響。裝整個的頂部導航欄內容的盒子里面再放入兩個view分別來裝狀態(tài)欄和內容欄，大致就是這樣

<view>
   <!-- 占位塊，頂替脫離文檔流的頂部導航欄 -->
  <view style="height:{{topHeight}}px">
  </view>
  <view class="container" style="background-color:{{backgroundColor}}">
    <!-- 狀態(tài)欄 -->
    <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樣式很簡單，只要實現(xiàn)文字的垂直居中，選擇的方法也很多，設置line-height，或者彈性布局都行。

用戶個人信息

這個板塊的內容比較細，我們可以采用左右布局來實現(xiàn)，左邊放文字信息，右邊放圖片和查看特權條

再寫之前注意到左邊文字內容的上下間距是一樣的，寫的時候注意設置的間距要統(tǒng)一，實現(xiàn)方式magrin padding都行，不過在使用padding注意需不需要設置box-sizing轉化為內邊距 這一塊的布局我采用的是彈性布局 從最外面的盒子開始就設置彈性布局，讓裝有文字信息和圖片的盒子直接處于同一行，昵稱和等級排在同一行的實現(xiàn)也是在裝有它們的盒子設置彈性布局，徽章這個小圖標用定位實現(xiàn)，下劃線可以上面的盒子border-botom，查看特權條居中顯示設置align-item；center，也可以用定位實現(xiàn)，總之實現(xiàn)的方法有許多。

消息推送欄

消息推送欄里的消息是每隔幾秒會跳轉的，放在小程序里實現(xiàn)還是簡單的，因為有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從數(shù)據(jù)源data調用，用上循環(huán)遍歷，在稍微設置一下swiper的基本屬性就行了。具體的可以查官方的小程序文檔，這里的布局也是彈性布局

青桔功能欄

這塊的布局和下面的青桔活動欄可直接用一個大盒子裝起來，再在大盒子里設背景色和padding值。 直接上彈性布局，先切一個小框出來，其他用循環(huán)實現(xiàn)，這里比較要注意在外面的盒子設置flex-wrap: wrap 使其換行，還有就是 justify-content: space-between讓同一行的兩個盒子處于兩端，寬度再設置一下，兩個盒子中間的縫隙就出來了，單個小框里也直接用彈性布局，分為左中右，algin-item：center垂直居中。

青桔活動中心欄

上下布局，上面的盒子放標題文字，下面放具體的活動框，活動框左右布局，左邊文字右邊圖，也是先寫好一個樣式再用循環(huán)導出。其他比較好實現(xiàn)，唯一比較難一點的就是框里面的圖片了，你會發(fā)現(xiàn)的里面圖片上面會溢出來但是圖片下面卻像是被切割了一樣，我實現(xiàn)的方法是最外面放一個盒子，盒子設為矩形，背景色為白色，然后把圖片放入其中，圖片的大小跟盒子的大小一樣，再設置盒子的border-radius為50%，overflow：hidden，使其變圓把圖片下部切割，然后再用定位放一個長寬和之前盒子的寬相等的盒子，也設置border-radius為50%，給他一個藍色的背景色，把放入之前盒子的底部，再通過設置z-index讓圖片蓋到盒子上，差不多也能實現(xiàn)這個效果

底部導航欄

這個官方的小程序是沒有tabBar的，只有首頁存在這個底部導航欄整，底部導航欄也要固定定位底部。因此只要這個頁面實現(xiàn)就行了，我是這樣布局的，因為中間要放個按鈕，并且四個標題的左右間距是一樣的，首先所以先在最外面的盒子上彈性布局和justify-content: space-between，里面放兩個盒子，這兩個盒子肯定會一左一右被放置再兩邊，然后每個盒子先設彈性布局然后再里面又分別放兩個盒子用來裝標題，再設置放標題的小盒子的padding值和彈性垂直居中，掃二維碼的按鈕用定位實現(xiàn)，通過盒子嵌套盒子，盒子設置彈性布局讓盒子垂直水平居中，再最里面的盒子放二維碼圖片，同時設置一個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="">停車區(qū)</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>
復制代碼

實現(xiàn)效果

還是有點像的吧。。。

總結

這個頁面的布局還是不難的，很適合剛學不久的同學們作為入手，用的最多的還是彈性布局，有不懂的或者有改進的，歡迎在評論區(qū)留言