【19】黑马优购商城：01-项目介绍、初始化项目、首页、优化、分类页面、interceptor 拦截器、搜索、商品列表、商品详情、加入购物车、购物车、确认订单、订单支付、订单列表、发布小程序

最新推荐文章于 2024-02-04 23:33:26 发布
原创 最新推荐文章于 2024-02-04 23:33:26 发布 · 8.8k 阅读 · 83
标签
#前端 #微信小程序
本文档详细介绍了如何从零开始构建一个名为“黑马优购”的小程序项目，涵盖项目初始化、页面设计、前后端交互等核心内容。通过实战演练，读者可以深入理解小程序的开发流程和技术要点。

文章目录

黑马优购

1. 项目介绍

首页、分类、搜索、商品列表、商品详情、购物车、支付

2. 初始化项目

2.1 初始化项目

  1. 运行 wepy init standard heima_ugo 命令，初始化小程序项目
  2. 运行 cd heima_ugo 进入项目根目录
  3. 运行 npm install 安装所有依赖项
  4. 运行 wepy build --watch 命令，开启 wepy 项目的实时编译功能
  5. 打开微信开发者工具，加载 wepy 项目并查看效果
  6. 解决 ESLint 语法报错问题

2.2 梳理项目结构

  1. 清理并重置 src -> pages -> index.wpy 首页
  2. 在根目录的 .prettierrc 配置文件内，新增 "semi": false 配置，防止每次格式化代码，添加分号的问题
  3. 清理并重置 src -> app.wpy 中的代码，将 style 和 script 标签中，不必要的代码删除掉
  4. 清空 src -> components 和 src -> mixins 目录
  5. 将梳理完毕后的项目，上传至码云

2.3 绘制 tabBar

  1. 新建 src -> pages -> tabs 文件夹，用来存放所有 tabBar 相关的页面

  2. 删除 src -> pages -> index.wpy 页面，并在 tabs 目录中，新建 home.wpy，cates.wpy，search.wpy，cart.wpy，me.wpy 五个 tabBar 相关的页面

  3. 将页面路径，记录到 src -> app.wpy 文件的 config -> pages 节点中，示例代码如下：

    pages: [
  'pages/tabs/home',
  'pages/tabs/cates',
  'pages/tabs/search',
  'pages/tabs/cart',
  'pages/tabs/me'
]

  4. 新建 src -> assets 目录，并将素材中的 icons 文件夹，拷贝到项目 src -> assets 目录中

  5. 在 src -> app.wpy 文件中，新增 tabBar 节点，并做如下配置：

    tabBar: {
     
     
  // 选中的文本颜色
  selectedColor: '#D81E06',
  // tabBar 的列表
  list: [
    {
     
     
      // 页面路径
      pagePath: 'pages/tabs/home',
      // 显示的文本
      text: '首页',
      // 默认图标
      iconPath: '/assets/icons/home.png',
      // 选中图标
      selectedIconPath: '/assets/icons/home-active.png'
    },
    {
     
     
      pagePath: 'pages/tabs/cates',
      text: '分类',
      iconPath: '/assets/icons/cates.png',
      selectedIconPath: '/assets/icons/cates-active.png'
    },
    {
     
     
      pagePath: 'pages/tabs/search',
      text: '搜索',
      iconPath: '/assets/icons/search.png',
      selectedIconPath: '/assets/icons/search-active.png'
    },
    {
     
     
      pagePath: 'pages/tabs/cart',
      text: '购物车',
      iconPath: '/assets/icons/cart.png',
      selectedIconPath: '/assets/icons/cart-active.png'
    },
    {
     
     
      pagePath: 'pages/tabs/me',
      text: '我的',
      iconPath: '/assets/icons/my.png',
      selectedIconPath: '/assets/icons/my-active.png'
    }
  ]
}

2.4 修改导航栏样式

打开 src -> app.wpy 文件，找到 window 节点，并配置如下：

window: {
   
   
  // 页面背景色
  backgroundTextStyle: 'dark',
  // 导航条背景色
  navigationBarBackgroundColor: '#D81E06',
  // 导航条标题文本
  navigationBarTitleText: '黑马优购',
  // 导航条标题文字颜色
  navigationBarTextStyle: 'white'
}

3. 首页

3.1 为异步 API 启用 Promise 功能

  1. 打开 src -> app.wpy 文件

  2. 找到 constructor() 构造函数

  3. 在构造函数的最后，新增如下代码：

    constructor() {
     
     
    super()
    this.use('requestfix')
    // 通过下面这一行代码，可以为异步的API，
    // 开启Promise功能，这样，异步API调用的结果，返回值是Promise对象
    this.use('promisify')
}

