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

在这里插入图片描述


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

👨‍💻 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"
    }
}

运行结果的显示:
在这里插入图片描述

结束语🥇

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

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-07-20 16:24:02       106 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-07-20 16:24:02       116 阅读
  3. 在Django里面运行非项目文件

    2024-07-20 16:24:02       95 阅读
  4. Python语言-面向对象

    2024-07-20 16:24:02       103 阅读

热门阅读

  1. K8S私有云 服务器负载均衡器OpenELB

    2024-07-20 16:24:02       25 阅读
  2. 基于深度学习的天气预报

    2024-07-20 16:24:02       27 阅读
  3. 设计模式-建造者模式

    2024-07-20 16:24:02       27 阅读
  4. 基于 Gunicorn、Flask 和 Docker 的 Web 应用开发

    2024-07-20 16:24:02       30 阅读
  5. 使用git worktree同时打开同一项目的不同分支代码

    2024-07-20 16:24:02       30 阅读
  6. 【SpringBoot】单元测试之测试Service方法

    2024-07-20 16:24:02       27 阅读
  7. css样式

    css样式

    2024-07-20 16:24:02      27 阅读
  8. deque学习笔记

    2024-07-20 16:24:02       27 阅读