前端结构和首页布局构建

1.页面路由划分

需求分析：小程序门户至少需要三个页面，首页显示出售商品，一个用户信息页面，一个购物车页面。

需求实现：home、my、car

进入pages 文件夹下，对上述页面进行拆分。

pages >
 car >
  car.vue
 home >
  home.vue
 my   >
  my.vue

参考文档配置pages.json

{
  "pages": [{
  "path": "pages/home/home",
  "style": {
   "navigationBarTitleText": "强哥菜市场"
  }
 },
 {
  "path": "pages/car/car",
  "style": {
   "navigationBarTitleText": "购物车"
  }
 },
 {
  "path": "pages/my/my",
  "style": {
   "navigationBarTitleText": "个人中心"
  }
 }
 ],
}

重新编译运行，查看页面Title是否切换到 "强哥菜市场"

2.创建tabBar跳转页面

需求同上，需要实现3个按钮进行页面切换。使用tabBar进行控制。

字段分析：

字段名字段信息color默认颜色selectedColor选中颜色list按钮列表pagePath跳转地址text按钮文本iconPath默认图标地址selectedIconPath选中图标地址

./pages.json

{
  "tabBar": {
  "color": "#8e8e8e", // 默认颜色
  "selectedColor": "#1296db",// 选中颜色
  "list": [
   {
    "pagePath": "pages/home/home",
    "text": "主页",
    "iconPath": "static/home.png",
    "selectedIconPath": "static/select_home.png"
   },
   {
    "pagePath": "pages/car/car",
    "text": "购物车",
    "iconPath": "static/home.png",
    "selectedIconPath": "static/select_home.png"
   },
   {
    "pagePath": "pages/my/my",
    "text": "我的",
    "iconPath": "static/home.png",
    "selectedIconPath": "static/select_home.png"
   }
  ]
 }
}

重新编译运行，查看跳转按钮是否正常

3.首页布局构建

首页布局构建主要知识点学习：块元素样式控制、组件库快速使用根据需求进行调整。

🐻-学习组件：card 卡片 section 标题栏 grid 宫格

🐻-学习Vue3 语法糖 setup

./pages/home/home.vue

首要调整

<script setup>

</script>

<style lang="scss">

</style>

3.1 轮播图展示区

需求：轮播图为首页顶部，且为了美观，不能完全铺满。轮播图替换有动画效果。

<view class="home">
    <view class="uni-margin-wrap">
      <swiper class="swiper" circular :indicator-dots="swiperOption.indicatorDots" :autoplay="swiperOption.autoplay" :interval="swiperOption.interval"
        :duration="swiperOption.duration">
        <swiper-item>
          <view class="swiper-item uni-bg-red">A</view>
        </swiper-item>
        <swiper-item>
          <view class="swiper-item uni-bg-green">B</view>
        </swiper-item>
        <swiper-item>
          <view class="swiper-item uni-bg-blue">C</view>
        </swiper-item>
      </swiper>
    </view>
</view>

<script setup>
import { reactive } from "vue";
 const swiperOption = reactive({
  indicatorDots:false, // 不显示指示点
  autoplay:true,   // 自动播放
  interval:2000,   // 自动切换时间
  duration:500,   // 动画时长
 })
</script>

<style lang="scss">
.uni-margin-wrap{
  padding: 8upx;
  .swiper{
   border-radius: 8upx; // 圆角边框
   overflow: hidden;  // 移除隐藏
   .swiper-item{ // 完全填充块
    width: 100%; 
    height: 100%;
   }
   .uni-bg-red{ // 背景色，方便调试
    background: red;
   }
   .uni-bg-green{
    background: green; 
   }
   .uni-bg-blue{
    background: blue; 
   }
  }
 }
</style>

3.2 商品分类区

4个商品大分类，位于轮播图下方。

<view class="fish-grid">
  <uni-grid :column="4" :showBorder="false">
    <uni-grid-item>
      <view class="grid-box">鱼</view>
    </uni-grid-item>
    <uni-grid-item>
      <view class="grid-box">肉</view>
    </uni-grid-item>
    <uni-grid-item>
      <view class="grid-box">蔬</view>
    </uni-grid-item>
    <uni-grid-item>
      <view class="grid-box">蛋</view>
    </uni-grid-item>
  </uni-grid>
</view>

<style lang="scss">
  .fish-grid{
    margin-top: 12upx;
    .grid-box{
      display: flex;
      width: 100%;
      height: 100%;
      align-items: center;
      justify-content: center;
   }
 }
</style>

3.3 商品简介列表区

🐻-主要学习flex布局使用与控制。

<uni-section title="为你推荐" type="line" padding="">
  <view class="fish-card">
    <view class="fish-card-left">

    </view>
    <view class="fish-card-right">
      <view class="top">
        <text class="title">强哥鱼档</text>
        <text class="integral">5.0</text>
      </view>
      <view class="middle">
        <view class="">
          <text>最低销价20$</text>
        </view>
        <view class="">
          <text>月售600</text>
          <text>人均20￥</text>
        </view>
      </view>
      <view class="bottom">
        <uni-tag text="内有躺椅" type="warning" :inverted="true"></uni-tag>
      </view>
    </view>
  </view>
</uni-section>

<style lang="scss">
 .fish-card{
  display: flex; // 弹性布局，主布局方式
  gap: 20upx;
  height: 240upx;
  padding: 20upx;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 8upx;
  &-left{   // 块左侧划分 图片展示预留位置
   width: 200upx;
   height: 200upx;
   background: red;
   border-radius: 8upx;
  }
  &-right{  // 块右侧划分 -上中下三层划分
   flex:1;
   .top{  // 上侧商品标题 和 评分
    .title{
     font-weight: 600;
    }
    .integral{
     color: #8e8e8e;
     font-size: 12px;
     margin-left: 20upx;
    }
   }
   .middle{ // 中间 售价 销售量 范围价展示
    margin-top: 30upx;
    display: flex;
    justify-content: space-between;
    color: #8e8e8e;
    font-size: 12px;
    text+text{
     margin-left: 20upx;
    }
   }
   .bottom{ // 底栏 商品Tag块
    margin-top: 32upx;
   }
  }
 }

</style>

总结

本节课主要学习知识点：

组件布局：tabBar |pages.json配置|swiper 基础轮播图|Grid 宫格 section 标题栏

Vue3：setup

样式布局：scss 、 flex 布局控制

相关阅读

vue3

vue3新语法糖——setup script - 掘金 (juejin.cn)

scss

Sass教程 Sass中文文档 | Sass中文网

Uni-app

pages.json页面路由

uni-card 卡片组件

uni-section 标题栏

Github

piexlmax/fish: 旧厂街卖鱼系统 (github.com)