3.2 轮播图数据渲染

  1. 获取轮播图数据

      // 获取轮播图数据的函数
async getSwiperData() {
     
     
    const {
     
      data: res } = await wepy.get('/home/swiperdata')

    if (res.meta.status !== 200) {
     
     
      return wepy.baseToast()
    }

    this.swiperList = res.message
    this.$apply()
}

  2. 使用 wepy.showToast() 弹框提示

  3. 使用 swiper 组件和 swiper-item 组件渲染轮播图效果

  4. 使用 navigator 组件将 images 图片包裹起来，从而点击图片实现跳转

    <!-- 轮播图区域 -->
<swiper circular indicator-dots>
  <swiper-item wx:for="{
      
      {swiperList}}" wx:key="index">
    <navigator url="{
      
      {item.navigator_url}}" open-type="{
      
      {item.open_type}}">
      <image src="{
      
      {item.image_src}}" />
    </navigator>
  </swiper-item>
</swiper>

  5. 设置 swiper 组件的高度为 350rpx 从而实现轮播图在不同屏幕的自适应

    swiper {
  height: 350rpx;
  navigator,
  image {
    height: 100%;
    width: 750rpx;
  }
}

3.3 获取首页分类选项数据

  // 获取首页分类相关的数据项
async getCateItems() {
   
   
    const {
   
    data: res } = await wepy.get('/home/catitems')

    if (res.meta.status !== 200) {
   
   
      return wepy.baseToast()
    }

    this.cateItems = res.message
    this.$apply()
}

3.4 渲染分类数据项对应的UI结构

<!-- 分类区域 -->
<view class="cates">
  <block wx:for="{
    
    {cateItems}}" wx:key="index">
    <navigator url="/pages/tabs/cates" open-type="{
    
    {item.open_type}}" wx:if="{
    
    {item.navigator_url !== undefined}}" hover-class="none">
      <image src="{
    
    {item.image_src}}" />
    </navigator> 

    <image src="{
    
    {item.image_src}}" wx:else/>
  </block>
</view>

3.5 美化分类数据项的UI显示效果

.cates {
  display: flex;
  justify-content: space-around;
  margin: 40rpx 0;
  image {
    width: 128rpx;
    height: 140rpx;
  }
}

3.6 获取楼层相关的数据

onLoad() {
   
   
    this.getSwiperData()
    this.getCateItems()
    // 在页面加载完成后，自动获取楼层数据
    this.getFloorData()
}

// 获取楼层相关的数据
async getFloorData() {
   
   
    const {
   
    data: res } = await wepy.get('/home/floordata')

    if (res.meta.status !== 200) {
   
   
      return wepy.baseToast()
    }

    this.floorData = res.message
    // 通知页面，data中数据发生了变化，需要强制页面重新渲染一次
    this.$apply()
}

3.7 渲染楼层UI结构

<!-- 楼层区域 -->
<view class="floor-container">
  <view class="floor-item" wx:for="{
    
    {floorData}}" wx:key="index">
    <!-- 楼层的标题 -->
    <image class="floor-item-title" src="{
    
    {item.floor_title.image_src}}"/>
    <!-- 楼层的图片 -->
    <view class="floor-img-box">
      <image class="floor-item-pic" wx:for="{
    
    {item.product_list}}" wx:key="index" src="{
    
    {item.image_src}}" style="width: {
      
      {
      
      item.image_width}}rpx;" @tap="goGoodsList({
    
    {item.navigator_url}})"/>
    </view>
  </view>
</view>

3.8 美化楼层UI结构

.floor-container {
  .floor-item {
    .floor-item-title {
      height: 50rpx;
      width: 640rpx;
      display: block;
    }
    .floor-img-box {
      .floor-item-pic {
        float: left;
        height: 190rpx;
        margin: 8rpx;
        margin-top: 0;
        &:nth-child(1) {
          height: 390rpx;
        }
      }
    }
  }
}

3.9 点击楼层图片跳转到商品列表页面

methods = {
   
   
    // 点击楼层中的每一张图片，都要跳转到商品列表页面
    goGoodsList(url) {
   
   
      wepy.navigateTo({
   
   
        url
      })
    }
}

4. 优化

4.1 把页面的业务逻辑抽离到单独的 mixin 文件中

