uniapp 项目实践总结(三)全局公共组件和样式以及方法的使用

Mark in Jincheng

2023-08-30

uniapp

上一篇讲解了如何创建一个新的 uniapp 项目，这篇来讲解以下如何注册和使用全局的公共组件，全局样式和全局方法。

# 目录

目录结构
公共组件
公共样式
公共方法

# 目录结构

创建好项目以后，可以先初始化一下目录，下面是我自己的习惯。

┌─components
├─hybrid
│  ├─html
│  │   └─error.html
│  └─q-icon
│      └─q-icon.vue
├─pages
│  └─index
│      └─index.vue
├─static
│  ├─fonts
│  │   └─iconfont.css
│  └─image
│      └─logo.png
├─scripts
│   └─http.js
│   └─index.js
│   └─urls.js
│   └─utils.js
├─styles
│   └─extend.scss
│   └─global.scss
│   └─mixin.scss
│   └─reset.scss
│   └─variable.scss
├─App.vue
├─favicon.ico
├─index.html
├─main.js
├─manifest.json
├─pages.json
├─uni.promisify.adaptor.js
└─uni.scss

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

下面是官方给出的目录结构规范。

┌─uniCloud              云空间目录，阿里云为uniCloud-aliyun,腾讯云为uniCloud-tcb（详见uniCloud）
│─components            符合vue组件规范的uni-app组件目录
│  └─comp-a.vue         可复用的a组件
├─utssdk                存放uts文件
├─pages                 业务页面文件存放的目录
│  ├─index
│  │  └─index.vue       index页面
│  └─list
│     └─list.vue        list页面
├─static                存放应用引用的本地静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此
├─uni_modules           存放[uni_module](/uni_modules)。
├─platforms             存放各平台专用页面的目录，详见
├─nativeplugins         App原生语言插件 详见
├─nativeResources       App端原生资源目录
│  ├─android            Android原生资源目录 详见
|  └─ios                iOS原生资源目录 详见
├─hybrid                App端存放本地html文件的目录，详见
├─wxcomponents          存放小程序组件的目录，详见
├─unpackage             非工程代码，一般存放运行或发行的编译结果
├─AndroidManifest.xml   Android原生应用清单文件 详见
├─Info.plist            iOS原生应用配置文件 详见
├─main.js               Vue初始化入口文件
├─App.vue               应用配置，用来配置App全局样式以及监听 应用生命周期
├─manifest.json         配置应用名称、appid、logo、版本等打包信息，详见
├─pages.json            配置页面路由、导航条、选项卡等页面类信息，详见
└─uni.scss              这里是uni-app内置的常用样式变量

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

# 公共组件

下面开始公共组件的编写、注册和使用。

# 编写公共组件

在 uniapp 项目下是基于 vue 框架来写页面的，因此可以使用 vue 的相关知识点来新建公共组件。

在刚刚的目录结构下面，有一个components文件夹，里面就是存放相关的全局公共组件。

我们就以全局公共图标组件为例展示一下，可以采用{作者名称}-${组件名称}命名文件夹，{作者名称}-${组件名称}.vue来命名组件。

新建文件夹q-icon；
在q-icon文件夹下面新建q-icon.vue组件；
开始编写组件内容；

tips：关于图标，可以到iconfont (opens new window)里面找到一些你喜欢的图标加入到购物车然后添加到自己的项目里面，最后下载下来放入/static/fonts/iconfont.css里面即可。

下面这部分是模板内容，里面有图标名称，大小和颜色的绑定。

<template>
  <view class="q-icon">
    <text
      :class="{ demo: true, [`demo-${name}`]: true }"
      :style="{ fontSize: size * 2 + 'rpx', color: color }">
    </text>
  </view>
</template>

1
2
3
4
5
6
7
8

下面这部分是方法，里面有父组件传递的消息参数和格式定义以及默认值。

