（毕业设计）微信小程序 购物商城

最新推荐文章于 2024-07-25 21:27:06 发布
最新推荐文章于 2024-07-25 21:27:06 发布
阅读量564 收藏 15
点赞数 17
文章标签： 课程设计 微信小程序 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_71985669/article/details/134853044
版权

首页页面

包括活动图片的轮播展示、活动商品缩略图和基本信息的展示、横向滑动tabBar、搜索框等。

<view>
<!-- 首页搜索框 -->
  <search-input></search-input>
  <!-- 轮播图
        默认:320*240  原图 750*340
        图片 宽 100% 高 自适应
   -->
  <view class="index_swiper">
    <swiper indicator-dots autoplay circular>
      <swiper-item wx:for="{{swiperList}}" wx:key="goods_id">
      <navigator url="/pages/goods_detail/goods_detail?goods_id={{item.goods_id}}">
        <image src="{{item.image_src}}" mode="widthFix" />
      </navigator>
      </swiper-item>
    </swiper>
  </view>

  <!-- 导航条 -->
  <view class="index_cate">
    <navigator wx:for="{{catesList}}" wx-key="name">
      <image src="{{item.image_src}}" mode="widthFix" />
    </navigator>
  </view>
  <!-- 楼层信息 -->
  <view class="index_floor">
  <view class="floor_group" wx:for="{{FloorList}}" wx:for-item="f" 
  wx:for-index="i" wx-key="f.floor_title.name">
    <!-- 标题 -->
    <view class="floor_title">
      <image src="{{f.floor_title.image_src}}" mode="widthFix" />
    </view>
    <!-- 图片 -->
    <view class="floor_list">
      <navigator wx:for="{{f.product_list}}" wx-key="item.name" >
        <image src="{{item.image_src}}" mode="widthFix"></image>
      </navigator>
    </view>
  </view>
  </view>
</view>

分类页面

主要显示各个种类的数据。

<view class="cates">
<!-- 首页搜索框 -->
<search-input></search-input>
<view class="cates_container">
<!-- 左侧 -->
<scroll-view scroll-y class="left_menu">
    <view class="menu_item {{index == curr ? 'active':''}}" wx:for="{{leftcategoryList}}" wx:key="*this" bindtap="getgoods" data-index="{{index}}">
        {{item}}
    </view>
</scroll-view>
<!-- 右侧 -->
<scroll-view scroll-y  class="right_menu">
    <view class="goods_group" wx:for="{{rightcategoryList}}" wx:for-item="goods" wx:for-index="i" wx:key="cat_id">
        <view class="goods_title">🥂{{goods.cat_name}}🥂</view>
        <view class="goods_list">
            <navigator url="/pages/goods_list/goods_list?cid={{item.cat_id}}"  wx:for="{{goods.children}}" wx:key="cat_id">
                <image src="{{item.cat_icon}}" mode="widthFix"/>
                <view class="goods_name">{{item.cat_name}}</view>
            </navigator>
        </view>
    </view>
</scroll-view>
</view>
</view>

商品列表页面

通过渲染得到图片、内容和商品列表。

商品详情页面

商品详情展示了商品轮播图和商品信息。

<!--pages/goods_detail/goods_detail.wxml-->
<view>
    <view class="index_swiper">
    <swiper indicator-dots autoplay circular>
      <swiper-item wx:for="{{detailList.pics}}" wx:key="*this">
      <navigator bindtap="preview" data-src="{{item.pics_mid}}">
        <image src="{{item.pics_mid}}" mode="widthFix" />
      </navigator>
      </swiper-item>
    </swiper>
    <view class="context">
      <view class="price">￥{{detailList.goods_price}}</view>
      <view class="title">
      <view class="title_name">{{detailList.goods_name}}</view>
      <view class="_xian"></view>
      <view class="like" bindtap="shoucang" ><view class="iconfont icon-shoucang" style="color: {{color}};"></view>收藏</view>
      </view>
    </view>
    <view class="line"></view>

    <view>
      <rich-text nodes="<h1 style='color:red;margin-left:7px;'>图文详情</h1>"></rich-text>
      <view class="line"></view>
      <rich-text nodes="{{detailList.goods_introduce}}"></rich-text>
    </view>

    <view class="btm_tool">

