微信小程序实战篇-电商（二）

作者: 代码君_Coder | 来源:发表于2017-06-09 18:16 被阅读7198次

哈喽，大家好，今天总于挤出时间，写第二篇啦，自从决定写文章才发现时间都不够用啊，废话不多说，我们直接进入正题吧！
先回顾一下上篇文章，我们讲解了底部导航栏和顶部导航栏的制作，大家应该都记得把，基本上电商小程序都会带底部当导航栏，所以底部导航栏一定要会哦~，今天呐，我将教大家另一个必须会的，banner 图的制作，也叫广告轮播图，就是我们经常看到首页自动轮播的那个控件。

广告轮播图的制作

先上效果让大家过过瘾，是不是很眼熟，别急，看完这篇文章，你也可以轻松制作出这样的效果。

广告轮播图.gif
我还是把广告轮播图写在 home 的页面里了，需要改动的页面有home.js、home.wxml、home.wxss

home.wxml

  <!-- banner -->
  <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
    <block wx:for="{{imgUrls}}">
      <swiper-item>
        <image src="{{item}}" />
      </swiper-item>
    </block>
  </swiper>

swiper 是微信自带的视图，我们直接使用就好，记住 <swiper> 里面一定要包含 <swiper-item>，你用自定义的 view 是无效的，下面介绍一下这个控件的常用属性，

indicator-dots 是否显示面板指示点
autoplay 是否自动切换
interval 自动切换时间间隔
duration 滑动动画时长

剩下的 wx:for，已经可以算老生常谈了，几乎每篇都会遇到，所以就一带而过不讲了，不懂的自己查询前面几篇文章，

home.wxss

/* 直接设置swiper属性 */
swiper {
  height: 300rpx;
}
swiper-item image {
  width: 100%;
  height: 100%;
}

home.js

// banner
    imgUrls: [
      'http:\/\/mz.djmall.xmisp.cn\/files\/banner\/20161219\/148211980641.png',
      'http:\/\/mz.djmall.xmisp.cn\/files\/banner\/20161222\/148238831285.png',
      'http:\/\/mz.djmall.xmisp.cn\/files\/banner\/20161222\/14823895573.png'
    ],
    indicatorDots: true, //是否显示面板指示点
    autoplay: true, //是否自动切换
    interval: 3000, //自动切换时间间隔,3s
    duration: 1000, //  滑动动画时长1s

home.js 就是数据了，imgUrls、indicatorDots、autoplay、interval、duration这些个字段在 home.wxml 都有用到，不明白的看注释，已经写的很清楚了

界面布局

剩下的布局都是css的基础啦，我就放在这里统一讲，先上效果图

效果图.png
我们接下来要做的布局就是广告轮播图下面的品牌馆模块布局、以及新品上架这个模块的布局

home.wxml


  <!-- 分类导航 -->
  <view class="navs">
    <block wx:for-items="{{navItems}}" wx:key="name">
      <view class="nav-item" catchtap="catchTapCategory" data-type="{{item.name}}" data-typeid="{{item.typeId}}">
        <image src="{{item.imageurl}}" class="nav-image" />
        <text>{{item.name}}</text>
      </view>
    </block>
  </view>

  <view class="separate"></view>

  <view class="cate-container">

    <view class="category-title">
      <text class="name">新品上架</text>
      <view class="line_flag"></view>
      <image class="head-img" src="{{newgoods_head_url}}"></image>
    </view>

    <scroll-view scroll-x="true">
      <view class="goods">
        <block wx:for-items="{{goodsItems}}" wx:key="name">
          <view class="goods-item" catchtap="catchTapCategory" data-type="{{item.name}}" data-typeid="{{item.typeId}}">
            <image src="{{item.imageurl}}" class="goods-image" />
            <text>{{item.name}}</text>
            <p>{{item.newprice}}</p>
          </view>
        </block>
      </view>
    </scroll-view>
  </view>

代码图片.png

