一、选择实战项目

最好的学习一定是实战，从实战才能了解到自己的短板

1. 可以从即时设计中选择自己心仪的项目

推荐 js.design/Z8AOQj 不复杂的项目，首页来看很简单

二、分析项目

1. 小程序背景颜色 #F8F8F8
2. 主题颜色为 #9A9390
3. 主要字体颜色为 #4A4543
4. 主要字体反色 #fff
5. 字体辅助色 #ADADAD
6. 按钮圆角 62rpx

三、修改 uni.scss 文件

官网介绍：uni.scss是一个特殊文件，在代码中无需 import 这个文件即可在scss代码中使用这里的样式变量。uni-app的编译器在webpack配置中特殊处理了这个uni.scss，使得每个scss文件都被注入这个uni.scss，达到全局可用的效果。

只需要保留以下几个变量即可

/* 行为相关颜色 */
$uni-color-primary: #9A9390;
$uni-color-success: #4cd964;
$uni-color-warning: #f0ad4e;
$uni-color-error: #dd524d;

/* 文字基本颜色 */
$uni-text-color: #4A4543; // 基本色
$uni-text-color-inverse: #fff; // 反色
$uni-text-color-grey: #ADADAD; // 辅助灰色，如加载更多的提示信息
$uni-text-color-placeholder: #808080;
$uni-text-color-disable: #c0c0c0;

/* 背景颜色 */
$uni-bg-color: #f8f8f8;
$uni-bg-color-grey: #f8f8f8;
$uni-bg-color-hover: #f1f1f1; // 点击状态颜色
$uni-bg-color-mask: rgba(0, 0, 0, 0.4); // 遮罩颜色

四、创建通用组件Layout控制页面背景颜色

src -> components -> layout

<template>
  <view class="page-container">
    <slot></slot>
  </view>
</template>

<style lang="scss" scoped>

.page-container {
  height: 100vh;
  overflow: hidden;
  background-color: $uni-bg-color;
}
</style>

• $uni-bg-color uni-app 会帮助我们自动注入，但是修改之后需要重启项目才能重新生效

五、在index.vue中使用一下通用页面

<template>
  <Layout>
    <uni-section title="实心标签" type="line" padding>
      <view class="example-body center">
        <view class="tag-view m-20">
          <uni-tag text="标签" type="primary"/>
        </view>
      </view>
    </uni-section>
  </Layout>
</template>

<script lang="ts" setup>
import Layout from '../../components/layout/layout.vue'
</script>

• 可以看到背景色部分已经变了

六、导入组件使用别名

在上面代码中我们导入Layout组件可以看到使用了 相对路径去查找，这样看上去比较不输入，可以通过修改vite.config.ts配置来修改一下

import {defineConfig} from "vite";
import uni from "@dcloudio/vite-plugin-uni";
import UnoCSS from 'unocss/vite'
import {resolve} from 'path'

export default defineConfig({
    plugins: [uni(), UnoCSS()],
    resolve: {
        alias: {
            '@': resolve('./src'),
        },
        extensions: ['.js', '.json', '.ts', '.vue'], // 省略的后缀名
    },
});

import Layout from '@/components/layout/layout'

七、创建通用组件tabBar

在uni中是有系统组件tabBar的，可是过于单调，我们就自己实现一个

1. 创建tabBar目录与文件

2. 分析结构从图中可看出

1. 使用了fixed 定位
2. 距离底部有安全距离
3. 有icon突出

3. 代码实现

1. 固定到底部

box-shadow 参考：getcssscan.com/css-box-sha…

<view class="tabbar-body">
</view>

.tabbar-body {
  border-radius: 80rpx;
  display: flex;
  background: white;
  position: fixed;
  bottom: 50rpx;
  width: 95%;
  left: 50%;
  transform: translateX(-50%);
  padding: 20rpx 0;
  box-shadow: rgba(0, 0, 0, 0.15) 2.4px 2.4px 3.2px;
}

2. 添加主要内容与安全距离

安全距离可以使用 uni内置的API uni.getSystemInfoSync()

<view class="tabbar-body flex flex-col">
  <view class="flex">
    <view class="tabbar-item">
      <view class="tabbar-item-body">
        <view class="tabbar-item-icon">
          <uni-icons type="home"/>
        </view>
        <view class="bar-text">首页</view>
      </view>
      <view class="tabbar-item-body">
        <view class="tabbar-item-icon">
          <uni-icons type="scan"/>
        </view>
        <view class="tab-bar-text">扫一扫</view>
      </view>
      <view class="tabbar-item-body">
        <view class="tabbar-item-icon">
          <uni-icons type="person"/>
        </view>
        <view class="tab-bar-text">我的</view>
      </view>
    </view>
  </view>
  <view :style="`height: ${safeAreaInsets?.bottom}rpx`"></view>
</view>

3. 添加样式 突出中间icon，并且底部对齐，内容填充均匀

.tabbar-body {
  border-radius: 80rpx;
  display: flex;
  background: white;
  position: fixed;
  bottom: 50rpx;
  width: 95%;
  left: 50%;
  transform: translateX(-50%);
  padding: 20rpx 0;
  box-shadow: rgba(0, 0, 0, 0.15) 2.4px 2.4px 3.2px;
}

.tabbar-body_bottom {
  display: flex;
  padding: 20rpx 0;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #fff;
  border-top: 1px solid #f8f8f8;
}

.tabbar-item {
  flex: 1;
  display: flex;
  justify-content: space-evenly;
  text-align: center;
  align-items: flex-end;

  .tabbar-item-body {
    &.float {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;

      .tabbar-item-icon {
        width: 146rpx;
        height: 146rpx;
        border-radius: 50px;
        background-color: $uni-color-primary;
        display: flex;
        align-items: center;
        border: 14rpx solid white;
        margin-top: -50%;
      }
    }
  }

  .tabbar-item-icon {
    display: flex;
    justify-content: center;
  }

  .tab-bar-text {
    font-size: 28rpx;
    margin-top: 8rpx;
  }
}