接觸微信小程序也(yě)有一段時(shí)間了(le／liǎo)，爲(wéi / wèi)了(le／liǎo)挑戰下自己吧，于(yú)是(shì)決定試着仿一個(gè)微信小程序，并且決定把它寫成文章發表出(chū)來(lái)，同大(dà)家一起學習交流，會試着一直更新，直到(dào)把小程序寫完，寫的(de)不(bù)好或者需要(yào / yāo)改進的(de)，歡迎大(dà)家指出(chū)來(lái)一起交流進步。今天要(yào / yāo)跟大(dà)家分享的(de)是(shì)青桔單車首頁的(de)框架布局。

布局思路

觀察原圖

首先來(lái)看一下官方小程序的(de)首頁圖

得出(chū)以(yǐ)下幾點結果

1. 整個(gè)頁面爲(wéi / wèi)上(shàng)下布局
2. 最頂部的(de)導航欄沒有采用小程序自帶的(de)默認樣式

   

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

布局

有了(le／liǎo)以(yǐ)上(shàng)的(de)觀察，在(zài)結合這(zhè)個(gè)小程序的(de)其他(tā)頁面的(de)情況，我決定将這(zhè)個(gè)頁面切爲(wéi / wèi)的(de)六部分，而(ér)功能欄和(hé / huò)活動中心欄又可用一個(gè)大(dà)盒子(zǐ)裝起來(lái)，因爲(wéi / wèi)它們的(de)背景色和(hé / huò)外邊距相同

實現

頂部導航欄

官方的(de)單車小程序衆多頁面的(de)頂部導航欄内容樣式大(dà)概分爲(wéi / wèi)兩種，一種是(shì)首頁的(de)這(zhè)種導航欄不(bù)帶返回按鈕，還有一種是(shì)如下圖這(zhè)種帶返回按鈕導航欄，還需考慮的(de)就(jiù)是(shì)導航欄背景顔色的(de)不(bù)同。

考慮到(dào)以(yǐ)上(shàng)的(de)情況，我決定自定義一個(gè)兼容性較好的(de)頂部導航欄組件，其可根據父組件傳遞的(de)數據來(lái)控制具體的(de)導航欄的(de)生成。 考慮到(dào)完成該小程序可能會自定義多個(gè)組件，我打算在(zài)根目錄專門創建一個(gè)名爲(wéi / wèi)"components"的(de)文件夾來(lái)放置自定義的(de)組件，然後在(zài)其中創建小程序的(de)第一個(gè)自定義的(de)組件，名爲(wéi / wèi)"topNav"，接着再在(zài)首頁的(de).json文件夾去引用新建的(de)這(zhè)個(gè)topNav組件。

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

之(zhī)後就(jiù)是(shì)如何是(shì)編寫我們的(de)topNav組件了(le／liǎo)。 首先我們要(yào / yāo)知道(dào)頂部的(de)導航欄可被細分爲(wéi / wèi)最上(shàng)面顯示時(shí)間的(de)狀态欄和(hé / huò)與膠囊按鈕在(zài)同一層次的(de)内容欄

狀态欄的(de)高度(statusBarHeight)可根據微信小程序自帶的(de)api wx.getStorageSync() 取得并且所有品牌的(de)手機都是(shì)一樣的(de)，内容欄的(de)高度(navBarHeight 自定義的(de)變量)會因爲(wéi / wèi)手機品牌的(de)不(bù)同而(ér)不(bù)同，不(bù)過一般也(yě)将其分爲(wéi / wèi)安卓和(hé / huò)蘋果兩大(dà)類，蘋果的(de)一般爲(wéi / wèi)48px，安卓的(de)爲(wéi / wèi)44px,至于(yú)手機型号也(yě)可以(yǐ)根據上(shàng)述的(de)api來(lái)取得，所有我們可以(yǐ)在(zài)全局定義一個(gè)用戶的(de)對象來(lái)專門存儲與用戶有關的(de)信息，然後把高度存入其中，方便之(zhī)後的(de)調用

 wx.user = {} // 新建一個(gè)用戶對象用來(lái)存儲用戶的(de)基本信息
    let info = wx.getSystemInfoSync()//獲取用戶系統信息
    // console.log(info) // 可打印出(chū)來(lái)
    wx.user.statusBarHeight = info.statusBarHeight // 獲取狀态欄高度
    if(info.platform === 'android'){ // 判斷機型來(lái)設置内容欄高度 
      wx.user.navBarHeight = 48
    }else{
      wx.user.navBarHeight = 44
    }
複制代碼