其实代码已经有注释了，我用带有颜色的框区分，是为了读者更好的理解，第一个红框是 banner，这个上面讲过了，跳过，第二个红框分类导航，view 层包含一个 for 循环的 block 模块，每个模块里有一个 image 控件和 text 控件，对比效果图，对应的就是品牌馆、类目等数据，这里我再从新教一遍如何看懂这些代码，拿分类导航来说

<view class="navs"> 第一行这么写，class字段意思是给这个view定义了名叫 navs 的样式，那navs样式在哪里呐，在对应名下的.wxss 样式里，所以我们要去 home.wxss 去找navs ，
data-xxx，xxx就是你给home.js里提供的数据关键词，home.js通过获取xxx关键词来获取xxx里面的数据，回调数据的时候会用的到
image src src很容易理解了，是填图片路径，要求这个图片路径要正确，就是必须可以读取的到，不然会报异常

回顾到此结束，接着看最后一个红框，红框中的第二个绿框，新控件
scroll-view 看单纯就知道他的作用，滚动的视图嘛，就是scroll-view里面包含了很多view 当超过屏幕的时候，你可以滚动查看被遮盖的view ，看一下scroll-view的属性

scroll-x 允许横向滚动
scroll-y 允许纵向滚动
scroll-top 设置竖向滚动条位置
scroll-left 设置横向滚动条位置
bindscrolltoupper 滚动到顶部/左边，会触发 scrolltoupper 事件
bindscrolltolower 滚动到底部/右边，会触发 scrolltolower 事件
enable-back-to-top iOS点击顶部状态栏、安卓双击标题栏时，滚动条返回顶部，只支持竖向
scroll-with-animation 在设置滚动条位置时使用动画过渡

我实现的是横向滚动，所以把scroll-x设置为true就好，大家可以试一下其他属性，多试试，看效果才能理解每个属性的效果

home.wxss

/*=================品牌馆、类目 的样式====================*/

.navs {
  display: flex;
}

.nav-item {
  width: 25%;
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 20rpx;
}

.nav-item .nav-image {
  width: 80rpx;
  height: 80rpx;
  /*border-radius: 50%;设置边界圆角*/
}

.nav-item text {
  padding-top: 20rpx;
  font-size: 25rpx;
}

/*=================新品上架 样式====================*/

.category-title {
  display: flex;
  flex-direction: column;
  margin-top: 15rpx;
  margin-bottom: 0rpx;
}

.category-title .name {
  font-size: 40rpx;
  text-align: center;
  margin: 10rpx auto;
}

.line_flag {
  width: 80rpx;
  height: 1rpx;
  display: inline-block;
  margin: 20rpx auto;
  background-color: gainsboro;
  text-align: center;
}

.line {
  width: 100%;
  height: 2rpx;
  display: inline-block;
  margin: 20rpx 0rpx;
  background-color: gainsboro;
  text-align: center;
}

image.head-img {
  width: 100%;
  height: 270rpx;
}

text {
  color: #444;
  font-size: 40rpx;
}

p{
  color: red;
  font-size: 30rpx;
  margin-top: 20rpx;
}

.cate-container {
  color: #fff;
}

/* 分割线 */
.separate {
  height: 15rpx;
  background-color: #f2f2f2;
}

刚刚我们在 home.wxml 中提到的navs、nav-item都在这里，display、flex-directio等对应的样式在微信小程序入门篇（二）wxss样式积累模块里都有记录，不明白属性作用的可以跳过去查阅一下，这个是基本功，不是什么技巧，只能死记硬背。

home.js