<view class="tool_item">
  <view class="iconfont icon-kefu"></view>
    <view>客服</view>
</view>
  <view class="tool_item">
  <view class="iconfont icon-fenxiang"></view>
    <view>分享</view>
  </view>

  <navigator url="/pages/cart/cart" open-type="switchTab" class="tool_item">
  <view class="iconfont icon-gouwuche"></view>
    <view>购物车</view>
  </navigator>
  <view class="tool_item btn_cart" bindtap="addcart">
   加入购物车
  </view>

  <view bindtap="over" class="tool_item btn_buy">
    立即购买
  </view>
</view>
    </view>
    <!--分享-->
    <button open-type="share" style="position: fixed;bottom: 0;width: 2vw; height:5vh;left: 120rpx;background-color: transparent;border:none"></button>
    <!--客服-->
  <button open-type="contact" size="mini" style="position: fixed;; bottom: 0; background-color: transparent;border:none "></button>
</view>

支付界面

可查看所有的订单信息。

<navigator url="/pages/addressList/addressList" class="user_info_row" wx:if="{{statu!='待发货'}}">
  <view class="user_info" wx:for="{{addressList}}" wx:if="{{item.statu==true}}" wx:key="index">
    <view>{{item.name}}</view>
    <view>{{item.city}}{{item.address}}</view>
  </view>
  <view class="user_phone">{{item.tel}}</view>
</navigator>

<view class="user_info_row" wx:if="{{statu=='待发货'}}">
  <view class="user_info" wx:for="{{address}}" wx:key="index">
    <view>{{item.name}}</view>
    <view>{{item.city}}{{item.address}}</view>
  </view>
  <view class="user_phone">{{item.tel}}</view>
</view>

<!--购物车的内容-->
<view class="cart_content">
  <view class="cart_title">订单</view>
  <view class="cart_main">
    <!--当cart数组不为0显示 -->

    <view class="cart_item" wx:for="{{payList}}" wx:key="index">

      <!--商品图片-->
      <navigator class="cart_img_wrap">
        <image src="{{item.goods.goods_small_logo}}" mode="widthFix" />
      </navigator>
      <!--商品信息-->
      <view class="cart_info_wrap">
        <view class="goods_name">
          {{item.goods.goods_name}}
        </view>
        <view class="goods_price_wrap">
          <view class="goods_price">￥{{item.goods.goods_price}}</view>
          <view class="cart_num_tool">
            <view class="goods_num">X {{item.shu}}</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</view>

<!--底部工具栏-->
<view class="footer_tool" wx:if="{{statu!='待发货'}}">

  <!--总价格-->
  <view class="total_price_wrap">
    <view class="total_price">
      合计
      <text class="total_price_text">￥{{sum}}</text>
    </view>
    <view>
      包含运费
    </view>

  </view>
  <!--结算-->
  <view class="order_pay_wrap" bindtap="payshop">支付({{num}})</view>
</view>

购物车页面

可对商品进行操作（增加，减少，全选，单选等）

<!--pages/cart/cart.wxml-->
<view>
    <button><navigator url="/pages/addressList/addressList">+添加收货地址</navigator></button>
</view>
<view>
<view class="title">优购生活馆</view>
    <checkbox-group bindchange="handleCheck">
        
        <view class="goods" wx:if="{{cartList.length!=0}}" wx:for="{{cartList}}">
            <checkbox value="{{item.goods_id}}" checked="{{state}}" ></checkbox>
            <image src="{{item.goods_big_logo}}"></image>
            <navigator url="/pages/goods_detail/goods_detail?goods_id={{item.goods_id}}">
            <view class="context">{{item.goods_name}}
                <view class="price">
                ￥{{item.goods_price}}
                <view class="btn">
                <button size="mini" catchtap="removenum" data-index="{{index}}" data-money="{{item.goods_price}}">-</button>
                <text>{{shu[index]}}</text>
                <button size="mini" catchtap="addnum" data-index="{{index}}" data-money="{{item.goods_price}}">+</button>
                </view>
                </view>
            </view>
            </navigator>
        </view>
        
    </checkbox-group>

    <view class="page_over">
        <checkbox-group style="width: 150rpx;" bindchange="checkboxChange">
            <checkbox value="all">全选</checkbox>
        </checkbox-group>
        <view class="sum">合计:<text>￥{{sum}}</text>
            <view class="money">包含运费</view>
        </view>
        <view class="go" bindtap="over">
        结算({{num}})
        </view>
    </view>