<script setup name="qIcon">
  const props = defineProps({
    // 名称
    name: {
      type: String,
      default: "home",
    },
    // 大小
    size: {
      type: Number,
      default: 16,
    },
    // 颜色
    color: {
      type: String,
      default: "#333",
    },
  });
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

下面这部分是组件的样式，可以引入刚刚在 iconfont 下载的文件。

<style scoped>
  @import "/static/fonts/iconfont.css";
  .q-icon {
    padding: 10rpx;
  }
</style>

1
2
3
4
5
6

# 注册公共组件

引入到main.js文件进行注册；

在main.js文件进行一下引入。

import qIcon from "./components/q-icon/q-icon.vue";
app.component("q-icon", qIcon);

1
2

使用easycom方法进行注册；

"easycom": {
  "autoscan": true,
  "custom": {
    "^q-(.*)": "@/components/q-$1/q-$1.vue"
  }
}

1
2
3
4
5
6

自动注册，发现不用以上方法，也可以直接使用，只要是在components文件夹里面并且符合官方规范就可；

# 使用公共组件

完成以上两步以后就可以使用公共组件了。

打开/pages/index/index.vue，在template里面写入以下内容。

<q-icon name="user" :size="20" color="#333" />

# 公共样式

编写公共样式可以减少我们样式的重复冗余，提高页面渲染效率和页面编写速度，下面就是编写、注册和使用的方法。

# 编写公共样式

在刚刚的目录styles下面，已经提前创建好了一些样式文件。

下面就做一个刚刚图标公共样式的示例。

在variable.scss里面加入一个颜色变量$iconBgColor: #666;；
在global.scss里面写一个样式；

// 图标
.block-icon {
  border: 2rpx solid $iconBgColor;
}

1
2
3
4

# 注册公共样式

可以在main.js里面引入之前写好的全局文件；

import "./styles/global.scss";

可以在App.vue里面引入；

<style lang="scss">
  /*每个页面公共css */
  @import "./styles/global.scss";
</style>

1
2
3
4

# 使用公共样式

例如：在/pages/index/index.vue里面使用公共样式。

<view class="block-icon"> Uniapp </view>

# 公共方法

以下是公共方法的编写、注册和使用的方法。

# 编写公共方法

这次以一个简单的求和函数方法为例。

在scripts文件夹里面的utils.js里面写入一个方法。

// 通用方法

// 求和方法
const sum = (a, b) => a + b;

const utils = {
  sum,
};

export default utils;

1
2
3
4
5
6
7
8
9
10

# 注册公共方法

引入到/scripts/index.js；

// 公共方法
import utils from "./utils.js";

const apis = {
  utils,
};

export default apis;

1
2
3
4
5
6
7
8

引入到main.js；

import apis from "./scripts/index.js";

// vue2
Vue.prototype.$apis = apis;

// vue3
app.config.globalProperties.$apis = apis;

1
2
3
4
5
6
7

# 使用公共方法

在/pages/index/index.vue调用方法。

页面部分

<view class="text-sum">
  <input class="text-sum-ipt" type="text" v-model.number="sum.num1" placeholder="请输入数字1" />
  <text>+</text>
  <input class="text-sum-ipt" type="text" v-model.number="sum.num2" placeholder="请输入数字2" />
  <text>结果是:{{sum.result}}</text>
</view>
<button type="primary" @click="calcSum">求和</button>

1
2
3
4
5
6
7

样式部分

.text-sum {
  display: flex;
  padding: 50rpx 0;
  text-align: center;
  .text-sum-ipt {
    margin: 0 20rpx;
    width: 100rpx;
    border: 1rpx solid $iptBorColor;
  }
}

1
2
3
4
5
6
7
8
9
10

$iptBorColor是我在uni.scss里面加入的一个变量：

/* 首页变量 */
$iptBorColor: #999;

1
2

方法部分

export default {
  data() {
    return {
      sum: {
        num1: 0,
        num2: 0,
        result: 0,
      },
    };
  },
  methods: {
    calcSum() {
      this.sum.result = this.$apis.utils.sum(this.sum.num1, this.sum.num2);
    },
  },
};