为了精简每个小程序页面的代码，可以将 script 中的业务逻辑，抽离到对应的 mixin 文件中，具体步骤：

  1. 在 src -> mixins 文件夹中，新建与页面路径对应的 .js 文件，并初始化基本的代码结构如下：

    import wepy from 'wepy'

// 注意，必须继承自 wepy.mixin
export default class extends wepy.mixin {
     
     }

  2. 在对应的页面中，可以导入并使用对应的 mixin，具体代码如下：

    <script>
import wepy from 'wepy'
// 1. 导入外界的 mixin 文件，并接受
// @ 就代表 src 这一层路径
import mix from '@/mixins/tabs/home.js'

export default class extends wepy.page {
     
     
  // 2. 把导入的 mix 对象，挂载到 mixins 这个数据中就行
  mixins = [mix]
}
</script>

4.2 封装 baseToast 函数提示错误消息

  1. 为了提高项目的维护性、可用性、扩展性，可以将常用的 js 逻辑，封装到 src -> baseAPI.js 文件中：

    import wepy from 'wepy'

/**
 * 弹框提示一个无图标的 Toast 消息
 * @str 要提示的消息内容
 */
wepy.baseToast = function(str = '获取数据失败！') {
     
     
  wepy.showToast({
     
     
    title: str,
    // 弹框期间不会携带任何图标
    icon: 'none',
    duration: 1500
  })
}

  2. 在 app.wpy 中导入执行 baseAPI.js 文件中的代码：

    <script>
    import wepy from 'wepy'
    import 'wepy-async-function'
    // 导入并执行 baseAPI.js 中的所有代码
    import '@/baseAPI.js'
</script>

4.3 封装 wepy.get 函数发起get请求

在小程序项目中，需要经常发起数据请求，因此，可以将 wepy.request() 函数封装，在全局挂在 wepy.get() 函数，从而发起 Get 请求，代码如下：

// src/baseAPI.js

import wepy from 'wepy'

// 请求根路径
const baseURL = 'https://www.zhengzhicheng.cn/api/public/v1'

/**
 * 发起 get 请求的 API
 * @url 请求的地址，为相对路径，必须以 / 开头
 * @data 请求的参数对象
 */
wepy.get = function(url, data = {
   
   }) {
   
   
  return wepy.request({
   
   
    url: baseURL + url,
    method: 'GET',
    data
  })
}

4.4 封装 wepy.post 函数发起get请求

在小程序项目中，需要经常发起数据请求，因此，可以将 wepy.request() 函数封装，在全局挂在 wepy.post() 函数，从而发起 Post 请求，代码如下：

// src/baseAPI.js

import wepy from 'wepy'

// 请求根路径
const baseURL = 'https://www.zhengzhicheng.cn/api/public/v1'

/**
 * 发起 post 请求的 API
 * @url 请求的地址，为相对路径，必须以 / 开头
 * @data 请求的参数对象
 */
wepy.post = function (url, data = {
   
   }) {
   
     
  return wepy.request({
   
   
    url: baseURL + url,
    method: 'POST',
    data
  })
}

5. 分类页面

5.1 自定义分类页面的编译模式

  1. 点击工具栏中，编译模式的下拉菜单，选择新建编译模式
  2. 填写编译模式的名称
  3. 选择启动页面的路径
  4. 确认添加

5.2 获取分类数据列表

async getCateList() {
   
   
    const {
   
    data: res } = await wepy.get('/categories')

    if (res.meta.status !== 200) {
   
   
      return wepy.baseToast()
    }

    this.cateList = res.message
    this.secondCate = res.message[0].children
    this.$apply()
}

5.3 下载并安装 vant 小程序UI组件库

  1. 访问 vant-weapp 的 Github 主页 https://github.com/youzan/vant-weapp
  2. 点击 Clone or Download 按钮
  3. 选择 Download ZIP
  4. 解压下载的 vant-weapp-dev.zip
  5. 进入解压后的目录，将 lib 目录重命名为 vant
  6. 把重命名为 vant 的目录，复制到 src -> assets 目录中

5.4 将 vant 中的徽章组件注册为全局组件

  1. 打开 app.wpy 文件

  2. 在 config 节点内，新增 usingComponents 节点，具体代码如下：

    config = {
     
     
    // 引用并注册全局组件
    usingComponents: {
     
     
      // 徽章组件
      'van-badge': './assets/vant/badge/index',
      'van-badge-group': './assets/vant/badge-group/index'
    }
}

5.5 渲染左侧的一级分类列表结构

