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

前言

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

准备工作

项目介绍：小米商城实战

项目目录结构

├── 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组件，直接用就可以了。但是轮播图在各个页面都可能存在，只是其中所显示的图片不一样而已，所以使用组件化思想，把它写成一个模版，哪里要使用，就引入这个模版即可。

<template name="slide">
    <view class="section section-swiper">
        <swiper class="slide" indicator-dots="{{true}}" autoplay="{{true}}" interval="2000" duration="1000">
            <block wx:for="{{slides}}" wx:key="{{index}}">
                <swiper-item>
                    <image src="{{item.slide_url}}" mode="widthFix" class="slide-image" data-id="{{item.id}}" />
                </swiper-item>
            </block>
        </swiper>
    </view>
</template>

使用时，这样引入

<import src="../../../templates/slide/slide.wxml" />
<view class="container">
    <template is="slide" data="{{slides}}"></template>
</view>

商城导航区、活动区

这里只是个简单的布局，就不赘述了。但是需要注意的是在微信小程序里，强烈推荐使用弹性布局

首页商品展示区

这里的商品都是分块展示，很有规律，因此整个商品展示都可以直接用wx:for遍历出来。
wxml：

<!-- 首页商品版块 -->
    <view class="section block">
        <block wx:for="{{index_block}}" wx:key="{{item.id}}">
            <view class="section cover">
                <image class="cover-img" src="{{item.img_url}}" data-cid="{{item.id}}" bindtap="showcDetail"/>
            </view>
            <view class="section goods-list">
                <block wx:for="{{item.section}}" wx:key="index" wx:for-item="product">
                    <view class="goods-item">
                        <image class="goods-img {{product.is_new?\'new\':\'\'}} {{product.on_sale?\'on-sale\':\'\'}}" src="{{product.goods_cover}}" data-pid="{{product.id}}" mode="aspectFill" bindtap="showDetail"/>
                        <text class="title">{{product.header}}</text>
                        <text class="desp">{{product.description}}</text>
                        <text class="meta">{{product.meta}}</text>
                        <text class="discount">{{product.discount}}</text>
                    </view>
                </block>
            </view>
        </block>
    </view><!-- end-section block -->

这里有个细节，每个版块里的商品会分成“新品”、“立减”（即有折扣）、“无折扣”三种，着该怎么去做呢？这里我用了一个巧妙的方法：给每个商品的class里绑定布尔值is_new和on_sale通过三元运算符判断是否给该商品挂载一个类名，再使用伪元素给该商品打上“新品”或“立减”的标签如下：

wxml：

<image class="goods-img {{product.is_new?\'new\':\'\'}} {{product.on_sale?\'on-sale\':\'\'}}" src="{{product.goods_cover}}" data-pid="{{product.id}}" mode="aspectFill" bindtap="showDetail"/>

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：

<view class="main">
    <scroll-view scroll-y class="category-left">
        <view class="cate-nav-list" wx:for="{{cate_nav_list}}" wx:key="{{item.id}}" data-id="{{item.id}}" data-index="{{index}}"
            bindtap="switchCategory">
            <text class="cate-name {{curIndex===index?\'on\':\'\'}}">{{item.name}}</text>
        </view>
    </scroll-view>
    <scroll-view class="category-right" scroll-y="{{true}}" scroll-into-view="{{toView}}" scroll-with-animation="true">
        <view class="cate-content">
            <view class="cate-list-content" wx:for="{{detail}}" wx:key="{{item.id}}" id="{{item.id}}">
                <view class="banner">
                    <image src="{{item.banner}}"/>
                </view>
                <view class="header">{{item.cate_name}}</view>
                <view class="cate-list">
                    <view class="cate-item"  wx:for="{{item.cate_list}}" wx:key="{{index}}" wx:for-item="cateList">
                        <image src="{{cateList.item_img}}" />
                        <text>{{cateList.item_name}}</text>
                    </view>
                </view>
            </view>
            
        </view>
    </scroll-view>
</view>

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
    });
  }
})

三、发现页

页面结构分析：

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