【愚公系列】《微信小程序与云开发从入门到实践》056-迷你商城小程序的开发（电商应用首页开发）

🚀前言

随着移动互联网的快速发展，电商行业也迎来了新的机遇与挑战。迷你商城小程序作为一种便捷的购物工具，逐渐成为消费者线上购物的重要选择。它不仅具备快速加载、易于分享的特点，还能为用户提供个性化的购物体验。

市场上电商类的小程序非常丰富，除了知名电商公司提供小程序应用外，各种社区团购、积分商城等也大多会选择小程序来支持其业务运营。本章，将开发一款功能完整的电商小程序应用，包括前端页面展示与云开发后端服务。

本期文章将重点介绍迷你商城小程序的开发，尤其是电商应用首页的设计与实现。我们将深入探讨首页的功能模块、用户体验设计以及技术实现等方面的内容。通过本次开发，我们希望能够为用户提供一个清晰、直观、便捷的购物入口，使他们能够轻松找到心仪的商品，并享受愉快的购物过程。

🚀一、迷你商城小程序的开发

首页通常用来展示推荐商品，本示例项目可以仿照一些知名的电商小程序的页面设计进行开发，首页主要包括商品分类栏、商品搜索、商品列表功能。商品分类栏、搜索和商品列表的数据提供都可以使用云开发实现服务接口，具体的渲染数据可以通过向数据库中添加示例数据来测试。

🔎1.使用 lconFont 文字图标

在项目开发中，我们经常需要使用各种图标来提升界面设计的视觉效果。图标的使用可以通过两种方式实现：一种是使用图片资源，另一种是使用文字图标。相比使用图片资源，文字图标有许多明显的优势：

• 更易控制大小：文字图标的大小可以通过 CSS 灵活调整，且更加方便。
• 节省资源空间：文字图标通常比图片文件占用更少的存储空间，加载速度更快。
• 灵活设置颜色：文字图标可以像文本一样，通过 CSS 控制颜色，方便统一管理和修改。

为方便学习和使用，我们可以直接通过 IconFont 官网 获取所需的开发图标库。在该素材库中，提供了很多专为电商应用设计的图标资源，可以选择一套开源且免费的图标进行学习和使用。

🦋1.1 获取并导入图标

1. 选择图标：
   在 IconFont 官网中，选择自己需要的图标并将它们添加到购物车。图标可以根据项目需求进行分类和选择。
   

2. 生成代码：
   将购物车中的图标添加到自己的项目后，在对应的项目中选择 Fontclass 选项。如果您是首次使用该功能，需要先生成代码。
   

   生成代码后，系统会提供一个网页版的 CSS 文件。下载并保存这个文件。
   

🦋1.2 配置图标到小程序项目

1. 创建项目结构：
   新建一个名为 MiniShop 的小程序项目，并删除其中不需要的冗余文件。

2. 创建 utils 文件夹：
   在 miniprogram 文件夹下新建一个名为 utils 的文件夹，在其中再创建一个名为 iconFont 的文件夹。

3. 添加图标样式文件：
   在 iconFont 文件夹下新建一个名为 iconFont.wxss 的文件，将之前从 IconFont 官网生成的 CSS 文件中的内容全部复制到 iconFont.wxss 文件中。

4. 全局引用图标样式文件：
   在项目的全局样式文件 app.wxss 中，添加对 iconFont.wxss 文件的引用：

   /* app.wxss */
   @import './utils/iconFont/iconfont.wxss';
   

   

🦋1.3 使用图标

现在，您已经成功将文字图标集成到项目中，接下来可以在小程序页面中使用这些图标。以下是一个示例：

<!-- pages/index/index.wxml -->
<text class="iconfont icon-baozhuang"></text>

在上述代码中，icon-baozhuang 是您从 IconFont 官网中选择的图标名称，您可以在官网查看到对应的名称，也可以在 iconFont.wxss 文件中找到。

🦋1.4 测试并查看效果

完成以上步骤后，运行小程序，您应该能够看到页面上展示出了您所选择的文字图标。此时，图标已经作为文字元素展示在页面中，可以通过修改 CSS 样式进一步调整图标的大小、颜色等属性。

🔎2.应用框架的搭建

大多数电商类小程序都会采用底部多标签栏（TabBar）来作为整体页面的导航结构。以本项目为例，我们的电商应用包括 首页、分类、购物车 和 用户中心 四个模块，这四个模块会通过底部的 TabBar 来进行页面导航。为了实现更加个性化的效果，本文将介绍如何自定义 TabBar。

🦋2.1 创建页面与配置 app.json

首先，我们需要为四个模块创建页面，并在 app.json 文件中进行配置。app.json 中的 tabBar 配置项会指明底部导航栏的样式与内容。

1. 新建页面：
   在 pages 文件夹下新建四个页面，分别对应四个模块：

   • index：首页
   • category：分类
   • shopping：购物车
   • user：用户中心