<van-badge-group active="{
    
    { active }}" bind:change="onChange">
    <van-badge title="{
    
    {item.cat_name}}" wx:for="{
    
    {cateList}}" wx:key="index" />
</van-badge-group>

5.6 使用 scroll-view 优化左侧分类的滚动效果

<!-- 左侧的滚动视图区域 -->
<scroll-view class="left" scroll-y style="height: 200px;">
  <van-badge-group active="{
    
    { active }}" bind:change="onChange">
    <van-badge title="{
    
    {item.cat_name}}" wx:for="{
    
    {cateList}}" wx:key="index" />
  </van-badge-group>
</scroll-view>

5.7 动态获取窗口的可用高度

onLoad() {
   
   
    // 动态获取屏幕可用的高度
    this.getWindowHeight()
    this.getCateList()
}
  
    // 动态获取屏幕可用的高度
async getWindowHeight() {
   
   
    const res = await wepy.getSystemInfo()
    if (res.errMsg === 'getSystemInfo:ok') {
   
   
      this.wh = res.windowHeight
      this.$apply()
    }
}

5.8 根据一级分类的变化动态切换二级分类数据

  methods = {
   
   
    onChange(e) {
   
   
      // e.detail 是点击项的索引
      // console.log(e.detail)
      this.secondCate = this.cateList[e.detail].children
    }
  }

5.9 渲染二级和三级分类的UI结构

<!-- 右侧滚动视图区域 -->
<scroll-view class="right" scroll-y style="height: {
      
      {
      
      wh}}px;">
  <!-- 循环创建二级分类 -->
  <block wx:for="{
    
    {secondCate}}" wx:key="index">
    <van-row>
      <van-col span="24" style="text-align:center;">
        <text class="cate_title" space="ensp">/  {
  
  {item.cat_name}}  /</text>
      </van-col>
    </van-row>
    <!-- 三级分类 -->
    <van-row>
      <block wx:for="{
    
    {item.children}}" wx:key="index">
        <van-col span="8" class="cell" @tap="goGoodsList({
    
    {item.cat_id}})">
          <image src="{
    
    {item.cat_icon}}" class="thumbImg" />
          <view class="thumbTitle">{
  
  {item.cat_name}}</view>
        </van-col>
      </block>
    </van-row>
  </block>
</scroll-view>

5.10 点击三级分类跳转到商品列表页面

  methods = {
   
   
    // 点击跳转到商品列表页面，同时把商品分类的 cid 传递过去
    goGoodsList(cid) {
   
   
      wepy.navigateTo({
   
   
        url: '/pages/goods_list?cid=' + cid
      })
    }
  }

6. interceptor 拦截器

6.1 介绍 wepy 中的拦截器

可以使用WePY提供的全局拦截器对原生API的请求进行拦截。

具体方法是配置API的config、fail、success、complete回调函数。参考示例：

import wepy from 'wepy';

export default class extends wepy.app {
   
   
    constructor () {
   
   
        // this is not allowed before super()
        super();
        // 拦截request请求
        this.intercept('request', {
   
   
            // 发出请求时的回调函数
            config (p) {
   
   
                // 对所有request请求中的OBJECT参数对象统一附加时间戳属性
                p.timestamp = +new Date();
                console.log('config request: ', p);
                // 必须返回OBJECT参数对象，否则无法发送请求到服务端
                return p;
            },

            // 请求成功后的回调函数
            success (p) {
   
   
                // 可以在这里对收到的响应数据对象进行加工处理
                console.log('request success: ', p);
                // 必须返回响应数据对象，否则后续无法对响应数据进行处理
                return p;
            },

            //请求失败后的回调函数
            fail (p) {
   
   
                console.log('request fail: ', p);
                // 必须返回响应数据对象，否则后续无法对响应数据进行处理
                return p;
            },

            // 请求完成时的回调函数(请求成功或失败都会被执行)
            complete (p) {
   
   
                console.log('request complete: ', p);
            }
        });
    }
}

6.2 实现数据加载期间的loading效果

打开 app.wpy，在 constructor() 构造函数中，通过拦截器实现loading效果，具体代码如下：

