🍁商城类小程序实战（三）：商城首页的制做

这是我参与8月更文挑战的第7天，活动详情查看：8月更文挑战

商城首页的制做

通常来讲，电商的大部分流量归属会到达首页，所以，首页是电商系统最重要的部分。一个好的首页会激活用户购物欲望。

在首页咱们主要实现3个功能：一个是顶部的导航栏，第二个是上半部分的轮播图页面，最后是下半部分的商品列表推荐页面。为了方便开发，咱们须要肯定首页的框架：

1、顶部导航栏的设计与实现

顶部导航栏与上一篇实现的底部导航栏不太同样，底部的导航栏能够借助小程序强大的配置能力实现。而顶部的导航栏需求咱们按照需求实现，也就是按照实际需求对导航栏设计和排序。

index.wxml部分

在index.wxml中，咱们使用变量menuID标记当前在哪一个菜单下，使用bindtap()方法进行事件监听。咱们对每个菜单都是使用menuClick()方法进行了事件绑定。实现项目导航中各个菜单的切换。

<view class="tabbar">
<view id="1" class="tabbox {{menuID==1?'curbar':''}}" bindtap="menuClick">
<view class="tabico ico-recom {{menuID==1?'cur-recom':''}}"></view>
<view class="tabtit {{menuID==1?'curtit':''}}">今日推荐</view>
</view>
...
<view id="5" class="tabbox {{menuID==5?'curbar':''}}" bindtap="menuClick">
<view class="tabico ico-flower {{menuID==5?'cur-flower':''}}"></view>
<view class="tabtit {{menuID==5?'curtit':''}}">礼品鲜花</view>
</view>
</view>
复制代码

index.wxss部分

此部分就是书写样式，和写页面样式同样，这里不作介绍，要注意的是wxss文件不支持使用本地资源，咱们的图标是访问CDN拿到的，此外还可使用Base64地址代替。

.cur-flower{
  background: url('http://qxguzbs2m.hd-bkt.clouddn.com/%E9%B2%9C%E8%8A%B1%20%28%E8%93%9D%29.png') no-repeat;
  background-size: 100%;
}
复制代码

index.js部分

咱们给view都设定一个id，当经过bindtap()绑定事件触发，后台引擎会传递一个点击事件参数e给事件函数，currentTarget事件属性返回其监听器触发事件的节点，最后拿到id,实现切换的逻辑。

const app = getApp()

Page({
  data:{
    menuID: 1,
  },
  // 菜单切换监听
  menuClick(e) {
    var id = e.currentTarget.id;
    this.setData({
      menuID: id
    })
  }
})
复制代码

好啦，这样简单的顶部导航栏就完成啦，看一下效果~

在实际开发中，顶部导航栏不该该像这样静态写死在页面中，而是动态获取顶部导航栏数据，存到data中，并使用wx:for函数简化index.wxml内容。

2、轮播栏的设计与实现

轮播是电商类网站的重要一环，小程序内嵌了swiper组件，封装后可用来展现轮播内容，如今咱们就来完善一个轮播组件。

index.wxml部分

<!--轮播栏设计与实现-->
<swiper class="adbox" indicator-dots="{{indicatorDots}}" style="width: {{imagewidth}}px; height: {{imagewidth}}px;" autoplay="{{autopaly}}" interval="{{interval}}" duration="{{duration}}" >
  <block wx:for="{{imgUrls}}">
    <swiper-item>
      <image id="{{item.iTargetType}}{{item.sLink}}" style="width: {{imageWidth}}px; height: {{imageHeight}}px" src="{{item.sPicLink}}" class="slide-image" mode="aspectFit" data-gid="{{item.sLink}}" bindtap="bigImageClick" bindload="imageLoad" />
    </swiper-item>
  </block>
</swiper>
复制代码

咱们使用变量gid来标记这个轮播对应的商品ID，使用wx:for进行循环渲染，将每个图片都绑定到bigImageClick方法中。

index.wxss部分

.pagebox{
  width: 100%;
}
.page{
  width: 100%;
}
.adbox{
  width: 100%;
}
.slide-image{
  width: 100%;
  height: 141px;
}
复制代码

轮播的数据部分

须要获取轮播的数据并绑定到渲染层

const app = getApp()

