微信小程序开发（百货商战）实战项目的分类的创建

👨‍💻个人主页：@开发者-曼亿点

👨‍💻 hallo 欢迎 点赞👍 收藏⭐ 留言📝 加关注✅!

👨‍💻 本文由 曼亿点 原创

👨‍💻 收录于专栏：微信小程序开发

⭐🅰⭐

—

文章目录

⭐前言⭐

  在这个数字化飞速发展的时代，购物方式也在不断变革与创新。微信小程序商城应运而生，为您打造一个全新的购物体验。
  我们深知，您的时间宝贵，每一分每一秒都应花在有价值的事情上。因此，我们精心构建了这个便捷、高效的微信小程序商城，让您无需繁琐的下载和安装，轻轻一点，即可开启精彩的购物之旅。
  在这里，您将发现丰富多样的商品，从时尚潮流的服饰到精致实用的家居用品，从美味可口的食品到高科技的电子产品，应有尽有，满足您的各种需求。
  我们秉持着品质至上的原则，严格筛选每一款商品，确保您买到的都是优质、可靠的产品。同时，我们还提供贴心的客户服务，随时为您解答疑问，解决问题，让您购物无忧。
  微信小程序商城，不仅是一个购物平台，更是您生活中的贴心伙伴。让我们一起，在这个数字商城中，探索更多美好！

一、产品分类功能的实现

  欢迎来到微信小程序商城的百货分类页面，这是一个为您精心打造的购物导航图。
  在这个快节奏的时代，我们深知您对便捷和高效的追求。因此，我们将百货商品进行了细致的分类，让您能够迅速找到您所需要的物品。
  无论是追求时尚的您，想要在服饰鞋包分类中展现个性；还是注重生活品质的您，在家居百货中寻找温馨与舒适；亦或是热爱美食的您，在食品饮料分类中探索美味的奥秘。我们的百货分类都能精准地满足您的期待。
  每一个分类背后，都有我们团队的精心挑选和严格把关，只为给您带来最优质、最具性价比的商品。让我们一起，在这丰富的百货分类中，发现生活的更多美好。

（1）category.wxml

<view>
    <view class="left-nav">
        <van-sidebar active-key="{{ activeKey }}">
            <block wx:for="{{ sliderData }}" wx:key="index">
                <van-sidebar-item data-title="{{ item.text }}" bindtap="clickItemNav" title="{{ item.text }}" />
            </block>
        </van-sidebar>
    </view>
    <view class="right-nav">
        <van-grid column-num="3">
            <van-grid-item use-slot wx:for="{{ categoryData }}" wx:key="index">
                <view bindtap="clickItem" data-tag="{{ item.tag }}">
                    <image mode="widthFix" src="{{ item.image }}"></image>
                    <text>{{ item.tag }}</text>
                </view>
            </van-grid-item>
        </van-grid>
    </view>
</view>

（2）category.wxss

定义一个for循环访问数组：

.left-nav{
    float: left;
    width: 25%;
}
.right-nav{
    float: right;
    width: 75%;
}

.right-nav image{
    width: 70px;
}
    
.right-nav text{
    margin-top: 10px;
    font-size: 13px;
    color: #333;
    text-align: center;
    display: block;
}

（3）category.js

import { getCategory,getSearch } from "../../api/index.js"

Page({

    /**
     * 页面的初始数据
     */
    data: {
        activeKey:0,
        categoryData:[],
        sliderData:[
            {
                "id":0,
                "text":"热门推荐"
            },
            {
                "id":1,
                "text":"手机数码"
            },
            {
                "id":2,
                "text":"家用电器"
            },
            {
                "id":3,
                "text":"电脑办公"
            },
            {
                "id":4,
                "text":"玩具乐器"
            },
            {
                "id":5,
                "text":"家具家装"
            },
            {
                "id":6,
                "text":"男装"
            },
            {
                "id":7,
                "text":"男鞋"
            },
            {
                "id":8,
                "text":"女装"
            },
            {
                "id":9,
                "text":"女鞋"
            },
            {
                "id":10,
                "text":"美妆护肤"
            },
            {
                "id":11,
                "text":"户外运动"
            }
        ],
        currentTag:"热门推荐"
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
        this.http(this.data.currentTag);
    },
    clickItemNav(e){
        this.http(e.currentTarget.dataset.title)
    },
    http(tag){
        getCategory({tag}).then(res =>{
            if(res.data.status === 200){
                this.setData({
                    categoryData:res.data.data
                })
            }else{
                wx.showToast({
                  title: '暂无数据',
                  icon:"success"
                })
            }
        })
    },
    clickItem(e){
        getSearch({search:e.currentTarget.dataset.tag}).then(res =>{
            if(!res.data.msg){
                // 序列化
                let goods = JSON.stringify(res.data.data)
                wx.navigateTo({
                    url: '/pages/goods/goods?goodsData=' + goods,
                })
            }else{
                wx.showToast({
                  title: res.data.msg,
                })
            }
        })
    }
})