2. 修改 app.json 配置：
   在 app.json 文件中添加 pages 和 tabBar 配置：

   {
        
     "pages": [
         "pages/index/index",
         "pages/category/category",
         "pages/shopping/shopping",
         "pages/user/user"
     ],
     "tabBar": {
        
         "custom": true,
         "list": [
             {
        
                 "pagePath": "pages/index/index",
                 "text": "首页"
             },
             {
        
                 "pagePath": "pages/category/category",
                 "text": "分类"
             },
             {
        
                 "pagePath": "pages/shopping/shopping",
                 "text": "购物车"
             },
             {
        
                 "pagePath": "pages/user/user",
                 "text": "用户中心"
             }
         ]
     },
     "window": {
        
         "backgroundColor": "#F6F6F6",
         "backgroundTextStyle": "light",
         "navigationBarBackgroundColor": "#F6F6F6",
         "navigationBarTitleText": "迷你商城",
         "navigationBarTextStyle": "black"
     },
     "sitemapLocation": "sitemap.json",
     "style": "v2"
   }
   

3. 注意：

   • custom: true 使得 TabBar 自定义。
   • list 中列出每个标签对应的页面路径和文本。

🦋2.2 创建自定义 TabBar 组件

为了自定义 TabBar，我们需要在项目中创建一个 custom-tab-bar 组件来替代默认的 TabBar。

1. 创建组件：
   在 miniprogram 文件夹下新建一个名为 custom-tab-bar 的文件夹，在其中新建一个名为 index 的组件文件夹。

2. 编写 index.wxml 文件：
   这是 TabBar 的布局文件，我们使用 view 和 text 标签来展示每个标签，并绑定点击事件以切换页面。

   <!--custom-tab-bar/index.wxml-->
   <view class="tab">
    <view class="item" bindtap="switchPage" data-index="0">
        <text class="iconfont icon-shouye icon {
         {selectedIndex == 0 ? 'selected' : ''}}"></text>
        <text class="title {
         {selectedIndex == 0 ? 'selected' : ''}}">首页</text>
    </view>
    <view class="item" bindtap="switchPage" data-index="1">
        <text class="iconfont icon-caipu icon {
         {selectedIndex == 1 ? 'selected' : ''}}"></text>
        <text class="title {
         {selectedIndex == 1 ? 'selected' : ''}}">分类</text>
    </view>
    <view class="item" bindtap="switchPage" data-index="2">
        <text class="iconfont icon-tuangou icon {
         {selectedIndex == 2 ? 'selected' : ''}}"></text>
        <text class="title {
         {selectedIndex == 2 ? 'selected' : ''}}">购物车</text>
    </view>
    <view class="item" bindtap="switchPage" data-index="3">
        <text class="iconfont icon-gerenzhongxin icon {
         {selectedIndex == 3 ? 'selected' : ''}}"></text>
        <text class="title {
         {selectedIndex == 3 ? 'selected' : ''}}">我的</text>
    </view>
   </view>
   

3. 编写 index.wxss 文件：
   在 index.wxss 文件中为 TabBar 添加样式，设置图标的大小、颜色及选中状态样式。

   /* custom-tab-bar/index.wxss */
   @import '../utils/iconFont/iconfont.wxss';
   .tab {
        
    height: 49px;
    width: 100%;
    background-color: white;
    border-top: solid 1px #b5afb2;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
   }
   
   .item {
        
    height: 100%;
    width: 25%;
    text-align: center;
    padding-top: 5px;
    display: flex;
    flex-direction: column;
   }
   
   .icon {
        
    font-size: 20px;
    color: gray;
   }
   
   .title {
        
    margin-top: 2px;
    font-size: 10px;
    color: gray;
   }
   
   .selected {
        
    color: #d63329;
   }
   

4. 编写 index.js 文件：
   在 index.js 中处理 TabBar 标签的点击切换。

   // custom-tab-bar/index.js
   Component({
        
     data: {
        
       selectedIndex: 0,  // 当前选中的标签
       pageList: [
         '/pages/index/index',
         '/pages/category/category',
         '/pages/shopping/shopping',
         '/pages/user/user'
       ]
     },
     methods: {
        
       switchPage: function (event) {
        
         let index = Number(event.currentTarget.dataset.index);
         wx.switchTab({
        
           url: this.data.pageList[index],
         });
       }
     }
   });
   

🦋2.3 处理页面生命周期

为了确保 TabBar 在切换页面时能够正确地显示选中状态，我们需要在每个页面的生命周期方法中更新选中的标签。

1. 修改 index.js：
   在 index.js 文件的 onShow 方法中设置选中的标签：

   // pages/index/index.js
   Page({
        
     onShow: function () {
        
       this.getTabBar().setData({
         selectedIndex: 0 });
     }
   });
   

2. 修改其他页面的 onShow 方法：
   对于其他页面（如 category.js、shopping.js、user.js），也需要在 onShow 方法中设置选中的标签：

   // pages/category/category.js
   Page({
        
     onShow: function () {
        
       this.getTabBar().setData({
         selectedIndex: 1 });
     }
   });
   
   // pages/shopping/shopping.js
   Page({
        
     onShow: function () {
        
       this.getTabBar().setData({
         selectedIndex: 2 });
     }
   });
   
   // pages/user/user.js
   Page({
        
     onShow: function () {
        
       this.getTabBar().setData({
         selectedIndex: 3 });
     }
   });
   

🦋2.4 测试效果

完成上述步骤后，运行小程序，您应该能够看到 TabBar 已经自定义并且能够正确切换页面。每次切换页面时，TabBar 上的选中状态也会随着页面的切换而更新。