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";// vue2Vue.prototype.$apis = apis;// vue3app.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);    },  },};

最初

看一下最初的成绩展现。

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