小程序优购商城项目讲解

最新推荐文章于 2022-11-19 22:52:57 发布
最新推荐文章于 2022-11-19 22:52:57 发布
阅读量668 收藏
点赞数
分类专栏： 小程序 文章标签： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_49612239/article/details/116948436
版权

小程序优购商城项目讲解

首页页面：

pages/home/home.wxml

首页页面：

首页代码：

search:点击跳转到搜索页面，然后判断。根据输入框中的value和给的接口中的数据（数组）进行对比，如果相同进行渲染

在这里插入图片描述

// 发送请求获取搜索建议 数据
  async qsearch(query){
    const res=await request({url:"/goods/qsearch",data:{query}});
    console.log(res);
    this.setData({
      goods:res
    })
  },

轮播图：使用组件进行作相对应的渲染（调取数据）
在这里插入图片描述

  <swiper indicator-dots="{{true}}" autoplay="{{true}}" interval="{{2000}}" duration="{{true}}">
    <block wx:for="{{list}}" wx:key="index">
      <swiper-item>
       <image src="{{item.image_src}}"></image>
      </swiper-item>
    </block>
  </swiper>

下面的分类栏中给设置跳转 跳转到分类页面 （点击事件，跳转 ，组件）

在这里插入图片描述

接下啦就是接口中的三个分类图，循环渲染
在这里插入图片描述
tabber: 点击跳转到对应的页面 并且有高亮效果

"tabBar": {
    "list": [
      {
        "pagePath": "pages/home/home",
        "text": "首页",
        "iconPath": "/tabbar/home.png",
        "selectedIconPath": "/tabbar/home_active.png"
      },
      {
        "pagePath": "pages/category/category",
        "text": "分类",
        "iconPath": "/tabbar/category.png",
        "selectedIconPath": "/tabbar/category_active.png"
      },
      {
        "pagePath": "pages/cart/cart",
        "text": "购物车",
        "iconPath": "/tabbar/cart.png",
        "selectedIconPath": "/tabbar/cart_active.png"
      },
      {
        "pagePath": "pages/my/my",
        "text": "我的",
        "iconPath": "/tabbar/my.png",
        "selectedIconPath": "/tabbar/my_active.png"
      }
    ]
  },

pages/home/home.js

data: {
    list: [],
    dh:[],
    lc:[]
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

    // 轮播
    app.http.banner().then((res) => {
      // console.log(res.data.message);
      this.setData({
        list: res.data.message
      })
    })

    // nav
    app.http.nav().then((res) => {
      let { message} = res.data
      // console.log(message);
      this.setData({
        dh:message
      })
    })

    // 楼层
    app.http.lc().then((res)=>{
      let {message} =res.data
      this.setData({
        lc:message
      })
      // console.log(this.data.lc)

    })

  },

css样式有点杂乱 大局就是使用的 响应式 flex 布局 来写的 就不放了 有要的可以私，抱拳了

分类页面

点击左边的商品分类名，显示右侧对应的数据，选中的商品分类名称高亮
在这里插入图片描述

左侧边栏商品分类：

渲染分类接口中的商品分类名称 存放到数组中进行循环渲染到分类左侧，设置点击事件bindtap="addlist"点击他的时候显示对应的商品分类

在这里插入图片描述

<!-- 左盒子 -->
    <view class="left_box">
      <block wx:for="{{left_sj}}" wx:key="index">
        <view  class="{{index == indexs ? 'aaa' :'z_wz'}}"  bindtap="addlist" data-index="{{index}}">{{item}}</view>
      </block>
    </view>

右侧边栏商品logo展示：

右侧的数据和渲染和左侧比较相似，要渲染需要商品图片，商品名等，哦，还有flex布局哦！

在这里插入图片描述

