uniapp項(xiàng)目實(shí)踐之全局公共組件樣式及方法使用示例詳解

更新時(shí)間：2023年09月06日 10:14:06 作者：MarkGuan

這篇文章主要為大家介紹了uniapp項(xiàng)目實(shí)踐之全局公共組件樣式及方法使用示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪

uniapp 項(xiàng)目實(shí)踐全局公共組件和樣式及方法的使用

上一篇講解了如何創(chuàng)建一個(gè)新的 uniapp 項(xiàng)目，這篇來講解以下如何注冊(cè)和使用全局的公共組件，全局樣式和全局方法。

目錄結(jié)構(gòu)

創(chuàng)建好項(xiàng)目以后，可以先初始化一下目錄，下面是我自己的習(xí)慣。

┌─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

下面是官方給出的目錄結(jié)構(gòu)規(guī)范。

┌─uniCloud              云空間目錄，阿里云為uniCloud-aliyun,騰訊云為uniCloud-tcb（詳見uniCloud）
│─components            符合vue組件規(guī)范的uni-app組件目錄
│  └─comp-a.vue         可復(fù)用的a組件
├─utssdk                存放uts文件
├─pages                 業(yè)務(wù)頁(yè)面文件存放的目錄
│  ├─index
│  │  └─index.vue       index頁(yè)面
│  └─list
│     └─list.vue        list頁(yè)面
├─static                存放應(yīng)用引用的本地靜態(tài)資源（如圖片、視頻等）的目錄，注意：靜態(tài)資源只能存放于此
├─uni_modules           存放[uni_module](/uni_modules)。
├─platforms             存放各平臺(tái)專用頁(yè)面的目錄，詳見
├─nativeplugins         App原生語(yǔ)言插件 詳見
├─nativeResources       App端原生資源目錄
│  ├─android            Android原生資源目錄 詳見
|  └─ios                iOS原生資源目錄 詳見
├─hybrid                App端存放本地html文件的目錄，詳見
├─wxcomponents          存放小程序組件的目錄，詳見
├─unpackage             非工程代碼，一般存放運(yùn)行或發(fā)行的編譯結(jié)果
├─AndroidManifest.xml   Android原生應(yīng)用清單文件 詳見
├─Info.plist            iOS原生應(yīng)用配置文件 詳見
├─main.js               Vue初始化入口文件
├─App.vue               應(yīng)用配置，用來配置App全局樣式以及監(jiān)聽 應(yīng)用生命周期
├─manifest.json         配置應(yīng)用名稱、appid、logo、版本等打包信息，詳見
├─pages.json            配置頁(yè)面路由、導(dǎo)航條、選項(xiàng)卡等頁(yè)面類信息，詳見
└─uni.scss              這里是uni-app內(nèi)置的常用樣式變量

公共組件

下面開始公共組件的編寫、注冊(cè)和使用。

編寫公共組件

在 uniapp 項(xiàng)目下是基于 vue 框架來寫頁(yè)面的，因此可以使用 vue 的相關(guān)知識(shí)點(diǎn)來新建公共組件。

在剛剛的目錄結(jié)構(gòu)下面，有一個(gè)components文件夾，里面就是存放相關(guān)的全局公共組件。

我們就以全局公共圖標(biāo)組件為例展示一下，可以采用{作者名稱}-${組件名稱}命名文件夾，{作者名稱}-${組件名稱}.vue來命名組件。

新建文件夾q-icon；
在q-icon文件夾下面新建q-icon.vue組件；
開始編寫組件內(nèi)容；

tips：關(guān)于圖標(biāo)，可以到iconfont里面找到一些你喜歡的圖標(biāo)加入到購(gòu)物車然后添加到自己的項(xiàng)目里面，最后下載下來放入/static/fonts/iconfont.css里面即可。

下面這部分是模板內(nèi)容，里面有圖標(biāo)名稱，大小和顏色的綁定。

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

下面這部分是方法，里面有父組件傳遞的消息參數(shù)和格式定義以及默認(rèn)值。

<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>

注冊(cè)公共組件

引入到main.js文件進(jìn)行注冊(cè)；

在main.js文件進(jìn)行一下引入。

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

使用easycom方法進(jìn)行注冊(cè)；

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

自動(dòng)注冊(cè)，發(fā)現(xiàn)不用以上方法，也可以直接使用，只要是在components文件夾里面并且符合官方規(guī)范就可；

使用公共組件

完成以上兩步以后就可以使用公共組件了。

打開/pages/index/index.vue，在template里面寫入以下內(nèi)容。

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

公共樣式

編寫公共樣式可以減少我們樣式的重復(fù)冗余，提高頁(yè)面渲染效率和頁(yè)面編寫速度，下面就是編寫、注冊(cè)和使用的方法。

編寫公共樣式

在剛剛的目錄styles下面，已經(jīng)提前創(chuàng)建好了一些樣式文件。

下面就做一個(gè)剛剛圖標(biāo)公共樣式的示例。

在variable.scss里面加入一個(gè)顏色變量$iconBgColor: #666;；
在global.scss里面寫一個(gè)樣式；

// 圖標(biāo)
.block-icon {
  border: 2rpx solid $iconBgColor;
}

注冊(cè)公共樣式

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

import "./styles/global.scss";

可以在App.vue里面引入；

<style lang="scss">
  /*每個(gè)頁(yè)面公共css */
  @import "./styles/global.scss";
</style>

使用公共樣式

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

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

公共方法

以下是公共方法的編寫、注冊(cè)和使用的方法。

編寫公共方法

這次以一個(gè)簡(jiǎn)單的求和函數(shù)方法為例。

在scripts文件夾里面的utils.js里面寫入一個(gè)方法。

// 通用方法
// 求和方法
const sum = (a, b) => a + b;
const utils = {
  sum,
};
export default utils;

注冊(cè)公共方法

引入到/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調(diào)用方法。

頁(yè)面部分

<view class="text-sum">
  <input
    class="text-sum-ipt"
    type="text"
    v-model.number="sum.num1"
    placeholder="請(qǐng)輸入數(shù)字1"
  />
  <text>+</text>
  <input
    class="text-sum-ipt"
    type="text"
    v-model.number="sum.num2"
    placeholder="請(qǐng)輸入數(shù)字2"
  />
  <text>結(jié)果是:{{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里面加入的一個(gè)變量：

/* 首頁(yè)變量 */
$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);
    },
  },
};