附录6-3 黑马优购项目-准备工作与首页

最新推荐文章于 2024-07-25 21:27:06 发布
最新推荐文章于 2024-07-25 21:27:06 发布
阅读量943 收藏 9
点赞数 19
分类专栏： 微信小程序开发 文章标签： 微信小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/potato123232/article/details/138386518
版权

开发项目流程介绍 Headline | uniapp - 黑马优购

视频地址 01.项目介绍与项目文档_哔哩哔哩_bilibili P95-P192

视频中是用uni-app做的，我是用原生的小程序开发平台做的

目录

1  准备工作

1.1  头部信息

1.2  主页面

1.3  tabbar

1.4  定义请求根路径

2  首页

2.1  轮播图接口

2.2  导航部分接口

2.3  楼层区域接口

2.4  首页源码

1  准备工作

1.1  头部信息

1.2  主页面

logs是自带的，后面没有进行开发，也可以删去logs这个页面

1.3  tabbar

需要用到这些图

然后在app.json中做如下配置

1.4  定义请求根路径

在app.js中定义全局变量base_url

2  首页

首页分为四个区域，自上而下依次是 搜索区域，轮播图区域，导航区域，楼层区域

导航区域以下全是楼层区域

2.1  轮播图接口

发get请求 https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata 不携带任何参数

图像的内容是image_src。点击相应的轮播图会跳转到指定的小程序位置(navigator_url)。其中提到的goods_detail是小程序的一个子页面

2.2  导航部分接口

发get请求 https://api-hmugo-web.itheima.net/api/public/v1/home/catitems 不携带任何参数

只有第一个导航点击后会跳到分类的主页面，其余点击后无效。如果你想让其他导航有效，那么修改后端端口就可以了

2.3  楼层区域接口

发get请求 https://api-hmugo-web.itheima.net/api/public/v1/home/floordata 不携带任何参数 请求结果如下