data: {
    navbar: ['护肤', '彩妆', '香水', '个人护理'],
    currentTab: 0,
    // banner
    imgUrls: [
      'http:\/\/mz.djmall.xmisp.cn\/files\/banner\/20161219\/148211980641.png',
      'http:\/\/mz.djmall.xmisp.cn\/files\/banner\/20161222\/148238831285.png',
      'http:\/\/mz.djmall.xmisp.cn\/files\/banner\/20161222\/14823895573.png'
    ],
    indicatorDots: true, //是否显示面板指示点
    autoplay: true, //是否自动切换
    interval: 3000, //自动切换时间间隔,3s
    duration: 1000, //  滑动动画时长1s

    hot_products:
    [
      {
        product_id: 1,
        imageurl: 'http://mz.djmall.xmisp.cn/files/banner/20161222/148237182618.png',
        html: "http://mz.djmall.xmisp.cn/files/activity/20161216/5853a0137573e84/mz2_ajax/index.html"
      },
      {
        product_id: 2,
        imageurl: 'http://mz.djmall.xmisp.cn/files/banner/20161202/148066038440.png',
        html: "http://mz.djmall.xmisp.cn/files/activity/20161208/584926f0017d874/mz1/index.html"
      }
    ],

    // navItems
    navItems: [
      {
        typeId: 0,
        name: '品牌馆',
        url: 'bill',
        imageurl: '../../images/navItems/home_icon_brand.png',
      },
      {
        typeId: 1,
        name: '类目',
        url: 'bill',
        imageurl: '../../images/navItems/home_icon_sort.png',
      },
      {
        typeId: 2,
        name: '特惠专场',
        url: 'bill',
        imageurl: '../../images/navItems/home_icon_gift.png'
      },
      {
        typeId: 3,
        name: '推荐好友',
        url: 'bill',
        imageurl: '../../images/navItems/home_icon_frends.png'
      }
    ],

    // 新品上架
    goodsItems: [
      {
        goodId: 0,
        name: '兰蔻小黑瓶',
        url: 'bill',
        imageurl: 'http://mz.djmall.xmisp.cn/files/product/20161201/148057921620.jpg',
        newprice: "￥200.00",
        oldprice: "￥300.00",
      },
      {
        goodId: 1,
        name: '兰蔻清莹柔肤爽肤水',
        url: 'bill',
        imageurl: 'http://mz.djmall.xmisp.cn/files/product/20161201/148057953326.jpg',
        newprice: "￥120.00",
        oldprice: "￥200.00",
      },
      {
        goodId: 2,
        name: '倩碧水嫩保湿精华面霜',
        url: 'bill',
        imageurl: 'http://mz.djmall.xmisp.cn/files/product/20161201/148058228431.jpg',
        newprice: "￥320.00",
        oldprice: "￥400.00",
      },
      {
        goodId: 3,
        name: '特效润肤露',
        url: 'bill',
        imageurl: 'http://mz.djmall.xmisp.cn/files/product/20161201/14805828016.jpg',
        newprice: "￥30.00",
        oldprice: "￥80.00",
      },
      {
        goodId: 4,
        name: '倩碧焕妍活力精华露',
        url: 'bill',
        imageurl: 'http://mz.djmall.xmisp.cn/files/product/20161201/148058301941.jpg',
        newprice: "￥30.00",
        oldprice: "￥80.00",
      }, {
        goodId: 5,
        name: '日本资生堂洗颜',
        url: 'bill',
        imageurl: 'http://mz.djmall.xmisp.cn/files/product/20161201/148058328876.jpg',
        newprice: "￥30.00",
        oldprice: "￥80.00",
      }
    ],

    newgoods_head_url:"http://mz.djmall.xmisp.cn/files/banner/20161202/148066062976.jpg",

    // 新品上架
    recommends: [
      
      {
        goodId: 7,
        name: 'OLAY玉兰油精油沐浴露玫瑰滋养二合一450ml',
        url: 'bill',
        imageurl: 'http://mz.djmall.xmisp.cn/files/product/20161213/148162245074.jpg',
        newprice: "￥36.60",
        oldprice: "￥40.00",
      },
      {
        goodId: 10,
        name: '兰蔻玫瑰清滢保湿柔肤水嫩肤水化妆水400ml补水保湿温和不刺激',
        url: 'bill',
        imageurl: 'http://mz.djmall.xmisp.cn/files/product/20161201/148057937593.jpg',
        newprice: "￥30.00",
        oldprice: "￥80.00",
      }, {
        goodId: 11,
        name: 'Lancome/兰蔻清莹柔肤爽肤水/粉水400ml补水保湿玫瑰水化妆水',
        url: 'bill',
        imageurl: 'http://mz.djmall.xmisp.cn/files/product/20161201/148057953326.jpg',
        newprice: "￥30.00",
        oldprice: "￥80.00",
      },
      {
        goodId: 12,
        name: '美国CLINIQUE倩碧黄油无油/特效润肤露125ml',
        url: 'bill',
        imageurl: 'http://mz.djmall.xmisp.cn/files/product/20161201/14805828016.jpg',
        newprice: "￥239.00",
        oldprice: "￥320.00",
      },
      {
        goodId: 13,
        name: '法国LANCOME兰蔻柔皙轻透隔离防晒乳霜50ML2017年3月到期',
        url: 'bill',
        imageurl: 'http://mz.djmall.xmisp.cn/files/product/20161201/148058014894.jpg',
        newprice: "￥130.00",
        oldprice: "￥180.00",
      },
    ],
  }