（4）category.json

{
    "usingComponents": {
        "van-sidebar": "@vant/weapp/sidebar/index",
        "van-sidebar-item": "@vant/weapp/sidebar-item/index",
        "van-grid": "@vant/weapp/grid/index",
        "van-grid-item": "@vant/weapp/grid-item/index"
    }
}

运行结果的显示：

二、产品的详细介绍以及是否添加购物车

  在这里，“添加购物车”是您与心仪商品之间的约定。它是您购物决策中的一个贴心伙伴，让您能够轻松地收集那些让您眼前一亮的宝贝。
想象一下，购物车就像是您的私人宝库，您可以将各种喜爱的百货商品放入其中，慢慢积攒幸福的可能。无论是一件时尚的衣物，还是一款实用的家居用品，它们都在等待着与您一同回家。
  添加购物车，为您的购物之旅增添了一份从容与自由，让您可以尽情探索更多精彩，不错过任何一个美好。

(1)details.wxml

<view class="details">
    <image class="topimage" mode="widthFix" src="{{ goodsDetails.topimage }}"></image>
    <view class="content">
        <view class="price">
            ￥<text>{{ goodsDetails.price }}</text>.00
        </view>
        <view class="title">
            <text>{{ goodsDetails.title }}</text>
        </view>
    </view>
    <view class="introduce">
        <image mode="widthFix" src="{{ goodsDetails.details }}"></image>
    </view>
    <view class="cart">
        <van-goods-action>
            <van-goods-action-icon icon="chat-o" text="客服" bind:click="onClickKF" />
            <van-goods-action-icon icon="cart-o" text="购物车" bind:click="onClickCart" />
            <van-goods-action-button text="加入购物车" type="warning" bind:click="onClickAddCart" />
            <van-goods-action-button data-id="{{ goodsDetails.id }}" text="立即购买" bind:click="onClickBuy" />
        </van-goods-action>
    </view>
</view>

(2)details.wxss

.details{
    background: #fff;
}

.details .topimage{
    width: 100%;
}

.details .content{
    margin: 10px;
}

.details .content .price {
    color: #f2270c;
}

.details .content .price text{
    color: #f2270c;
    display: inline-block;
    font-family: JDZH-Regular;
    font-size: 20px;
    line-height: 30px;
}

.details .content .title{
    font-size: 15px;
    font-weight: 700;
}

.details .introduce image{
    width: 100%;
}

(3)details.js

const { getGoodsDetails,addGoodsCart } = require("../../api/index.js")

Page({

    /**
     * 页面的初始数据
     */
    data: {
        goodsDetails:{}
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
        // 提示用户在获取数据
        wx.showLoading({
          title: '等待数据加载...',
        })
        getGoodsDetails({id:options.id}).then(res =>{
            wx.hideLoading()
            if(res.data.status === 200){
                this.setData({
                    goodsDetails:res.data.data[0]
                })
            }else{
                wx.showToast({
                  title: '数据获取失败',
                  icon:"success"
                })
            }
        })
    },
    /**
     * 客服
     */
    onClickKF(){},
    /**
     * 购物车
     */
    onClickCart(){
        wx.switchTab({
          url: '/pages/cart/cart',
        })
    },
    /**
     * 加入购物车
     */
    onClickAddCart(){
        addGoodsCart({
            title:this.data.goodsDetails.title,
            price:this.data.goodsDetails.price,
            image:this.data.goodsDetails.topimage,
            currentID:this.data.goodsDetails.id
        }).then(res =>{
            if(res.data.status === 200){
                wx.showToast({
                  title: res.data.msg,
                })
            }else{
                wx.showToast({
                  title: res.data.msg,
                })
            }
        })
    },
    /**
     * 立即购买
     */
    onClickBuy(e){
        wx.navigateTo({
          url: '/pages/buy/buy?id='+e.currentTarget.dataset.id,
        })
    }
})

(4)details.json

{
    "usingComponents": {
        "van-goods-action": "@vant/weapp/goods-action/index",
        "van-goods-action-icon": "@vant/weapp/goods-action-icon/index",
        "van-goods-action-button": "@vant/weapp/goods-action-button/index"
    }
}

运行结果的显示：

结束语🥇

以上就是微信小程序之列表渲染
持续更新微信小程序教程，欢迎大家订阅系列专栏🔥微信小程序
你们的支持就是曼亿点创作的动力💖💖💖