{
    "message": [
        {
            "floor_title": {
                "name": "时尚女装",
                "image_src": "https://api-hmugo-web.itheima.net/pyg/pic_floor01_title.png"
            },
            "product_list": [
                {
                    "name": "优质服饰",
                    "image_src": "https://api-hmugo-web.itheima.net/pyg/pic_floor01_1@2x.png",
                    "image_width": "232",
                    "open_type": "navigate",
                    "navigator_url": "/pages/goods_list?query=服饰"
                },
                {
                    "name": "春季热门",
                    "image_src": "https://api-hmugo-web.itheima.net/pyg/pic_floor01_2@2x.png",
                    "image_width": "233",
                    "open_type": "navigate",
                    "navigator_url": "/pages/goods_list?query=热"
                },
                {
                    "name": "爆款清仓",
                    "image_src": "https://api-hmugo-web.itheima.net/pyg/pic_floor01_3@2x.png",
                    "image_width": "233",
                    "open_type": "navigate",
                    "navigator_url": "/pages/goods_list?query=爆款"
                },
                {
                    "name": "倒春寒",
                    "image_src": "https://api-hmugo-web.itheima.net/pyg/pic_floor01_4@2x.png",
                    "image_width": "233",
                    "open_type": "navigate",
                    "navigator_url": "/pages/goods_list?query=春季"
                },
                {
                    "name": "怦然心动",
                    "image_src": "https://api-hmugo-web.itheima.net/pyg/pic_floor01_5@2x.png",
                    "image_width": "233",
                    "open_type": "navigate",
                    "navigator_url": "/pages/goods_list?query=心动"
                }
            ]
        },
        {
            "floor_title": {
                "name": "户外活动",
                "image_src": "https://api-hmugo-web.itheima.net/pyg/pic_floor02_title.png"
            },
            "product_list": [
                {
                    "name": "勇往直前",
                    "image_src": "https://api-hmugo-web.itheima.net/pyg/pic_floor02_1@2x.png",
                    "image_width": "232",
                    "open_type": "navigate",
                    "navigator_url": "/pages/goods_list?query=户外"
                },
                {
                    "name": "户外登山包",
                    "image_src": "https://api-hmugo-web.itheima.net/pyg/pic_floor02_2@2x.png",
                    "image_width": "273",
                    "open_type": "navigate",
                    "navigator_url": "/pages/goods_list?query=登山包"
                },
                {
                    "name": "超强手套",
                    "image_src": "https://api-hmugo-web.itheima.net/pyg/pic_floor02_3@2x.png",
                    "image_width": "193",
                    "open_type": "navigate",
                    "navigator_url": "/pages/goods_list?query=手套"
                },
                {
                    "name": "户外运动鞋",
                    "image_src": "https://api-hmugo-web.itheima.net/pyg/pic_floor02_4@2x.png",
                    "image_width": "193",
                    "open_type": "navigate",
                    "navigator_url": "/pages/goods_list?query=运动鞋"
                },
                {
                    "name": "冲锋衣系列",
                    "image_src": "https://api-hmugo-web.itheima.net/pyg/pic_floor02_5@2x.png",
                    "image_width": "273",
                    "open_type": "navigate",
                    "navigator_url": "/pages/goods_list?query=冲锋衣"
                }
            ]
        },
        {
            "floor_title": {
                "name": "箱包配饰",
                "image_src": "https://api-hmugo-web.itheima.net/pyg/pic_floor03_title.png"
            },
            "product_list": [
                {
                    "name": "清新气质",
                    "image_src": "https://api-hmugo-web.itheima.net/pyg/pic_floor03_1@2x.png",
                    "image_width": "232",
                    "open_type": "navigate",
                    "navigator_url": "/pages/goods_list?query=饰品"
                },
                {
                    "name": "复古胸针",
                    "image_src": "https://api-hmugo-web.itheima.net/pyg/pic_floor03_2@2x.png",
                    "image_width": "263",
                    "open_type": "navigate",
                    "navigator_url": "/pages/goods_list?query=胸针"
                },
                {
                    "name": "韩版手链",
                    "image_src": "https://api-hmugo-web.itheima.net/pyg/pic_floor03_3@2x.png",
                    "image_width": "203",
                    "open_type": "navigate",
                    "navigator_url": "/pages/goods_list?query=手链"
                },
                {
                    "name": "水晶项链",
                    "image_src": "https://api-hmugo-web.itheima.net/pyg/pic_floor03_4@2x.png",
                    "image_width": "193",
                    "open_type": "navigate",
                    "navigator_url": "/pages/goods_list?query=水晶项链"
                },
                {
                    "name": "情侣表",
                    "image_src": "https://api-hmugo-web.itheima.net/pyg/pic_floor03_5@2x.png",
                    "image_width": "273",
                    "open_type": "navigate",
                    "navigator_url": "/pages/goods_list?query=情侣表"
                }
            ]
        }
    ],
    "meta": {
        "msg": "获取成功",
        "status": 200
    }
}

楼层区域点击后会跳转到子页面goods_list

2.4  首页源码

wxml

<!--pages/home/home.wxml-->
<!-- 搜索区域 -->
<view style="position: sticky;top:0;z-index: 999;">
  <black_horse_search></black_horse_search>
</view>

<!-- 轮播图 -->
<swiper indicator-dots="true" autoplay="true" interval="3000" duration="1000" circular="true">
  <swiper-item wx:for="{{ swiperList }}" wx:key="goods_id">
    <navigator class="swiper_item_view" url="{{'/subpackage_goods_detail/goods_detail?goods_id=' + item.goods_id}}">
      <image src="{{item.image_src}}" />
    </navigator>
  </swiper-item>
</swiper>
<!-- 导航区域 -->
<view class="nav-list">
  <view class="nav-item" wx:for="{{ navList }}" wx:key="index">
    <image src="{{item.image_src}}" class="nav-img" bindtap="nav_click_method" data-nav_name="{{item.name}}"/>
  </view>