<!-- 右盒子 -->
    <view class="right_box">
      <!-- 分类名 -->
      <block wx:for="{{goods}}" wx:key="index" wx:for-index="index1" wx:for-item="item1">
        <view class="s_ys">/ {{item1.cat_name}} /</view>

        <!-- 文字和图片盒子 -->
        <block wx:for="{{item1.children}}" wx:key="index" wx:for-index="index2" wx:for-item="item2">
          <navigator url="/pages/goods_list/goods_list?cid={{item2.cat_id}}" class="y_ys" >
            <image src="{{item2.cat_icon}}" class="tp"></image>  
            {{item2.cat_name}}
          </navigator>
        </block>
      </block>
    </view>

js代码：

/ pages/category/category.js
const app = getApp();
Page({

  /**
   * 页面的初始数据
   */
  data: {
    // 接口返回数据
    fl:[],
    // 左边数据
    left_sj:[],
    // 右边数据
    right_sj:[],
    indexs:0,
    goods:[]
  },
addlist(e){
  // console.log(e)
  let index = e.currentTarget.dataset.index
  // console.log(index)
  let good = this.data.fl[index].children
  // console.log(good)
  this.setData({
    indexs:index,
    goods:good
  })
},
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // 分类
    app.http.fl().then((res)=>{
      let {message}=res.data
      this.setData({
         fl:message
      })

        //  构造左边的数据
        let left_sj = this.data.fl.map(v=>v.cat_name)

        // console.log(left_sj)

        // 构造右边的商品数据
        let right_sj = this.data.fl[0].children
        this.setData({
          left_sj,
          right_sj
        })
      // console.log(this.data.fl)
    })
  },

css代码：

.bigbox {
  height: 100%;
}

.box {
  box-sizing: border-box;
  width: 100%;
  height: calc(100vh - 80rpx);
  display: flex;
}

.left_box {
  height: 100%;
  flex: 2;
  overflow: auto;
}
.z_wz{
  height: 60rpx;
  border-bottom: 1px solid rgb(221, 221, 221);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.right_box {
  height: 100%;
  flex: 5;
  display: flex;
  flex-wrap: wrap;
  overflow: auto;
}
.s_ys{
  width: 100%;
  text-align: center;
  height: 50rpx;
  margin: 40rpx 0;
}
.tp{
  width: 120rpx;
  height: 120rpx;
}
.y_ys{
  font-size: 26rpx;
  width: 30%;
  height: 160rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  margin-left: 15rpx;
}
.aaa{
 
  
  width: 100%;
  height: 60rpx;
  border-bottom: 1px solid rgb(221, 221, 221); 
  border-left:4rpx solid  red;
  color: red;  
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

}

点击分类页面右侧的商品跳转到相对应的商品列表页面（传参），下拉刷新重新加载一下页面的数据，有下拉过度动画，上拉加载更多分页，每次上拉加载5条数据，最后提示已到底部。
在这里插入图片描述
js：

<view class="tabs">
  <view class="tabs_title">
    <view wx:for="{{tabs}}" wx:key="id" class="  {{index==indexs ?'active':'title_item'}}" bindtap="handleItemTap"
      data-index="{{index}}">
      {{item.value}}
    </view>
  </view>
  <view class="tabs_content">
    <block wx:for="{{lbss}}" wx:key="index">
      <navigator url="/pages/goods_detail/goods_detail?id={{item.goods_id}}" class="h_box">
        <view class="t">
          <image src="{{item.goods_small_logo}}"></image>
        </view>
        <view class="z">
          <view class="z_yc"> {{item.goods_name}}</view>
          <view style="color: #f22">￥{{item.goods_price}}</view>
        </view>
      </navigator>
    </block>
  </view>
</view>

css：

.tabs {
  width: 100%;
}

.tabs_title {
  height: 100%;
  display: flex;

}

.title_item {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  padding: 15rpx 0;
}

.active {
  color: #f22;
  border-bottom: 5rpx solid #f22;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  padding: 15rpx 0;
}

.tabs_content {
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;

}

.h_box {
  width: 100%;
  height: 400rpx;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.t {
  flex: 2;
}

image {
  width: 260rpx;
  height: 260rpx;
}

.z {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  font-size: 30rpx;
  flex: 3;
}

.z_yc {
  display: -webkit-box;
  /*设置为弹性盒子*/
  -webkit-line-clamp: 2;
  /*最多显示5行*/
  overflow: hidden;
  /*超出隐藏*/
  text-overflow: ellipsis;
  /*超出显示为省略号*/
  -webkit-box-orient: vertical;
  word-break: break-all;
  /*强制英文单词自动换行*/
}

点击对应的商品进入详情（传参id），接收并在页面中渲染相对应的功能，点击收藏触发点击事件，将本条数据存到本地缓存中，然后在相对应的页面提取本地缓存中的数据进行渲染相对应的数据，收藏后收藏icon改变状态图案。点击下边

在这里插入图片描述

wxml:

<!--pages/goods_detail/goods_detail.wxml-->
<view class="bigbox">
  <swiper indicator-dots="{{true}}" autoplay="{{true}}" interval="{{2000}}" duration="{{true}}" class="lb_1">
    <block wx:for="{{xq.pics}}" wx:key="index">
      <swiper-item class="lb_1">
        <image src="{{item.pics_sma_url}}" class="lb_1"></image>
      </swiper-item>
    </block>
  </swiper>
  <view class="jq">
    ￥{{xq.goods_price}}
  </view>
  <view class="xqwz">
    <view class="l-z1">
      {{xq.goods_name}}
    </view>
    <view class="r-z1">
      <mp-icon icon="star" color="black" size="{{25}}"></mp-icon>
      收藏
    </view>
  </view>
  <!-- 图文 -->
  <view class="tw_wz">
    图文详情
  </view>
  <!-- 渲染图文 -->
  <rich-text nodes="{{xq.goods_introduce}}"></rich-text>
  <view class="db">
    <view class="db_l">
      <view class="l_z2">
        <mp-icon icon="comment" color="black" size="{{25}}"></mp-icon>
        联系客服
      </view>
      <view class="l_z2">
        <mp-icon icon="share" color="black" size="{{25}}"></mp-icon>
        分享
      </view>
      <navigator url="/pages/cart/cart " class="l_z2" bindtap="toCart">
        <mp-icon icon="shop" color="black" size="{{25}}"></mp-icon>
        购物车
      </navigator>
    </view>
    <view class="db_r">
      <navigator url="/pages/cart/cart" class="bt1" bindtap="addBdhc">
        加入购物车
      </navigator>
      <navigator class="bt2">
        立即购买
      </navigator>
    </view>
  </view>
</view>

js

// pages/goods_detail/goods_detail.js
const app = getApp();
Page({

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

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // console.log(options)

    // 详情
    app.http.xq(options.id).then((res)=>{
      let {message}=res.data
      this.setData({
        xq:message,
      })
      console.log(this.data.xq)
    })
  },
  // 跳转购物车
  toCart(){
    wx.reLaunch({
      url: '/pages/cart/cart',
    });
  },
  // 点击事件 加到本地缓存中
  addBdhc(){
    let conts  = wx.getStorageSync('goodlist')||[]
    // console.log(conts)
    let obj = this.data.xq
    // console.log(obj)
    let index  = conts.findIndex(item =>{
      return item.goods_id === obj.goods_id
    })
    if(index === -1){
        this.data.xq.num = 1;
        this.data.xq.change = true
        conts.push(this.data.xq)
        // console.log(this.data.xq)
    }else{
      conts[index].num++
    }
    wx.setStorageSync('goodlist',conts)
    console.log(index)
    wx.showToast({
      title: '添加购物车成功',
    })
  },
  

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

…

致良知丶
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信小程序（黑马优购项目）
iaz999的博客
04-21 2630
在项目根目录的components目录上，鼠标右键，选择新建组件，填写组件信息后，最后点击创建按钮：为了增强组件的通用性，我们允许使用者自定义搜索组件的背景颜色和圆角尺寸。通过props定义bgcolor和radius两个属性，并指定值类型和属性默认值：在my-search自定义组件内部，给类名为的view绑定click事件处理函数：在分类页面中使用my-search自定义组件时，即可通过@click为其绑定点击事件处理函数：在分包里创建search页面同时在分类页面中，定义。
优购线上购物商城微信小程序
11-30
一个用微信小程序原生框架写的一个小程序。有用户登陆、搜索商品、收藏商品、加购商品、结算商品、联系客服等功能
黑马优购小程序之项目搭建
小洋人最happy的专栏
03-01 6087
文章目录1.1 新建项目1.2 搭建目录结构1.3 清理无用文件1.4 搭建项目页面1.5 搭建tabBar1.6 初始化页面样式1.6.1 定义主题颜色和字体1.6.2 使用定义的主题颜色1.6.3 设置导航栏和全局外观1.7 小结 1.1 新建项目 无脑通过微信开发者工具创建项目，填入appid，创建完成后，如图： 1.2 搭建目录结构 目录结构划分如下： 目录名 作用 st...
ZZ-Shop：原生微信小程序项目-优购商城
02-18
ZZ店 项目简介：该商城是基于原生微信小程序来实现的。已完成功能： 登录授权 商品添加进购物车，购物车删除商品 展示个人中心，首页，商品详情 搜索商品 收藏商品 订单查询 接口在此： : 截图如下： 首页： 商品分类： 有商品时的购物车： 无商品时的购物车： 购物车（删除商品）： 登录后的个人中心： 没有登录的个人中心： 搜索商品页面： 商品详情页面： 商品列表页面： 订单查询页面： 商品收藏页面：
小程序 优选商城 项目讲解
liyunlonggg的博客
05-17 1829
优选商城 参考文档 接口地址 微信开发文档 阿里图标库 首页 轮播图 导航栏和楼层 分类 分类主要是用微信小程序提供的滚动组件做的 scroll-view 来完成的 左边是分类大的分类 右边是小分类 当点击不同的分类时会获取当前的下标的子类数据显示到右边菜单栏 当点击右边分类时会把当前的cat_id传到商品列表中去获取当前cat_id下的商品信息 点击商品会把当前的商品的goods_id传到详情页面获取当前商品的详细信息 收藏 首先在data中定义控制收藏高亮的属性 类型为Boolean 值 为tr
小程序黑马优购商城项目讲解
BBOY_airenC的博客
05-18 4598
小程序优购商城项目讲解 在我们开始之前 我们需要配好该项目所需要的接口文档以及配好相应的页面，以免在开发过程中会出现遗漏的问题出现。 首先我们要知道优购是分为4部分的 分别为首页/列表/购物车/我的。 要实现这四部分的切换的话，我们需要一个的TAB栏 想要实现这一功能我们需要在全局app.json中写入tabBar来实现： 代码如下： 就可以实现切换的效果拉 首页： 然后就要开始去写我们的页面拉 推荐先写首页拉 首先就是要封装头部组件...
wepy_shop:wepy构建的微信小程序项目--品优购商城
05-13
“wepy_shop:wepy构建的微信小程序项目--品优购商城” 这个标题揭示了项目的本质，它是一个使用Wepy框架构建的微信小程序应用，旨在创建一个名为“品优购商城”的在线购物平台。Wepy是腾讯开发的一个开源框架，它...
黑马优购项目讲解
shiqianhui1124的博客
05-18 759
黑马优购项目讲解： 准备项目前期准备工作，把项目划分为四个主体部分：首页、分类、购物车以及我的页面。 1.准备工作： 封装公共组件及request请求： 1-1.公共组件的封装 在根目录下创建components文件，放置封装好的公共组件 1-2.接口api的请求和对使用promise对request的封装 ...
02-微信小程序项目(黑马优购).zip
06-24
02-微信小程序项目(黑马优购).zip
yg-shop:原生微信小程序项目-优购商城
05-24
ZZ-Shop 项目简介： 该商城是基于原生微信小程序来实现的。 已完成功能： 登录授权 商品添加进购物车、购物车删除商品 展示个人中心、首页、商品详情 搜索商品 收藏商品 订单查询 接口在此： 截图如下： 首页： 商品分类： 有商品时的购物车： 无商品时的购物车： 购物车（删除商品）： 登录后的个人中心： 没有登录的个人中心： 搜索商品页面： 商品详情页面： 商品列表页面： 订单查询页面： 商品收藏页面：
微信小程序详细介绍ppt.pptx
05-15
该课件可以用于内部教学，也可以自学，微信小程序如此之火相信大家会努力学习的，一起学习一起探索技术一起学习一起探索技术一起学习一起探索技术一起学习一起探索技术
优购商城项目讲解
m0_57142556的博客
05-17 311
①首先先把wx.request封装好。接着去配置路由。把底部导航写出来， 在全局的app.json中配置： { "pages": [ // 这个是我们的页面，有点类似我们的vue路由 "pages/index/index", "pages/category/category", "pages/goods_list/goods_list", "pages/goods_detail/goods_detail", "pages/cart/cart", "
微信小程序优购商城项目
weixin_57748957的博客
05-17 1135
这篇文章主要就是把我写的优购商城进行简单的说明，希望可以对大家有所帮助 1.先配置页面 在app.json中设置所需要的页面路径 2.然后再封装我们需要的组件和wx.request wx.request可以不封装，但是封装可以减少重复代码，写起来也比较方便 axios就是我封装的http文件，名字叫什么都可以 2-1 api.js代码 代码是导出需要的接口路径， module.exports={ "swiber":"/home/swiperdata", } 2-2 request.js代码 封装w
【愚公系列】2022年11月 uniapp专题-优购电商首页-轮播图
时光隧道
11-19 8916
轮播图是指在一个模块或者窗口，通过鼠标点击或手指滑动后，可以看到多张图片。这些图片统称为轮播图，这个模块叫做轮播模块。轮播图常见于电商类、资讯类应用、功能首页、功能模块主页面。轮播图通常位于首页顶部，有时也会在页面中间位置。以动态的形式为用户呈现多张图片，自动轮播的效果可以让每张图片得到较好的曝光。位于首页顶部的作用可提高广告商品、优质内容的曝光度，提高浏览到购买的转化率和衡量内容价值。中间部位 Banner 轮播图的作用是在可利用固定且较小的广告位展示更多的广告数量和内容。
【微信小程序】黑马优购--04商品列表
weixin_58214412的博客
12-21 1751
6.商品列表页面 接口文档 6.1效果 6.2获取分类id 在分类页面wxml中加个超链接把id传过去 <view class="goods_list"> <navigator wx:for="{{item1.children}}" wx:for-index="index2" wx:for-item="item2" wx:key="cat_id" url="/pages/goods_list/goods_list?cid={{item2.cat_id}}"&gt..
搜索功能（三）-实现关键字搜索功能——封装调用接口方法-携带参数param & v-if为空判断模块消失
weixin_44867717的博客
10-23 2772
实现关键字搜索功能——封装调用接口方法-携带参数param & v-if为空判断模块消失 搜索条效果 <div class="search-input"> <icon type='search' size='16'/> <input placeholder="请输入关键字" /> </div> <button class="cancel">取消</button> 搜索结果列表 <div class="s
uniapp微信小程序实现《优购商城项目》
最新发布
09-04
《优购商城项目》是一个基于uni-app开发的微信小程序商城项目。 要实现《优购商城项目》，首先需要配置uni-app的开发环境。可以使用HBuilderX作为开发工具，它提供了丰富的功能和插件来辅助开发。然后需要获取微信...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值