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

Awu1227
1,587 阅读4分钟

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

商城首页的制作

一般来说，电商的大部分流量归属会到达首页，因此，首页是电商系统最重要的部分。一个好的首页会激活用户购物欲望。

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

image.png

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

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

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

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

image.png

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

二、轮播栏的设计与实现

轮播是电商类网站的重要一环，小程序内嵌了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
    })
  }
})

这样，我们的轮播栏就完成啦~一起来看看效果！

20210808_080350.gif

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

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

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

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

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

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

avatar
文章
阅读
粉丝
相关推荐
简易商城小程序全栈开发(mpvue+koa+mongodb)
14k阅读
 · 
480点赞
koa+uniapp 微信小程序登录流程实现
749阅读
 · 
8点赞
微信小程序分享到朋友圈之曲线救国
1.9k阅读
 · 
34点赞
最新uniapp开发微信小程序商城搭建教程（附源码）
1.5k阅读
 · 
1点赞
uniapp 微信获取手机号登录
124阅读
 · 
0点赞