</view>
<!-- 楼层区域 -->
<view class="floor-list">
  <view class="floor-item" wx:for="{{ floorList }}" wx:key="index" >
    <!-- 楼层标题 -->
    <image src="{{item.floor_title.image_src}}" class="floor-title" />
    <view class="floor-img-box">
      <!-- 楼层大图片盒子 -->
      <view class="left-img-box">
        <image src="{{ item.product_list[0].image_src }}" style="{{'width:' + item.product_list[0].image_width + 'rpx;'}}" mode="widthFix" bindtap="floor_click_method" data-url="{{ item.product_list[0].navigator_url }}"/>
      </view>
      <!-- 楼层小图片盒子 -->
      <view class="right-img-box">
          <image  wx:for="{{ item.product_list }}" wx:for-item="item1" wx:for-index="index1" wx:key="index1" wx:if="{{index1 != 0}}" src="{{ item1.image_src }}" mode="widthFix" style="{{'width:' + item1.image_width + 'rpx;'}}" bindtap="floor_click_method" data-url="{{ item1.navigator_url }}"/>
      </view>
    </view>
  </view>
</view>

wxss

/* pages/home/home.wxss */
/* 轮播图部分 */
swiper {
  height:330rpx;
}

swiper .swiper_item_view,image {
  width:100%;
  height:100%
}
/* 导航部分 */
.nav-list {
  display:flex;
  justify-content: space-around;
  margin:15px 0;
}

.nav-list .nav-img {
  width: 128rpx;
  height:140rpx;
}

/* 楼层部分 */
.floor-title {
  height:60rpx;
  width:100%;
  display:flex;
}

.right-img-box {
  display:flex;
  flex-wrap:wrap;
  justify-content:space-around;
  padding:0px;
}

.floor-img-box {
  display:flex;
  padding-left:10rpx;
}

js

// pages/home/home.js
import {createStoreBindings} from 'mobx-miniprogram-bindings'
import {store} from '../../store/store.js'

const App = getApp()

