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

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

前端開發(fā)利器：VSCode

調(diào)試：微信開發(fā)者工具

自己Mock的一些數(shù)據(jù)

微信開發(fā)文檔

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

頁(yè)面結(jié)構(gòu)分析：

頂部搜索條

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

輪播圖區(qū)域

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

使用時(shí)，這樣引入

商城導(dǎo)航區(qū)、活動(dòng)區(qū)

這里只是個(gè)簡(jiǎn)單的布局，就不贅述了。但是需要注意的是在微信小程序里，強(qiáng)烈推薦使用彈性布局

首頁(yè)商品展示區(qū)

這里的商品都是分塊展示，很有規(guī)律，因此整個(gè)商品展示都可以直接用wx:for遍歷出來(lái)。
wxml：

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

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

wxml：

wxss

.goods-img.new:before{      /*新品標(biāo)簽樣式*/
  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{   /*立減標(biāo)簽樣式*/
  position: absolute;
  left: 0;
  top: 0;
  width: 100rpx;
  height: 40rpx;
  line-height: 40rpx;
  content: "立減";
  font-size: 9pt;
  color: #fff;
  text-align: center;
  background: #ec6055;
}

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

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

哪里要使用，就用import引入

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

頁(yè)面結(jié)構(gòu)分析：
商品分類頁(yè)分為左側(cè)的商品分類菜單和右邊的商品分類展示區(qū)，
用兩個(gè)scroll-view就可以了，左右兩邊都設(shè)置scroll-y讓它們垂直方向滾動(dòng)，此外，scroll-view還有一個(gè)scroll-into-view屬性能讓我們實(shí)現(xiàn)類似a標(biāo)簽的錨點(diǎn)功能，scroll-into-view的值是某個(gè)子元素的id，但是此處有一個(gè)小坑，這個(gè)id不能以數(shù)字開頭

當(dāng)時(shí)查了一下文檔就開做了，于是乎給左側(cè)菜單取了些數(shù)字id，現(xiàn)在想起來(lái)當(dāng)時(shí)我太自以為然了 ，此外如果內(nèi)容太多，是會(huì)產(chǎn)生滾動(dòng)條的，如圖：

這樣看起來(lái)也太丑了。。

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

//隱藏滾動(dòng)條
::-webkit-scrollbar{  
  height: 0;
  width: 0;
  color: transparent;
}

嗯，beautiful ??！

邏輯分析：給頁(yè)面注冊(cè)個(gè)curIndex(當(dāng)前選中菜單的下標(biāo))，如果當(dāng)前下標(biāo)和選中的菜單下標(biāo)相同，則處于激活狀態(tài)
部分代碼：
wxml：

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

js:

const app=getApp();

Page({

  /**
   * 頁(yè)面的初始數(shù)據(jù)
   */
  data: {
    cate_nav_list:[
      {name:"新品",id:"new"},
      {name:"手機(jī)",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:"耳機(jī)",id:"headset"},
      {name:"音箱",id:"voicebox"},
      {name:"生活",id:"life"},
      {name:"服務(wù)",id:"service"},
      {name:"米粉卡",id:"card"}
    ],
    curIndex:0,  //初始化當(dāng)前下標(biāo)為0
    toView:"new", //默認(rèn)顯示“新品展示”
    detail:[]
  },
  switchCategory(e){
    const curIndex=e.currentTarget.dataset.index?e.currentTarget.dataset.index:0;  //獲取每個(gè)菜單的id
    //更新數(shù)據(jù)
    this.setData({
      toView:e.currentTarget.dataset.id,
      curIndex
    });
  },
  onLoad: function (options) {
    const detail=app.globalData.category; //獲取分類展示數(shù)據(jù)
    this.setData({
      detail
    });
  }
})

頁(yè)面結(jié)構(gòu)分析：

里面展示了一些商品宣傳視頻（當(dāng)時(shí)還是不太想切太多的頁(yè)面