</view>

添加收货地址页面

<radio-group bindchange="radioChange">
<view class='list-item' wx:for="{{addressList}}" wx:key="index">
<view class='item-head'>
    <text>{{item.label}}</text>
    <text class='right'>{{item.tel}}</text>
</view>

<view class='item-desc'>
   <text>{{item.city}}{{item.address}}</text>
</view>

<view class='item-edit'>
   <view class='left'>
        <radio value="{{index}}" checked="{{item.statu}}">
        <text class='ctr'>设为默认</text>
        </radio>
  </view>
  <view class='right'>
      <text bindtap="navigateToEdit" data-id="1">编辑</text> -
      <text bindtap="delAddr" data-id="1">删除</text>
  </view>
</view>
</view>
</radio-group>
<!--按钮-->
<navigator url="/pages/address/address">
<button style="position: fixed; bottom: 0; width: 100%; background-color: red; color: white; ">添加新地址</button>
</navigator>

我的页面

可进行登录操作，可查看订单信息，管理收货地址等操作。

<view class="view_contain" wx:if="{{userInfo.length!=0}}">
  <!-- 第一部分 -->
  <view class="view_1" >
    <view class="view_image_text">
      <image class="image_radius" src="{{userInfo.avatarUrl}}" />
      <text>{{userInfo.nickName}}</text>
    </view>
  </view>
  <!-- 第二部分 -->
  <view class="view_2">
    <view class="view_tupianwenzi">
      <text style="font-size: 45rpx; color: red; text-align: center;">暂无</text>
      <text class="text_saoyisao">收藏的店铺</text>
    </view>
    <navigator url="/pages/collect/collect?curr=0" class="view_tupianwenzi">
        <text style="font-size: 45rpx; color: red; text-align: center;">{{shoucangList.length}}</text>
      <text class="text_saoyisao">收藏的商品</text>
    </navigator>
    <view class="view_tupianwenzi">
        <text style="font-size: 45rpx; color: red; text-align: center;">{{shoucangList.length}}</text>
      <text class="text_saoyisao">关注的商品</text>
    </view>
    <navigator url="/pages/collect/collect?curr=3" class="view_tupianwenzi">
        <text style="font-size: 45rpx; color: red; text-align: center;">{{hostryList.length}}</text>
      <text class="text_saoyisao">我的足迹</text>
    </navigator>

  </view>
  <view class="view_2 wo">
  <view class="myorder">我的订单</view>
  </view>
  <view class="line"></view>
  <view class="view_2 myorders">
    <navigator url="/pages/order/order?curr=0" class="view_tupianwenzi">
      <view class="iconfont icon-ding_dan" style="color: red; font-size: 50rpx;"></view>
      <text class="text_saoyisao">全部订单</text>
    </navigator>
    <navigator url="/pages/order/order?curr=1" class="view_tupianwenzi">
        <view class="iconfont icon-fukuantongzhi" style="color: red; font-size: 50rpx;"></view>
      <text class="text_saoyisao">待付款</text>
    </navigator>
    <navigator url="/pages/order/order?curr=2" class="view_tupianwenzi">
        <view class="iconfont icon-gouwuche" style="color: red; font-size: 50rpx;"></view>
      <text class="text_saoyisao">待收货</text>
    </navigator>
    <navigator url="/pages/order/order?curr=3" class="view_tupianwenzi">
        <view class="iconfont icon-tuihuotuikuan_dianpu" style="color: red; font-size: 50rpx;"></view>
      <text class="text_saoyisao">退款/退货</text>
    </navigator>

  </view>
  <!-- 第三部分 -->
  <view class="view_3">
    <navigator url="/pages/addressList/addressList" class="list-item">
      <image class="item-image" src="../images/test5.png"></image>
      <text class="item-text">收获地址管理<text style="position: relative; left: 450rpx; bottom: 5rpx;">></text></text>
    </navigator>
    <view class="line"></view>
    <view class="list-item list-item2">
      <image class="item-image" src=""></image>
      <text class="item-text">联系客服<text style="position: relative; left: 320rpx; bottom: 5rpx;">400-618-4000</text></text>
      <view class="line"></view>
      <image class="item-image" src=""></image>
      <navigator url="/pages/feedback/feedback"> <text class="item-text">意见反馈<text style="position: relative; left: 520rpx; bottom: 5rpx;">></text></text></navigator>
      <view class="line"></view>
      <image class="item-image" src=""></image>
      <text class="item-text">关于我们<text style="position: relative; left: 520rpx; bottom: 5rpx;">></text></text>
    </view>
    <view class="line"></view>
    <view class="list-item">
      <image class="item-image" src=""></image>
      <text class="item-text">把应用推荐给其他人<text style="position: relative; left: 350rpx; bottom: 5rpx;">></text></text>
      <button open-type="share" style="position: absolute;bottom: 0; width: 100%;background-color: transparent;border:none"></button>
      <image class="image-jiantou" src="../images/jiantou.png"></image>
    </view>
    <view class="line"></view>
  </view>
  </view>
  <view  wx:else>
  <button type="primary" bindtap="getUserProfile">登陆</button>
  </view>