home.js 已经多次强调这个是用来放数据和处理事件监听的，事件监听先跳过，后面会专门出一篇来讲解，数据目前也是模拟的数据，还没有涉及到网络请求，我要强调的是，所有的模拟数据一定要放在page下面的data里，代码君就犯过错，写在data括号的外边，程序就一直报错，招了好半天，才发现是这么低级的错误，所以我踩过的坑已经提醒你们了，不要继续掉坑里哦~

总结

好了，如果你照着我的代码敲的话，应该可以实现这些布局效果，代码君想告诉大家的是，一定要动手实践，只有实践你才会发现你哪里是真的理解了，哪里不会，相信我，实践后你会对程序的理解更透彻。好了，今天就讲解到这里，住大家周末愉快，最后放一张这几天我带领大家实现的代码效果图。

微信商城.gif

上一篇：微信小程序实战篇-电商（一）

下一篇：微信小程序实战篇-下拉刷新与加载更多

建了一个小程序技术交流群，想入群的读者请加微信

小程序入群.png

网友评论

69d81af84795:你好有没有分类导航的图片资源
5a08b169efec:您好，请问已经关注了公众号但是没有源码只有以往的教程
805a99b0a397:求源码
代码君_Coder:@黑夜_687e 关注公众号
6f756dc453da:详情页地址那个 url: “bill“; 地址怎么跳转，是直接把bill替换为详情页的路径吗？新手麻烦大神指导下
代码君_Coder:@冰水混合物0907 找不到这个界面啊
6f756dc453da:@代码君_Coder Do not have catchTapCategory handler in current page: pages/index/index. Please make sure that catchTapCategory handler has been defined in pages/index/index, or pages/index/index has been added into app.json 一直提示这个东西
代码君_Coder:可以这么换
IT实战联盟Lin:已关注，这段时间开始入手小程序代码君的文章刚好有大帮助，谢谢！
代码君_Coder:@狂石帝君谢谢支持
春风哦:样式不全
代码君_Coder:@deda0c7755f3 只放上核心代码
02f0bb1ef62b:那个goods和goodsimage的样式要怎么写呢？
停在巷子里的单车:官方的文档讲的也很清楚
默成S:广告轮播图下面的品牌馆模块布局、以及新品上架这个模块的布局是乱的，因为：
home.js里面navItems: [
{
typeId: 0,
name: '品牌馆',
url: 'bill',
imageurl: '../../images/navItems/home_icon_brand.png',
},
你的图片引用地址有问题，调试面板也报错了
(program):2 Failed to load image http://1223670401.debug.open.weixin.qq.com/pages/images/bottomNav/home_icon_brand.png : the server responded with a status of 404 (HTTP/1.1 404 Not Found)
From server 127.0.0.1
IT实战联盟Lin:可以到网上找一些导航icon 放到images 对应文件夹就好了
代码君_Coder:如果要源码，请关注公众号获取
代码君_Coder:地址错误原因是你对应的路径没有图片，你自己加入一张图片就好
代码君_Coder:有问题可以关注公众号【代码集中营】向我提问，简书的答复会比较慢
空耳_dba6:我按照你的代码敲但是出来的效果乱了
代码君_Coder:可能是css样式处理问题，你排查一下
3dbd060033bc:回去看看vu e
代码君_Coder:??
飘零之雪:受教了