接着來(lái)寫topNav的(de)wxml結構，這(zhè)個(gè)結構就(jiù)比較簡單了(le／liǎo)，我簡單說(shuō)下思路，首先在(zài)最外面布局一個(gè)view來(lái)裝所有的(de)内容，然後再在(zài)這(zhè)個(gè)view裏放置兩個(gè)同級的(de)盒子(zǐ)，一個(gè)用來(lái)裝整個(gè)的(de)頂部導航欄内容，一個(gè)用來(lái) 占位使用 ，之(zhī)所以(yǐ)需要(yào / yāo)這(zhè)麽一個(gè)占位塊，是(shì)因爲(wéi / wèi)我們頂部導航欄要(yào / yāo)使用固定定位使其始終固定在(zài)頁面的(de)頂部，而(ér)使用定位會使其脫離文檔流，導緻後面的(de)dom結構往前頂，于(yú)是(shì)使用這(zhè)麽一個(gè)占位塊來(lái)占用它的(de)位置，消除對後面dom結構的(de)影響。裝整個(gè)的(de)頂部導航欄内容的(de)盒子(zǐ)裏面再放入兩個(gè)view分别來(lái)裝狀态欄和(hé / huò)内容欄，大(dà)緻就(jiù)是(shì)這(zhè)樣

<view>
   <!-- 占位塊，頂替脫離文檔流的(de)頂部導航欄 -->
  <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>

複制代碼

因爲(wéi / wèi)頂部導航欄樣式分爲(wéi / wèi)帶不(bù)帶返回按鈕，所有我幹脆自定義一個(gè)可通過父組件傳過來(lái) 類型爲(wéi / wèi)boolean的(de)變量 "isIncludingisReturn" ，再在(zài)dom結構使用 wx:if語句通過判斷"isIncludingisReturn"的(de)值來(lái)決定導航欄的(de)樣式，再定義一些其他(tā)的(de)變量來(lái)接收父組件傳過來(lái)的(de)值。

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

複制代碼

我們可以(yǐ)在(zài)data裏再定義一個(gè)navBarStyle變量，通過ES6的(de)拼接把之(zhī)前獲取高度以(yǐ)及一些其他(tā)的(de)樣式存進裏面，再傳到(dào)dom裏 之(zhī)後隻要(yào / yāo)在(zài)父組件裏傳值就(jiù)行了(le／liǎo)，這(zhè)個(gè)闆塊的(de)css樣式很簡單，隻要(yào / yāo)實現文字的(de)垂直居中，選擇的(de)方法也(yě)很多，設置line-height，或者彈性布局都行。

用戶個(gè)人(rén)信息

這(zhè)個(gè)闆塊的(de)内容比較細，我們可以(yǐ)采用左右布局來(lái)實現，左邊放文字信息，右邊放圖片和(hé / huò)查看特權條

再寫之(zhī)前注意到(dào)左邊文字内容的(de)上(shàng)下間距是(shì)一樣的(de)，寫的(de)時(shí)候注意設置的(de)間距要(yào / yāo)統一，實現方式magrin padding都行，不(bù)過在(zài)使用padding注意需不(bù)需要(yào / yāo)設置box-sizing轉化爲(wéi / wèi)内邊距 這(zhè)一塊的(de)布局我采用的(de)是(shì)彈性布局 從最外面的(de)盒子(zǐ)開始就(jiù)設置彈性布局，讓裝有文字信息和(hé / huò)圖片的(de)盒子(zǐ)直接處于(yú)同一行，昵稱和(hé / huò)等級排在(zài)同一行的(de)實現也(yě)是(shì)在(zài)裝有它們的(de)盒子(zǐ)設置彈性布局，徽章這(zhè)個(gè)小圖标用定位實現，下劃線可以(yǐ)上(shàng)面的(de)盒子(zǐ)border-botom，查看特權條居中顯示設置align-item；center，也(yě)可以(yǐ)用定位實現，總之(zhī)實現的(de)方法有許多。

消息推送欄

消息推送欄裏的(de)消息是(shì)每隔幾秒會跳轉的(de)，放在(zài)小程序裏實現還是(shì)簡單的(de)，因爲(wéi / wèi)有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調用，用上(shàng)循環遍曆，在(zài)稍微設置一下swiper的(de)基本屬性就(jiù)行了(le／liǎo)。具體的(de)可以(yǐ)查官方的(de)小程序文檔，這(zhè)裏的(de)布局也(yě)是(shì)彈性布局

青桔功能欄