因篇幅有限，相关wss、js和ts内容未展现，读者可私信获取。感谢各位看官支持！

早春雨漫
关注
  • 17
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
《毕业设计》微信小程序 购物商城
01-23
《毕业设计》微信小程序 购物商城是一个全面展示微信小程序开发能力的项目，它涵盖了电商应用中的核心功能模块，为用户提供了一站式的在线购物体验。这个小程序包括以下几个主要部分： 1. **首页**：首页通常展示...
（毕业设计）微信小程序 小型商城 微信前端
05-14
【标题】"（毕业设计）微信小程序 小型商城 微信前端" 是一个基于微信小程序平台开发的小型在线购物商城项目。这个项目是针对毕业生进行实战训练，旨在提升他们在前端开发领域的技能，特别是微信小程序的开发技术。 ...
微信小程序（笔记）
qq_45076209的博客
03-28 352
第一天 文档地址 https://www.showdoc.com.cn/128719739414963 01 在全局app.js中，输入app选择第三个，可以把常用方法补出来 在项目index.js中，输入的是page 02 把阿里图标库的代码放到styles的icon.wxss中，在全局app.wxss中引入 @import “./styles/icon.wxss”; 03 在app.json中输tabBar然后自动补全 其中pagePath是路径，text为文字，iconPath是未选中的图标，sele
微信小程序-图片宽高自适应设置
热门推荐
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
09-26 1万+
微信小程序中，有很做组件都是有默认宽高的，比如，image组件默认宽度320px、⾼度240px，这些默认设置常常会对我们的页面布局造成影响 <!-- mode="widthFix" 让图片占满宽度，等比例缩放高度 --> <image src="xxxx" mode="widthFix"></image> 所以，在使用image标签的时候，最常用的方法就是设置其 mode，例如用widthFix，...
微信小程序–分类导航
无知者无畏
06-20 3080
微信小程序–分类导航 UI直接给整个图片：里面包含文字和对应的分类导航图片 <!-- 导航 --> <view class="index_cate"> <navigator wx:for="{{cateList}}" wx:key="name"> <image src="{{item.image_src}}" mode="widthFix" lazy-load="true" /> </navigator> &l
微信小程序开发之WXML模板语法
轻舟终过万重山
07-07 1636
事件响应处理，数据绑定与计算，条件渲染与列表渲染
点击轮播图进入详情页
m0_74394416的博客
10-21 73
- 轮播图 --></swiper>-- 分类 --></view>-- 图片布局 --></view></view>
【毕业设计】基于微信小程序的购物商城系统
WEB_DC的博客
12-22 3578
Hi，大家好，学长今天向大家介绍 一个小程序项目微信小程序商城大家可用于 毕业设计。
【毕业设计】微信小程序商城购物系统
caxiou的博客
11-18 4756
🔥 Hi，大家好，这里是丹成学长的毕设系列文章！🔥 对毕设有任何疑问都可以问学长哦!这两年开始，各个学校对毕设的要求越来越高，难度也越来越大… 毕业设计耗费时间，耗费精力，甚至有些题目即使是专业的老师或者硕士生也需要很长时间，所以一旦发现问题，一定要提前准备，避免到后面措手不及，草草了事。为了大家能够顺利以及最少的精力通过毕设，学长分享优质毕业设计项目，今天要分享的新项目是🚩基于微信小程序的商城购物系统🥇学长这里给一个题目综合评分(每项满分5分)难度系数：4分工作量：4分创新点：3分🧿。
毕业设计-微信小程序商城源码
07-04
本毕业设计项目就是围绕这个主题展开，通过提供微信小程序商城的源码，为学习者提供了一个实践和研究的平台。 1. **微信小程序基础**：微信小程序是一种基于微信平台的应用开发框架，由腾讯公司推出。它采用自有的...
基于微信小程序仿京东购物商城app设计毕业论文源码
06-17
本文将详细探讨基于微信小程序的京东购物商城应用的设计与实现，该系统是为毕业论文而构建的源码项目。在微信小程序的框架下，我们利用Java作为后端开发语言，Eclipse作为开发工具，以及MySQL数据库来存储和管理数据...
微信小程序功能：轮播图--双重for循环
无知者无畏
06-23 2350
微信小程序–首页index 包含功能点： 轮播图 商品分类 商品楼层：双重for循环 结构：index.wxml <view class="pyg_index"> <!-- 搜索框 --> <searchInput></searchInput> <!-- 轮播图 --> <view class="index_swiper"> <swiper autoplay="{{true}}" indicator
HTML5大作业三农有机，农产品，农庄，农旅网站源码
xcLeigh
07-17 5405
HTML5大作业三农有机，农产品，农庄，农旅网站源码，农旅文化相关介绍网站，农产品网站，农庄网站，介绍农业相关的网站，农业网站大作业，毕业设计，功能点包含轮播图，图文处理，表单，表格，菜单，模块等各种风格都有，代码上手简单，代码独立，可以直接使用。也可直接预览效果。
【微信小程序实战教程】之微信小程序原生开发详解
柯晓楠
07-24 1423
在实际的项目开发中，小程序的内置组件不一定能满足所有的需求，为了实现更高效的代码复用，小程序还允许开发者自行扩充组件，这些由开发者自行设计的组件被称为自定义组件。在小程序中，每个组件都具有独立的逻辑空间，分别拥有自己的独立数据和setData方法调用。在使用自定义组件的小程序页面中，Exparser框架将接管所有的自定义组件注册和实例化。小程序的基础库中提供了Page和Component两个构造器，自定义组件使用的是Component构造器。
微信小程序之计算器
最新发布
ch_s_t的专栏
07-25 1080
data-*是微信小程序的自定义属性，由data-前缀加上自定义的属性名，自定义属性值表示要传递的数据 ，在事件处理函数中通过targert或currentTarget对象的datasett属性获取数据。
微信小程序实现聊天界面，发送功能
番茄Salad
07-24 1964
【代码】微信小程序实现聊天界面，发送功能。
微信小程序 setData方法踩的坑！！！
weixin_44692308的博客
07-24 490
在微信小程序中，setData是用于更新组件数据的方法。调用setData后，小程序框架会触发页面的重新渲染，并将更新后的数据反映到视图上。
C# 二维码小程序
a876106354的博客
07-24 439
在C#中创建一个能够生成二维码的小程序，你可以使用。你可以通过NuGet包管理器来安装。首先，你需要在你的项目中安装。
微信小程序在商城购物系统中的应用研究
本文是一篇关于基于微信小程序的商城购物系统的毕业设计论文，主要关注的是在当前移动互联网背景下，微信小程序如何作为一种轻量级的解决方案来构建高效、便捷的在线购物体验。微信小程序以其“用完即走”的特性，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

早春雨漫

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值