🍁商城類小程序實戰（三）：商城首頁的製做

這是我參與8月更文挑戰的第7天，活動詳情查看：8月更文挑戰

商城首頁的製做

通常來講，電商的大部分流量歸屬會到達首頁，所以，首頁是電商系統最重要的部分。一個好的首頁會激活用戶購物慾望。

在首頁咱們主要實現3個功能：一個是頂部的導航欄，第二個是上半部分的輪播圖頁面，最後是下半部分的商品列表推薦頁面。爲了方便開發，咱們須要肯定首頁的框架：

1、頂部導航欄的設計與實現

頂部導航欄與上一篇實現的底部導航欄不太同樣，底部的導航欄能夠藉助小程序強大的配置能力實現。而頂部的導航欄需求咱們按照需求實現，也就是按照實際需求對導航欄設計和排序。

index.wxml部分

在index.wxml中，咱們使用變量menuID標記當前在哪一個菜單下，使用bindtap()方法進行事件監聽。咱們對每個菜單都是使用menuClick()方法進行了事件綁定。實現項目導航中各個菜單的切換。

<view class="tabbar">
<view id="1" class="tabbox {{menuID==1?'curbar':''}}" bindtap="menuClick">
<view class="tabico ico-recom {{menuID==1?'cur-recom':''}}"></view>
<view class="tabtit {{menuID==1?'curtit':''}}">今日推薦</view>
</view>
...
<view id="5" class="tabbox {{menuID==5?'curbar':''}}" bindtap="menuClick">
<view class="tabico ico-flower {{menuID==5?'cur-flower':''}}"></view>
<view class="tabtit {{menuID==5?'curtit':''}}">禮品鮮花</view>
</view>
</view>
複製代碼

index.wxss部分

此部分就是書寫樣式，和寫頁面樣式同樣，這裏不作介紹，要注意的是wxss文件不支持使用本地資源，咱們的圖標是訪問CDN拿到的，此外還可使用Base64地址代替。

.cur-flower{
  background: url('http://qxguzbs2m.hd-bkt.clouddn.com/%E9%B2%9C%E8%8A%B1%20%28%E8%93%9D%29.png') no-repeat;
  background-size: 100%;
}
複製代碼

index.js部分

咱們給view都設定一個id，當經過bindtap()綁定事件觸發，後臺引擎會傳遞一個點擊事件參數e給事件函數，currentTarget事件屬性返回其監聽器觸發事件的節點，最後拿到id,實現切換的邏輯。

const app = getApp()

Page({
  data:{
    menuID: 1,
  },
  // 菜單切換監聽
  menuClick(e) {
    var id = e.currentTarget.id;
    this.setData({
      menuID: id
    })
  }
})
複製代碼

好啦，這樣簡單的頂部導航欄就完成啦，看一下效果~

在實際開發中，頂部導航欄不該該像這樣靜態寫死在頁面中，而是動態獲取頂部導航欄數據，存到data中，並使用wx:for函數簡化index.wxml內容。

2、輪播欄的設計與實現

輪播是電商類網站的重要一環，小程序內嵌了swiper組件，封裝後可用來展現輪播內容，如今咱們就來完善一個輪播組件。

index.wxml部分

<!--輪播欄設計與實現-->
<swiper class="adbox" indicator-dots="{{indicatorDots}}" style="width: {{imagewidth}}px; height: {{imagewidth}}px;" autoplay="{{autopaly}}" interval="{{interval}}" duration="{{duration}}" >
  <block wx:for="{{imgUrls}}">
    <swiper-item>
      <image id="{{item.iTargetType}}{{item.sLink}}" style="width: {{imageWidth}}px; height: {{imageHeight}}px" src="{{item.sPicLink}}" class="slide-image" mode="aspectFit" data-gid="{{item.sLink}}" bindtap="bigImageClick" bindload="imageLoad" />
    </swiper-item>
  </block>
</swiper>
複製代碼

咱們使用變量gid來標記這個輪播對應的商品ID，使用wx:for進行循環渲染，將每個圖片都綁定到bigImageClick方法中。

index.wxss部分

.pagebox{
  width: 100%;
}
.page{
  width: 100%;
}
.adbox{
  width: 100%;
}
.slide-image{
  width: 100%;
  height: 141px;
}
複製代碼

輪播的數據部分

須要獲取輪播的數據並綁定到渲染層

const app = getApp()