Page({
  data:{
    "imgUrls": [{
      "sPicLink": 'http://qxguzbs2m.hd-bkt.clouddn.com/14-3C%E6%95%B0%E7%A0%81.png',
      "sLink": "1000"
    },{
      "sPicLink": 'http://qxguzbs2m.hd-bkt.clouddn.com/31-%E5%A5%B3%E8%A3%85-%E6%9C%8D%E9%A5%B0.png',
      "sLink": "1001"
    }]
  },
  // 轮播按钮点击事件
  bigImageClick(e) {
    var p = e.currentTarget.dataset.grid
    wx.navigateTo({
      url: 'pages/detai/detail?id='+p
    })
  }
})
复制代码

这样，咱们的轮播栏就完成啦~一块儿来看看效果！

咱们没有将轮播图片放在小程序项目中，而是经过CDN的方式引入，确保了小程序为“小”程序，微信官方对小程序的包是有限制的，全部分包不能超过8MB，单个分包或主包大小不超过2MB。

3、商品推荐部分的设计与实现

该部分实质是一个商品列表的展现，不包含无线加载和商品数据的筛选，所以功能会更简单。

index.wxml部分

<!-- 商品推荐 -->
   <view id="index_recommend" class="listbox {{showRecommendView?'listboxhide':''}}">
          <text class="dj-tit">精品推荐</text>
          <view class="djlist cf">
            <!-- 道具列表 -->
            <block wx:for="{{index_recommends}}" wx:key="unique">
              <view class="djbox">
                <view class="comico djmark">热卖</view>
                <view id="{{item._id}}" class="dj-link" bindtap="bigImageClick">
                  <view class="djimgbox">
                    <image class="djimg" mode="widthFix" src="{{item.sPickLink}}"></image>
                  </view>
                  <text class="djname">{{item.sDescribe}}</text>
                  <view class="pricebox">
                    <text class="djpri">￥{{item.iPriceReal}}元</text>
                    <text class="djoldpri">￥{{item.iOriPrice}}元</text>
                  </view>
                </view>
                <view id="{{item._id}}" class="comico btn-cart" bindtap="bindCartTap">购物车
                </view>
              </view>
            </block>
          </view>
        </view>
复制代码

index.wxss部分

样式部分就再也不介绍了，要注意的是wxss中不支持展现本地图片，你须要将图片上传到CDN或者使用Base64,方可正常展现。要查看源码的读者可去个人Github仓库中拉取，Giuhub地址在文章末尾哦~

index.js部分

// index.js
// 获取应用实例
const app = getApp()

Page({
  data:{
    "index_recommends":[
      {
      "sDescribe": "可穿戴设备",
      "iMallId": "1000",
      "sPickLink": "http://qxguzbs2m.hd-bkt.clouddn.com/%E5%8F%AF%E7%A9%BF%E6%88%B4%E8%AE%BE%E5%A4%872.png",
      "iOriPrice": "1399",
      "iPriceReal": "999"
    },
      {
      "sDescribe": "笔记本电脑",
      "iMallId": "1001",
      "sPickLink": "http://qxguzbs2m.hd-bkt.clouddn.com/%E7%AC%94%E8%AE%B0%E6%9C%AC%E7%94%B5%E8%84%911.png",
      "iOriPrice": "9999",
      "iPriceReal": "7999"
    },
      {
      "sDescribe": "手机",
      "iMallId": "1000",
      "sPickLink": "http://qxguzbs2m.hd-bkt.clouddn.com/%E6%89%8B%E6%9C%BA%20%282%29.png",
      "iOriPrice": "2999",
      "iPriceReal": "1999"
    },
      {
      "sDescribe": "平板电脑",
      "iMallId": "1001",
      "sPickLink": "http://qxguzbs2m.hd-bkt.clouddn.com/%E5%B9%B3%E6%9D%BF%E7%94%B5%E8%84%91.png",
      "iOriPrice": "4999",
      "iPriceReal": "3999"
    },
  ]
  },

  // 轮播按钮点击事件
  bigImageClick(e) {
    var p = e.currentTarget.dataset.grid
    wx.navigateTo({
      url: 'pages/detai/detail?id='+p
    })
  }
})
复制代码

好啦，咱们的商品推荐部分就算完成啦，来看看效果~

参考资料：小程序开发原理与实战
⚽本文介绍了开发商城类小程序的商城首页的制做过程和一些注意事项~
⚾若是这篇文章对你有帮助的话，麻烦点赞收藏哟~
🏀GitHub 博客地址: github.com/Awu1227 。
🏉笔者还有其余专栏，欢迎阅读~
🏐玩转CSS之美
🎱Vue从放弃到入门
🎳深刻浅出JavaScript