小爱童鞋@你，一起来撸个小程序吧

摘要：轮播图区域这里微信小程序给我们提供了组件，直接用就可以了。但是需要注意的是在微信小程序里，强烈推荐使用弹性布局首页商品展示区这里的商品都是分块展示，很有规律，因此整个商品展示都可以直接用遍历出来。

小程序发布以来，凭借无需安装、用完即走、触手可及、无需注册、无需登录、以及社交裂变等多个优势，一路高歌，变得愈来愈火爆，它革命性的降低了移动应用的开发成本，也正好迎合了用户的使用应用的习惯。小程序魅力如此之大，作为一枚程序猿，我想怎么不自己做一个呢？话不多说，咱撸起袖子就是干

前端开发利器：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
    });
  }
})

页面结构分析：

里面展示了一些商品宣传视频（当时还是不太想切太多的页面