Page({
  // 楼层部分点击
  floor_click_method(e) {
    wx.navigateTo({url:'/subpackage_goods_list/goods_list?' + e.target.dataset.url.split('?')[1]})
  },
  // 获取楼层区域信息
  get_floorList() {
    wx.request({
      url:App.base_url + '/api/public/v1/home/floordata',
      method:'GET',
      success:(val) => {
        this.setData({floorList:val.data.message})
      },
      fail:() => {
        console.log('获取楼层失败')
        wx.showToast({
          title:'获取楼层失败',
          icon:'error',
          duration:2000
        })
      }
    })
  },
  // 导航部分点击
  nav_click_method(e) {
    if (e.target.dataset.nav_name == "分类") {
      wx.switchTab({url:'/pages/category/category'})
    }
  },
  // 获取导航部分数据
  get_navList() {
    wx.request({
      url:App.base_url + '/api/public/v1/home/catitems',
      method:'GET',
      success:(val) => {
        this.setData({navList:val.data.message})
      },
      fail:() => {
        console.log('获取主页导航数据失败')
        wx.showToast({
          title:'获取主页导航数据失败',
          icon:'error',
          duration:2000
        })
      }
    })
  },
  // 获取轮播图数据
  get_swiperList() {
    wx.request({
      url:App.base_url + '/api/public/v1/home/swiperdata',
      // url:'http://127.0.0.1:8000/api/public/v1/home/swiperdata/',
      method:'GET',
      success:(val) => {
        this.setData({swiperList:val.data.message})
      },
      fail:() => {
        console.log('获取轮播图失败')
        wx.showToast({
          title:'获取轮播图失败',
          icon:'error',
          duration:2000
        })
      }
    })
  },
  /**
   * 页面的初始数据
   */
  data: {
    swiperList:[],
    navList:[],
    floorList:[]
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.storeBindings = createStoreBindings(this,{
      store,
      actions:['set_cart_tabBar_badge']
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
    // 获取轮播图数据
    this.get_swiperList()
    // 获取主页导航部分数据
    this.get_navList()
    // 获取主页楼层部分数据
    this.get_floorList()
    // 设置购物车tabBar上的徽标
    this.set_cart_tabBar_badge()
  },

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

  },

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

  },

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

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

  },

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

  },

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

  }
})
Suyuoa
关注
  • 19
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
uniapp优购项目----完整学习笔记（附录项目完整源码）
tigerhhzz的博客
01-23 2806
uni-app 是一个使用 Vue.js 开发所有前端应用的框架。开发者编写一套代码，可发布到 iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。详细的uni-app 官方文档，请翻阅。
uni-app黑马优购项目笔记（下）
04-02
uni-app黑马优购项目笔记（下）
CSDN最全面的微信小程序源码和模板
03-08
从事微信小程序开发也有差不多半年的时间了，本人深知对于从来都没有接触过微信小程序开发的人刚开始是多么的迷茫，无助。其实我刚开始也是这样，然而进过一段时间的开发，学习，我知道了其实网上有很多人进行分享过，可以参照他们的进行开发学习，这样不仅仅可以达到事倍功半的效果。这是我自己在网上收集，和一些自己做的一些小程序，想分享出来帮助大家更好的学习开发，其中包括了一些比较完善的小程序开源框架，还有几套比较完善的微信小程序商城模板，和源码只需自己把接口替换成自己的即可，希望能够帮到大家。
【 uniapp - 黑马优购 | 发布】详讲如何发布一个小程序
小新的博客
01-27 706
11. 发布 11.1 为什么要发布 11.2 发布小程序的流程 11.3 发布为 Android App 的流程
【 uniapp - 黑马优购 | 购物车页面(1)】如何创建购物车编译模式、 商品列表区域实现
小新的博客
01-11 1576
🌴9. 购物车页面 🌳9.0 创建购物车页面的编译模式 🌳9.1 商品列表区域 🌲9.1.1 渲染购物车商品列表的标题区域 🌲9.1.2 渲染商品列表区域的基本结构 🌲9.1.3 为 my-goods 组件封装 radio 勾选状态 🌲9.1.4 为 my-goods 组件封装 radio-change 事件 🌲9.1.5 修改购物车中商品的勾选状态 🌲9.1.6 为 my-goods 组件封装 NumberBox 🌲9.1.7 为 my-goods 组件封装 num-change 事件
附录6-1 黑马优购项目-组件与过滤器
potato123232的博客
05-01 470
js中干了两件事，一个是通过properties收数据，另一个是通过方法向上传数据，这里的e.target.dataset不可省略，因为要向上传递goods_id。在这里给所有的元素都给上了data-goods_id是怕goods_id传不出去，怀疑是和事件冒泡有关，应该有更简便的写法，如果不想思考就给每个元素都加上。e.target.dataset是传递参数，我们在组件中没写参数，也不需要传递参数，所以可以删掉。数量框就是这个，该项目中只有购物车中用到了数量框，所以实际这个没必要封装。
附录6-5 黑马优购项目-我的与后端本地化
potato123232的博客
05-02 462
目前微信小程序和微信用户的信息是脱钩的（之前的wx.getUserProfile与wx.getUserInfo都不能正常使用了），你看一下其他的小程序也会发现这个问题，微信的昵称不会出现在小程序中了。目前一键登录一般是用服务商提供的本机一键登录功能，有特定的API。其中未登录页面中只有一键登录有用，其他都是写死的，一键登录的功能仅仅是切换到登录的页面。网上的接口可能会挂掉，搞一个本地方便看小程序的样式，我用的是django做后端框架。还有下面两种登录方式。这个页面中除了退出登录按钮，其他所有都是写死的。
附录6-2 黑马优购项目-分包(子页面)
potato123232的博客
05-02 717
首先整你此次要预览的所有图像，也就是轮播图中的所有图像，搞一个列表。我在getGoodsList中有定义，如果isTop为true就将新得到的数据放在列表的头部，如果isTop为false就将新得到的数据放在列表的尾部。goods_detail分为三个区域，从上到下依次是 轮播图区域，商品信息区域，富文本区域(富文本也是描述商品信息的，格式为html)，尾部区域。上拉触底是默认生效的，所以我们不需要进行额外的配置，只需要在goods_list.js中定义上拉触底的方法就可以了。携带参数为goods_id。
附录6-4 黑马优购项目-分类和购物车
potato123232的博客
05-02 939
限制高度的值根据机型进行调节，wx.getWindowInfo()可以获得当前机型的高度，减50是减去屏幕最下方的tarbar高度。目前小程序结算功能是不开放给个人开发者的，如果要开通的话只有一个公司的营业执照也是不行的，需要有实际的开发需求才能用微信支付的接口。这个变量是给"我的"中的一键登录按钮用的，直接点一键登录按钮就不需要跳转，从购物车界面过来再点一键登录按钮就需要跳转。每一次点击左侧的时候，右侧的内容是不同的，但实际上元素都是一个。紫色框子是一级标题，橙色框子是二级标题，绿色框子是三级标题。
26.品优购首页
potato123232的博客
03-31 436
主页在一个项目中我们一般命名index.html 我们在 品优购首页.html 中链接初始化css 实际项目中最好不要使用中文作为文件名称，这里为了好理解我就使用中文了 首页一般命名为 index.html，初始化css一般命名为 base.css ，其余公用css一般命名为 common.css 目录 1头部 1.1代码部分 1.2要注意的问题 1.2.1版心问题 1.2.2命名问题 1.2.3竖线 2搜索部分 2.1代码部分 2.2要注意的......
uni-app黑马优购
06-17
【uni-app黑马优购】项目详解 uni-app是一款由DCloud(数字天堂)开发的多端统一开发框架，它允许开发者使用一套代码实现跨平台应用的开发，包括iOS、Android、Web（H5）、微信小程序、支付宝小程序、百度小程序、QQ...
uni-app黑马优购项目笔记（上）
04-02
uni-app黑马优购项目笔记（上）
02-微信小程序项目(黑马优购).zip
06-24
【标题】"02-微信小程序项目(黑马优购)"是一个关于微信小程序开发的实践项目，由知名教育机构“黑马”提供。这个项目主要是为了帮助学习者深入理解微信小程序的开发流程，掌握前端技术在微信小程序中的应用。 ...
黑马-前端-品优购项目-静态页面搭建
03-18
在本项目中，“黑马-前端-品优购项目-静态页面搭建”，我们主要关注的是使用HTML和CSS技术来构建一个电商网站的静态首页。这个任务是前端开发的基础，旨在通过实践提升开发者对网页布局和样式设计的理解。接下来，...
项目二 品优购第一天
weixin_34409741的博客
07-17 422
品优购电商系统开发 第1章 分布式框架-Dubbox 传智播客.黑马程序员 1.走进电商 1.1电商行业分析 近年来，中国的电子商务快速发展，交易额连创新高，电子商务在各领域的应用不断拓展和深化、相关服务业蓬勃发展、支撑体系不断健全完善、创新的动力和能力 不断增强。电子商务正在与实体经济深度融合，...
【微信小程序实战教程】之微信小程序原生开发详解
柯晓楠
07-24 1533
在实际的项目开发中，小程序的内置组件不一定能满足所有的需求，为了实现更高效的代码复用，小程序还允许开发者自行扩充组件，这些由开发者自行设计的组件被称为自定义组件。在小程序中，每个组件都具有独立的逻辑空间，分别拥有自己的独立数据和setData方法调用。在使用自定义组件的小程序页面中，Exparser框架将接管所有的自定义组件注册和实例化。小程序的基础库中提供了Page和Component两个构造器，自定义组件使用的是Component构造器。
微信小程序之计算器
最新发布
ch_s_t的专栏
07-25 1416
data-*是微信小程序的自定义属性，由data-前缀加上自定义的属性名，自定义属性值表示要传递的数据 ，在事件处理函数中通过targert或currentTarget对象的datasett属性获取数据。
黑马uniapp小兔鲜儿项目
09-15
黑马uniapp小兔鲜儿项目是一个基于uni-app框架开发的网站项目。根据引用的描述，该项目是在学习黑马程序员前端视频时基于小兔鲜儿网站进行改进的，增加了一些功能和页面。通过引用中的说明，你可以使用pnpm install命令安装项目依赖，然后使用pnpm dev:mp-weixin命令将项目编译成微信小程序，并导入微信开发者工具进行预览和调试。如果你想使用Vue 3和TypeScript版本进行开发，你可以使用引用中的命令创建一个基于Vue 3和TypeScript的uni-app项目。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

Suyuoa

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

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

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

打赏作者

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

抵扣说明：

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

余额充值