摘要：輪播圖區域這里微信小程序給我們提供了組件，直接用就可以了。但是需要注意的是在微信小程序里，強烈推薦使用彈性布局首頁商品展示區這里的商品都是分塊展示，很有規律，因此整個商品展示都可以直接用遍歷出來。

小程序發布以來，憑借無需安裝、用完即走、觸手可及、無需注冊、無需登錄、以及社交裂變等多個優勢，一路高歌，變得愈來愈火爆，它革命性的降低了移動應用的開發成本，也正好迎合了用戶的使用應用的習慣。小程序魅力如此之大，作為一枚程序猿，我想怎么不自己做一個呢？話不多說，咱擼起袖子就是干

前端開發利器：VSCode

調試：微信開發者工具

自己Mock的一些數據

微信開發文檔

├── assets                   用到的一些圖標文件
├── lib
    ├── weui.wxss            引用了weui
├── modules                    
    ├── showDetail.js        跳轉展示商品詳情的公共js文件  
    ├── showcDetail.js      
├── pages                    項目的各個頁面
    ├── index                商城首頁
    ├── categories           商品分類頁
    ├── discovery            發現頁
    ├── channel              商品頻道目錄
        ├── phone            手機頻道
        ├── tv               電視頻道
        ├── computer         電腦頻道
    ├── cart                 購物車
    ├── mine                 個人信息頁
    ├── goods                商品詳情頁
    ├── selectGoods          商品屬性選擇頁
    ├── search               商品搜索頁
    ├── addr                 收貨地址頁
├── template                 使用到的模版文件               
    ├── slide                輪播圖模版  
    ├── goods_list           商品展示模版
    ├── cover                商品展示模版
├── util                     使用到的工具類               
    ├── mock.js              項目中使用到的一些數據  
├── app.js                   項目邏輯
├── app.wxss                 項目公共樣式表
└── app.json                 項目公共設置

頁面結構分析：

頂部搜索條

這里看上去是一個搜索框，但其實，它要實現的僅僅是個頁面跳轉功能，只要把它的disabled設置為true就可以了，另外要想讓它placeholder占位符居中顯示的話，微信小程序提供了一個placeholder-class的屬性，通過它可以改變placeholder的樣式。

輪播圖區域

這里微信小程序給我們提供了swiper組件，直接用就可以了。但是輪播圖在各個頁面都可能存在，只是其中所顯示的圖片不一樣而已，所以使用組件化思想，把它寫成一個模版，哪里要使用，就引入這個模版即可。

使用時，這樣引入

商城導航區、活動區

這里只是個簡單的布局，就不贅述了。但是需要注意的是在微信小程序里，強烈推薦使用彈性布局

首頁商品展示區

這里的商品都是分塊展示，很有規律，因此整個商品展示都可以直接用wx:for遍歷出來。
wxml：

    
        
            
                
            
            
                
                    
                        
                        {{product.header}}
                        {{product.description}}
                        {{product.meta}}
                        {{product.discount}}
                    
                
            
        
    

這里有個細節，每個版塊里的商品會分成“新品”、“立減”（即有折扣）、“無折扣”三種，著該怎么去做呢？這里我用了一個巧妙的方法：給每個商品的class里綁定布爾值is_new和on_sale通過三元運算符判斷是否給該商品掛載一個類名，再使用偽元素給該商品打上“新品”或“立減”的標簽如下：

wxml：

wxss

.goods-img.new:before{      /*新品標簽樣式*/
  position: absolute;
  left: 0;
  top: 0;
  width: 100rpx;
  height: 40rpx;
  line-height: 40rpx;
  content: "新品";
  color: #fff;
  font-size: 9pt;
  text-align: center;
  background: #8CC64A;
}
.goods-img.on-sale:before{   /*立減標簽樣式*/
  position: absolute;
  left: 0;
  top: 0;
  width: 100rpx;
  height: 40rpx;
  line-height: 40rpx;
  content: "立減";
  font-size: 9pt;
  color: #fff;
  text-align: center;
  background: #ec6055;
}

邏輯分析：
首頁只是些商品，所以邏輯層只要根據每個商品的id來跳到對應商品的詳情頁即可，很顯然這個方法在多個頁面都要使用的，所以使用模塊化思想，創建一個modules文件夾，把方法寫在多帶帶的js文件里，并向外輸出

const showDetail=(e)=>{
    const id=e.currentTarget.dataset.pid; //獲取每個商品的id
    wx.navigateTo({
        url: `/pages/goods/show?id=${id}`
    })
};
export default showDetail;

哪里要使用，就用import引入

import showDetail from "../../modules/showDetail";

頁面結構分析：
商品分類頁分為左側的商品分類菜單和右邊的商品分類展示區，
用兩個scroll-view就可以了，左右兩邊都設置scroll-y讓它們垂直方向滾動，此外，scroll-view還有一個scroll-into-view屬性能讓我們實現類似a標簽的錨點功能，scroll-into-view的值是某個子元素的id，但是此處有一個小坑，這個id不能以數字開頭

當時查了一下文檔就開做了，于是乎給左側菜單取了些數字id，現在想起來當時我太自以為然了 ，此外如果內容太多，是會產生滾動條的，如圖：

這樣看起來也太丑了。。

**解決辦法：給全局樣式加入下面的樣式

//隱藏滾動條
::-webkit-scrollbar{  
  height: 0;
  width: 0;
  color: transparent;
}

嗯，beautiful ??！

邏輯分析：給頁面注冊個curIndex(當前選中菜單的下標)，如果當前下標和選中的菜單下標相同，則處于激活狀態
部分代碼：
wxml：

    
        
            {{item.name}}
        
    
    
        
            
                
                    
                
                {{item.cate_name}}
                
                    
                        
                        {{cateList.item_name}}
                    
                
            
            
        
    

js:

const app=getApp();

Page({

  /**
   * 頁面的初始數據
   */
  data: {
    cate_nav_list:[
      {name:"新品",id:"new"},
      {name:"手機",id:"phone"},
      {name:"電視",id:"tv"},
      {name:"電腦",id:"laptop"},
      {name:"家電",id:"appliance"},
      {name:"路由",id:"router"},
      {name:"智能",id:"smart"},
      {name:"兒童",id:"kids"},
      {name:"燈具",id:"lignts"},
      {name:"電源",id:"adapter"},
      {name:"耳機",id:"headset"},
      {name:"音箱",id:"voicebox"},
      {name:"生活",id:"life"},
      {name:"服務",id:"service"},
      {name:"米粉卡",id:"card"}
    ],
    curIndex:0,  //初始化當前下標為0
    toView:"new", //默認顯示“新品展示”
    detail:[]
  },
  switchCategory(e){
    const curIndex=e.currentTarget.dataset.index?e.currentTarget.dataset.index:0;  //獲取每個菜單的id
    //更新數據
    this.setData({
      toView:e.currentTarget.dataset.id,
      curIndex
    });
  },
  onLoad: function (options) {
    const detail=app.globalData.category; //獲取分類展示數據
    this.setData({
      detail
    });
  }
})

頁面結構分析：

里面展示了一些商品宣傳視頻（當時還是不太想切太多的頁面