Page({
  data:{
    "imgUrls": [{
      "sPicLink": 'http://qxguzbs2m.hd-bkt.clouddn.com/14-3C%E6%95%B0%E7%A0%81.png',
      "sLink": "1000"
    },{
      "sPicLink": 'http://qxguzbs2m.hd-bkt.clouddn.com/31-%E5%A5%B3%E8%A3%85-%E6%9C%8D%E9%A5%B0.png',
      "sLink": "1001"
    }]
  },
  // 輪播按鈕點擊事件
  bigImageClick(e) {
    var p = e.currentTarget.dataset.grid
    wx.navigateTo({
      url: 'pages/detai/detail?id='+p
    })
  }
})
複製代碼

這樣，咱們的輪播欄就完成啦~一塊兒來看看效果！

咱們沒有將輪播圖片放在小程序項目中，而是經過CDN的方式引入，確保了小程序爲「小」程序，微信官方對小程序的包是有限制的，全部分包不能超過8MB，單個分包或主包大小不超過2MB。

3、商品推薦部分的設計與實現

該部分實質是一個商品列表的展現，不包含無線加載和商品數據的篩選，所以功能會更簡單。

index.wxml部分

<!-- 商品推薦 -->
   <view id="index_recommend" class="listbox {{showRecommendView?'listboxhide':''}}">
          <text class="dj-tit">精品推薦</text>
          <view class="djlist cf">
            <!-- 道具列表 -->
            <block wx:for="{{index_recommends}}" wx:key="unique">
              <view class="djbox">
                <view class="comico djmark">熱賣</view>
                <view id="{{item._id}}" class="dj-link" bindtap="bigImageClick">
                  <view class="djimgbox">
                    <image class="djimg" mode="widthFix" src="{{item.sPickLink}}"></image>
                  </view>
                  <text class="djname">{{item.sDescribe}}</text>
                  <view class="pricebox">
                    <text class="djpri">￥{{item.iPriceReal}}元</text>
                    <text class="djoldpri">￥{{item.iOriPrice}}元</text>
                  </view>
                </view>
                <view id="{{item._id}}" class="comico btn-cart" bindtap="bindCartTap">購物車
                </view>
              </view>
            </block>
          </view>
        </view>
複製代碼

index.wxss部分

樣式部分就再也不介紹了，要注意的是wxss中不支持展現本地圖片，你須要將圖片上傳到CDN或者使用Base64,方可正常展現。要查看源碼的讀者可去個人Github倉庫中拉取，Giuhub地址在文章末尾哦~

index.js部分

// index.js
// 獲取應用實例
const app = getApp()

Page({
  data:{
    "index_recommends":[
      {
      "sDescribe": "可穿戴設備",
      "iMallId": "1000",
      "sPickLink": "http://qxguzbs2m.hd-bkt.clouddn.com/%E5%8F%AF%E7%A9%BF%E6%88%B4%E8%AE%BE%E5%A4%872.png",
      "iOriPrice": "1399",
      "iPriceReal": "999"
    },
      {
      "sDescribe": "筆記本電腦",
      "iMallId": "1001",
      "sPickLink": "http://qxguzbs2m.hd-bkt.clouddn.com/%E7%AC%94%E8%AE%B0%E6%9C%AC%E7%94%B5%E8%84%911.png",
      "iOriPrice": "9999",
      "iPriceReal": "7999"
    },
      {
      "sDescribe": "手機",
      "iMallId": "1000",
      "sPickLink": "http://qxguzbs2m.hd-bkt.clouddn.com/%E6%89%8B%E6%9C%BA%20%282%29.png",
      "iOriPrice": "2999",
      "iPriceReal": "1999"
    },
      {
      "sDescribe": "平板電腦",
      "iMallId": "1001",
      "sPickLink": "http://qxguzbs2m.hd-bkt.clouddn.com/%E5%B9%B3%E6%9D%BF%E7%94%B5%E8%84%91.png",
      "iOriPrice": "4999",
      "iPriceReal": "3999"
    },
  ]
  },

  // 輪播按鈕點擊事件
  bigImageClick(e) {
    var p = e.currentTarget.dataset.grid
    wx.navigateTo({
      url: 'pages/detai/detail?id='+p
    })
  }
})
複製代碼

好啦，咱們的商品推薦部分就算完成啦，來看看效果~

參考資料：小程序開發原理與實戰
⚽本文介紹了開發商城類小程序的商城首頁的製做過程和一些注意事項~
⚾若是這篇文章對你有幫助的話，麻煩點贊收藏喲~
🏀GitHub 博客地址: github.com/Awu1227 。
🏉筆者還有其餘專欄，歡迎閱讀~
🏐玩轉CSS之美
🎱Vue從放棄到入門
🎳深刻淺出JavaScript