小程序模仿商城之（首頁）

效果圖

具體思路

首先要出創建相關的文件夾

底部的相關設置

底部的相關設置比較簡單，只需要在 app.json 文件裏設置即可，有幾個 tabbar 欄就添加幾個，不過要注意的是最少添加兩個，最多添加五個

"tabBar": {
  "color": "#cccccc",
  "selectedColor": "#ff5777",
  "backgroundColor": "#ffffff",
  "borderStyle": "black",
  "list": [
    {
      "pagePath": "pages/home/home",
      "text": "首頁",
      "iconPath": "assets/tabbar/home.png",
      "selectedIconPath": "assets/tabbar/home_active.png"
    },
    {
      "pagePath": "pages/category/index",
      "text": "分類",
      "iconPath": "assets/tabbar/category.png",
      "selectedIconPath": "assets/tabbar/category_active.png"
    },
    {
      "pagePath": "pages/cart/index",
      "text": "購物車",
      "iconPath": "assets/tabbar/cart.png",
      "selectedIconPath": "assets/tabbar/cart_active.png"
    },
    {
      "pagePath": "pages/user/index",
      "text": "我的",
      "iconPath": "assets/tabbar/profile.png",
      "selectedIconPath": "assets/tabbar/profile_active.png"
    }
  ]
}

頂部的相關配置

頂部的相關配置同樣在 app.json 文件裏，不過需要注意的是在 app.json 文件裏進行配置是全局的配置，配置完後，每個頁面都會出現同樣的效果，如果需要給不同的頁面進行不同的配置，那麼需要對每一個頁面的 xxx.json 文件進行不同的配置，也就是局部配置

另外還有，進行全局配置時，所有的配置都需要寫在 window 裏面，而局部配置則不需要

網絡請求的處理

頁面上所有圖片、文字的展示幾乎都是渲染的請求的數據，所以應該創建一個獨立的文件夾來負責對數據的請求，這樣看起來代碼的邏輯性清晰，也利於修改

網絡請求是異步的，所以使用 promise 對 網絡請求函數進行了一個簡單的封裝

export default function(options) {
  return new Promise((resolve, reject) => {
    wx.request({
      url: options.url,
      method: options.method || 'get',
      data: options.data || {},
      success: resolve,
      fail: reject
    })
  })
}

搜索框

搜索框的製作比較簡單，因爲每一個頁面幾乎都會用到搜索框，所以將搜索框單獨抽離成一個組件，使用時直接引用即可

組件的引用

使用

<search></search>

輪播圖

小程序的輪播圖製作可謂是超級簡單，不過還需要注意一下幾點
1.對圖片的寬度進行設置
2.對 swiper 進行設置，寬度和高度都設置爲圖片本身的高度和寬度
設置如下
進行以上的設置是爲了，是圖片不變形的顯示出來，並且適應各個機型

導航

導航可以這樣概述
1.父元素設置：display:flex;
2.子元素設置：flex:1;
3.具體樣式細節自己調整

樓層

這一部分的設置主要是對數據如何進行遍歷和如何對圖片進行樣式的設置

首先是遍歷，我一般遍歷時，是對 block 進行遍歷而不是對 view 進行遍歷，一方面是因爲如果對 view 進行遍歷的同時，還需要添加許多屬性，看着很不舒服，另外一個原因：view 是一個組件，會在頁面上做渲染；而 block 不是一個組件，它僅僅是一個包裝元素，只接受控制屬性，不會在頁面中做任何渲染

對樣式的設置最應該注意的是下面的

還需要補充的是在進行遍歷時可以自定義名稱，如下

代碼最終都會上傳至我的 github