這(zhè)塊的(de)布局和(hé / huò)下面的(de)青桔活動欄可直接用一個(gè)大(dà)盒子(zǐ)裝起來(lái)，再在(zài)大(dà)盒子(zǐ)裏設背景色和(hé / huò)padding值。 直接上(shàng)彈性布局，先切一個(gè)小框出(chū)來(lái)，其他(tā)用循環實現，這(zhè)裏比較要(yào / yāo)注意在(zài)外面的(de)盒子(zǐ)設置flex-wrap: wrap 使其換行，還有就(jiù)是(shì) justify-content: space-between讓同一行的(de)兩個(gè)盒子(zǐ)處于(yú)兩端，寬度再設置一下，兩個(gè)盒子(zǐ)中間的(de)縫隙就(jiù)出(chū)來(lái)了(le／liǎo)，單個(gè)小框裏也(yě)直接用彈性布局，分爲(wéi / wèi)左中右，algin-item：center垂直居中。

青桔活動中心欄

上(shàng)下布局，上(shàng)面的(de)盒子(zǐ)放标題文字，下面放具體的(de)活動框，活動框左右布局，左邊文字右邊圖，也(yě)是(shì)先寫好一個(gè)樣式再用循環導出(chū)。其他(tā)比較好實現，唯一比較難一點的(de)就(jiù)是(shì)框裏面的(de)圖片了(le／liǎo)，你會發現的(de)裏面圖片上(shàng)面會溢出(chū)來(lái)但是(shì)圖片下面卻像是(shì)被切割了(le／liǎo)一樣，我實現的(de)方法是(shì)最外面放一個(gè)盒子(zǐ)，盒子(zǐ)設爲(wéi / wèi)矩形，背景色爲(wéi / wèi)白色，然後把圖片放入其中，圖片的(de)大(dà)小跟盒子(zǐ)的(de)大(dà)小一樣，再設置盒子(zǐ)的(de)border-radius爲(wéi / wèi)50%，overflow：hidden，使其變圓把圖片下部切割，然後再用定位放一個(gè)長寬和(hé / huò)之(zhī)前盒子(zǐ)的(de)寬相等的(de)盒子(zǐ)，也(yě)設置border-radius爲(wéi / wèi)50%，給他(tā)一個(gè)藍色的(de)背景色，把放入之(zhī)前盒子(zǐ)的(de)底部，再通過設置z-index讓圖片蓋到(dào)盒子(zǐ)上(shàng)，差不(bù)多也(yě)能實現這(zhè)個(gè)效果

底部導航欄

這(zhè)個(gè)官方的(de)小程序是(shì)沒有tabBar的(de)，隻有首頁存在(zài)這(zhè)個(gè)底部導航欄整，底部導航欄也(yě)要(yào / yāo)固定定位底部。因此隻要(yào / yāo)這(zhè)個(gè)頁面實現就(jiù)行了(le／liǎo)，我是(shì)這(zhè)樣布局的(de)，因爲(wéi / wèi)中間要(yào / yāo)放個(gè)按鈕，并且四個(gè)标題的(de)左右間距是(shì)一樣的(de)，首先所以(yǐ)先在(zài)最外面的(de)盒子(zǐ)上(shàng)彈性布局和(hé / huò)justify-content: space-between，裏面放兩個(gè)盒子(zǐ)，這(zhè)兩個(gè)盒子(zǐ)肯定會一左一右被放置再兩邊，然後每個(gè)盒子(zǐ)先設彈性布局然後再裏面又分别放兩個(gè)盒子(zǐ)用來(lái)裝标題，再設置放标題的(de)小盒子(zǐ)的(de)padding值和(hé / huò)彈性垂直居中，掃二維碼的(de)按鈕用定位實現，通過盒子(zǐ)嵌套盒子(zǐ)，盒子(zǐ)設置彈性布局讓盒子(zǐ)垂直水平居中，再最裏面的(de)盒子(zǐ)放二維碼圖片，同時(shí)設置一個(gè)padding值，二維碼外面需要(yào / yāo)設置一個(gè)陰影，才有陰影的(de)效果。

<view class="footer-bar">
  <view class="bar bar-left">
    <navigator class="footer-btn bar-mine" url="">我的(de)</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>
複制代碼

實現效果

還是(shì)有點像的(de)吧。。。

總結

這(zhè)個(gè)頁面的(de)布局還是(shì)不(bù)難的(de)，很适合剛學不(bù)久的(de)同學們作爲(wéi / wèi)入手，用的(de)最多的(de)還是(shì)彈性布局，有不(bù)懂的(de)或者有改進的(de)，歡迎在(zài)評論區留言