constructor() {
   
   
    super()
    this.use('requestfix')
    // 通过这一行代码，可以为异步的API，开启Promise功能，这样，异步API调用的结果，返回值是Promise对象
    this.use('promisify')

    // 拦截器
    this.intercept('request', {
   
   
      // 发出请求时的回调函数
      config(p) {
   
   
        // 显示loading效果
        wepy.showLoading({
   
   
          title: '数据加载中...'
        })
        // 必须返回OBJECT参数对象，否则无法发送请求到服务端
        return p
      },

      // 请求成功后的回调函数
      success(p) {
   
   
        // 必须返回响应数据对象，否则后续无法对响应数据进行处理
        return p
      },

      // 请求失败后的回调函数
      fail(p) {
   
   
        // 必须返回响应数据对象，否则后续无法对响应数据进行处理
        return p
      },

      // 请求完成时的回调函数(请求成功或失败都会被执行)
      complete(p) {
   
   
        // 隐藏loading效果
        wepy.hideLoading()
最低0.47元/天 解锁文章
黑马优购微信小程序项目（学习自黑马程序员，代码纯属手工打造，在原有的基础上改造了一丢丢）
06-19
黑马优购微信小程序，一款微信小程序购物平台，前后端分离，这是前端资料
微信小程序黑马优购总结：
weixin_69844928的博客
05-27 3882
⾸先拿到项⽬后做好项⽬搭建 (1)搭建之前⾸先要分析整个项⽬的剧本组成是否有源码或者是效果图（⿊马优购有源码和效果图 和请求的接⼝⽂档） (2)在源码或者效果图上分析页⾯的组成以及效果的展⽰页⾯跳转等 (3)在以上准备⼯作完成之后就要利⽤微信开发者⼯具进⾏开发 1.⾸先打开项⽬⽂件找到app.json中创建该项⽬需要的⽂件 2.在app.json中配置底部导航实现底部基本页⾯的跳转 3.底部tabbar配好路由可以跳不同的页⾯ 4.接着就可以写⾸页的布局以及功能的实现（index页面首页） ...
黑马优购项目讲解
shiqianhui1124的博客
05-18 894
黑马优购项目讲解： 准备项目前期准备工作，把项目划分为四个主体部分：首页、分类、购物车以及我的页面。 1.准备工作： 封装公共组件及request请求： 1-1.公共组件的封装 在根目录下创建components文件，放置封装好的公共组件 1-2.接口api的请求和对使用promise对request的封装 ...
商城项目介绍
m0_73400863的博客
03-30 1776
好的项目在开发前必定做好需求分析，选用合适的框架，创建好各类的数据库以及库之间的关联；店铺管理，涉及多店铺商户，可以增删改店铺，设置营业状态及时间，批量或单独设置商铺的各类信息，如基本信息、商品管理、下单设置、优惠设置、活动设置、配送设置、自定义设置、接单设置、结算设置.......等；商品管理，增删改查商品，涉及商品库存、分类、规格、是否必选、上架下架、商品销量......等；系统设置，这是总体的系统的设置，只有该商铺管理员能进行操作，可修改整个系统的信息。可以浏览商品，选择自己喜欢的商品；
小程序黑马优购商城项目讲解
BBOY_airenC的博客
05-18 5045
小程序优购商城项目讲解 在我们开始之前 我们需要配好该项目所需要的接口文档以及配好相应的页面，以免在开发过程中会出现遗漏的问题出现。 首先我们要知道优购是分为4部分的 分别为首页/列表/购物车/我的。 要实现这四部分的切换的话，我们需要一个的TAB栏 想要实现这一功能我们需要在全局app.json中写入tabBar来实现： 代码如下： 就可以实现切换的效果拉 首页： 然后就要开始去写我们的页面拉 推荐先写首页拉 首先就是要封装头部组件...
s-shop项目——用Vant-ui实现商品列表的展示功能（移动端）
开某人的博客
10-12 2380
本文主要实现的是，商品的展示。包括默认展示，按价格，热门商品。且实现商品列表超过10个时实现点击加载更多，后新增十条数据。
黑马优购小程序项目详解
weixin_52044297的博客
05-18 2808
黑马优购小程序项目详解 1.准备工作 先把wx.request封装好。然后配置路由。把底部的导航配置出来。就是我们的首页、分类、购物车、还有我的，在全局的app.json中配置。 { "pages":[ "pages/home/home", "pages/search/search", "pages/my/my", "pages/list/list", "pages/index/index", "pages/logs/logs", "pages/g
uni-app黑马优购项目 学习笔记（下）
m0_66975650的博客
01-04 2292
uni-app黑马优购项目 学习笔记（下）
微信小程序（黑马优购项目）
iaz999的博客
04-21 3548
在项目根目录的components目录上，鼠标右键，选择新建组件，填写组件信息后，最后点击创建按钮：为了增强组件的通用性，我们允许使用者自定义搜索组件的背景颜色和圆角尺寸。通过props定义bgcolor和radius两个属性，并指定值类型和属性默认值：在my-search自定义组件内部，给类名为的view绑定click事件处理函数：在分类页面中使用my-search自定义组件时，即可通过@click为其绑定点击事件处理函数：在分包里创建search页面同时在分类页面中，定义。
Vue 实现商品分类、列表、详情、购物车、搜索（vant）
且看烟高云低处 远眸尽过满落辰
01-22 8137
商品分类Classify： <template> <div> <div style="display: flex;"> <div class="oneNav"> <!-- vant侧边导航 --> <van-sidebar style="height: 617px; white-space: nowrap; overflow-y: scroll;" v-model="activeKey">
黑马Vue2教程 - 智慧商城项目
海棠的博客
02-04 1824
黑马 智慧商城
【Vant相关知识】
居然天上楼的博客
12-23 3579
Vant是一个轻量，可靠的移动端组件库，2017开源目前 Vant 官方提供了 [Vue 2 版本](3 版本](https://vant-contrib.gitee.io/vant)和[微信小程序版本](http://vant-contrib.gitee.io/vant-weapp)，并由社区团队维护[React 版本](target=https%3A%2F%2Fgithub.com%2F3lang3%2Freact-vant)和[支付宝小程序版本](本文中我们使用Vue2版本对应的Vant学习。
vue+vant2完美实现香奈儿移动端商城网站
lucky_fang的博客
07-11 4914
点击预览点击访问vant是一个对于移动端开发非常友好和方便的前端框架，建议前端开发的同学可以去学习学习。关注作者，及时了解更多好项目！作者主页也有更多好项目分享！获取源码或如需帮助，可通过博客后面名片+作者即可！五、其他作品集合《vue+elementui实现联想购物商城，样式美观大方》《vue+elementui实现英雄联盟道具城》《vue+elementui实现app布局小米商城，样式美观大方，功能完整》《vue完美模拟pc版快手，实现短视频，含短视频详情播放》
uni-app黑马优购项目 学习笔记（上）
m0_66975650的博客
07-15 4134
HBuilderX，uni-app 黑马优购微信小程序项目的学习记录
黑马优购商城项目01
xumengxia的博客
08-13 627
1.
黑马小程序品优购商城项目分析
奥特蛋的博客
01-13 5457
项目页面的搭建 页面名称 文件 首页 index 分类 category 商品列表 goods_list 商品详情 goods_detail 购物车 cart 收藏 collect 订单 order 搜索 search 个人中心 user 意见反馈 user 登录 login 授权 auth 结算 pay -项目文件目录 首页 分类页面 点击左侧菜单切换内容的业务逻辑 获取被点击的标题身上的索引 给data中的currentI
黑马优购小程序知识点总结
all in AI
09-27 538
黒马优购小程序学习后知识点的总结
## 黑马优购商城
L_squan的博客
05-18 1083
黑马优购商城 首页 主要就是轮播组件和搜索组件剩下的就是布局 轮播我们可以用微信小程序的官方文档里swiper 布局重要的一点就是楼梯布局：先渲染外层 在在里面渲染向对应的children数据 还有就是跳转： wx.navigateTo （有返回键，不可以跳转到tabBar页面） switchTab （没有返回键，只能跳转到tabBar页面，不可以携带参数） 列表页 首先分为左右两部分渲染 最重要的是左右两部分都是有滚动轴的 各不影响 滚动轴两个关键点给父级1、 overflo
小程序基本命令
aiven1637的博客
10-30 3529
onLoad: function () { // 生命周期函数--监听页面加载 onReady: function () { // 生命周期函数--监听页面初次渲染完成 }, onShow: function () { // 生命周期函数--监听页面显示 }, onHide: function () { // 生命周期函数--监...
黑马优购商城首页的实现
mszLOVEyjj的博客
05-17 1270
文章目录1.1效果图1.2搜索框1.2.1新建组件1.2.2编写组件1.2.3引用组件1.2.4使用组件1.2.5效果1.3轮播图1.3.1获取网络接口1.3.1编写轮播图1.4 [Promise请求](https://blog.csdn.net/mszLOVEyjj/article/details/116767747)1.5分类导航1.51声明分类导航数组1.5.2 构建网络请求1.5.3分类导航编写1.5.41.6楼层1.6.1声明楼层数组1.6.2构建网络请求1.6.3编写楼层代码1.6.4效果图![
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值