乐趣区

关于前端:uniapp项目实践总结三全局公共组件和样式以及方法的使用

jiezi

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

上面是官网给出的目录构造标准。

┌─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 内置的罕用款式变量

公共组件

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

编写公共组件

在 uniapp 我的项目下是基于 vue 框架来写页面的，因而能够应用 vue 的相干知识点来新建公共组件。

在刚刚的目录构造上面，有一个 components 文件夹，外面就是寄存相干的全局公共组件。

咱们就以全局公共图标组件为例展现一下，能够采纳 {作者名称}-${组件名称} 命名文件夹，{作者名称}-${组件名称}.vue来命名组件。

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

tips：对于图标，能够到 iconfont 外面找到一些你喜爱的图标退出到购物车而后增加到本人的我的项目外面，最初下载下来放入 /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>

上面这部分是办法，外面有父组件传递的音讯参数和格局定义以及默认值。

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

上面这部分是组件的款式，能够引入刚刚在 iconfont 下载的文件。

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

注册公共组件

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

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

import qIcon from "./components/q-icon/q-icon.vue";
app.component("q-icon", qIcon);
  • 应用 easycom 办法进行注册；
"easycom": {
  "autoscan": true,
  "custom": {"^q-(.*)": "@/components/q-$1/q-$1.vue"
  }
}
  • 主动注册，发现不必以上办法，也能够间接应用，只有是在 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;}

注册公共款式

  • 能够在 main.js 外面引入之前写好的全局文件；
import "./styles/global.scss";
  • 能够在 App.vue 外面引入；
<style lang="scss">
  /* 每个页面公共 css */
  @import "./styles/global.scss";
</style>

应用公共款式

例如：在 /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;

注册公共办法

  • 引入到/scripts/index.js；
// 公共办法
import utils from "./utils.js";

const apis = {utils,};

export default apis;
  • 引入到main.js；
import apis from "./scripts/index.js";

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

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

应用公共办法

在 /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>
  • 款式局部
.text-sum {
  display: flex;
  padding: 50rpx 0;
  text-align: center;
  .text-sum-ipt {
    margin: 0 20rpx;
    width: 100rpx;
    border: 1rpx solid $iptBorColor;
  }
}

$iptBorColor是我在 uni.scss 外面退出的一个变量：

/* 首页变量 */
$iptBorColor: #999;
  • 办法局部
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);
    },
  },
};

最初

看一下最初的成绩展现。

以上就是全局注册公共组件、款式和办法的次要内容，有不足之处，请多多斧正。

退出移动版