blackteay/uniapp-vue3-vite-ts-template
1
0
Fork 0
mirror of https://gitee.com/h_mo/uniapp-vue3-vite-ts-template synced 2025-04-06 03:58:03 +08:00
Code Issues Projects Releases Wiki Activity

perf- 优化代码,减少体积

Browse Source
This commit is contained in:
Huang 2022-10-09 14:52:40 +08:00
parent 60bb660b92
commit f80a406f93
14 changed files with 72 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/App.vue
View File

@ -3,11 +3,13 @@
import { useAuthStore } from '@/state/modules/auth';
import { removeInterceptor, setupInterceptors } from '@/utils/interceptors';
import { useRouterStore } from '@/state/modules/router';
/* #ifdef MP-WEIXIN || MP-ALIPAY */
import { dynamicLoadFontFace } from '@/utils/fonts';
/* #endif */
onLaunch(() => {
console.log('App Launch');
/** 微信小程序和阿里小程序动态远程加载font awesome icon 字体 **/
/** 微信小程序和阿里小程序动态远程加载字体 **/
/* #ifdef MP-WEIXIN || MP-ALIPAY */
dynamicLoadFontFace();
/* #endif */

17
src/components/FontAwesomeIcon/index.vue
View File

@ -137,18 +137,15 @@
};
</script>
<template>
<template v-if="props.stack">
<view @click="onClick" class="icon-wrap" :class="wrapClassObject" :style="wrapStyleObject">
<view @click="onClick" class="icon-wrap" :class="wrapClassObject" :style="wrapStyleObject">
<template v-if="props.stack">
<slot :stack="props.stack"></slot>
<text v-if="props.counter" class="counter" :style="counterStyleObject">{{ count }}</text>
</view>
</template>
<template v-else>
<view @click="onClick" class="icon-wrap" :class="wrapClassObject" :style="wrapStyleObject">
</template>
<template v-else>
<text class="icon" :style="iconStyleObject" :class="iconClassObject" />
<text v-if="props.counter" class="counter" :style="counterStyleObject">{{ count }}</text>
</view>
</template>
</template>
<text v-if="props.counter" class="counter" :style="counterStyleObject">{{ count }}</text>
</view>
</template>
<style lang="scss" scoped>
.icon-wrap {

2
src/components/FontAwesomeIcon/scss/_core.scss
View File

@ -35,8 +35,6 @@
text-rendering: auto;
}
//.fa, .fa-brands, .fa-classic, .fa-duotone, .fa-light, .fa-regular, .fa-sharp, .fa-sharp-solid, .fa-solid, .fa-thin, .fab, .fad, .fal, .far, .fas, .fass, .fat
.fas,
.#{$fa-css-prefix}-classic,
.#{$fa-css-prefix}-solid {

2
src/components/FontAwesomeIcon/scss/brands.scss
View File

@ -5,6 +5,7 @@
*/
@import 'functions';
@import 'variables';
/* #ifndef MP-WEIXIN || MP-ALIPAY */
@import 'fonts/fa-brands-400';
:root, :host {
@ -12,7 +13,6 @@
--#{$fa-css-prefix}-font-brands: normal 400 1em/1 '#{ $fa-style-family-brands }';
}
/* #ifndef MP-WEIXIN || MP-ALIPAY */
@font-face {
font-family: $fa-style-family-brands;
font-style: normal;

2
src/components/FontAwesomeIcon/scss/duotone.scss
View File

@ -5,6 +5,7 @@
*/
@import 'functions';
@import 'variables';
/* #ifndef MP-WEIXIN || MP-ALIPAY */
@import 'fonts/fa-duotone-900';
:root, :host {
@ -12,7 +13,6 @@
--#{$fa-css-prefix}-font-duotone: normal 900 1em/1 '#{ $fa-style-family-duotone }';
}
/* #ifndef MP-WEIXIN || MP-ALIPAY */
@font-face {
font-family: $fa-style-family-duotone;
font-style: normal;

2
src/components/FontAwesomeIcon/scss/fontawesome.scss vendored
View File

@ -12,7 +12,7 @@
@import 'core';
@import 'sizing';
@import 'fixed-width';
@import 'list';
//@import 'list';
@import 'bordered-pulled';
@import 'animated';
@import 'rotated-flipped';

3
src/components/FontAwesomeIcon/scss/light.scss
View File

@ -5,13 +5,14 @@
*/
@import 'functions';
@import 'variables';
/* #ifndef MP-WEIXIN || MP-ALIPAY */
@import 'fonts/fa-light-300';
:root, :host {
--#{$fa-css-prefix}-style-family-classic: $fa-style-family-light;
--#{$fa-css-prefix}-font-light: normal 300 1em/1 '#{ $fa-style-family-light }';
}
/* #ifndef MP-WEIXIN || MP-ALIPAY */
@font-face {
font-family: $fa-style-family-light;
font-style: normal;

3
src/components/FontAwesomeIcon/scss/regular.scss
View File

@ -5,13 +5,14 @@
*/
@import 'functions';
@import 'variables';
/* #ifndef MP-WEIXIN || MP-ALIPAY */
@import 'fonts/fa-regular-400';
:root, :host {
--#{$fa-css-prefix}-style-family-classic: $fa-style-family-regular;
--#{$fa-css-prefix}-font-regular: normal 400 1em/1 '#{ $fa-style-family-regular }';
}
/* #ifndef MP-WEIXIN || MP-ALIPAY */
@font-face {
font-family: $fa-style-family-regular;
font-style: normal;

3
src/components/FontAwesomeIcon/scss/sharp-solid.scss
View File

@ -5,13 +5,14 @@
*/
@import 'functions';
@import 'variables';
/* #ifndef MP-WEIXIN || MP-ALIPAY */
@import 'fonts/fa-sharp-solid-900';
:root, :host {
--#{$fa-css-prefix}-style-family-sharp: $fa-style-family-sharp-solid;
--#{$fa-css-prefix}-font-sharp-solid: normal 900 1em/1 '#{ $fa-style-family-sharp-solid }';
}
/* #ifndef MP-WEIXIN || MP-ALIPAY */
@font-face {
font-family: $fa-style-family-sharp-solid;
font-style: normal;

2
src/components/FontAwesomeIcon/scss/solid.scss
View File

@ -5,6 +5,7 @@
*/
@import 'functions';
@import 'variables';
/* #ifndef MP-WEIXIN || MP-ALIPAY */
@import 'fonts/fa-solid-900';
:root, :host {
@ -12,7 +13,6 @@
--#{$fa-css-prefix}-font-solid: normal 900 1em/1 '#{ $fa-style-family-solid }';
}
/* #ifndef MP-WEIXIN || MP-ALIPAY */
@font-face {
font-family: $fa-style-family-solid ;
font-style: normal;

3
src/components/FontAwesomeIcon/scss/thin.scss
View File

@ -5,13 +5,14 @@
*/
@import 'functions';
@import 'variables';
/* #ifndef MP-WEIXIN || MP-ALIPAY */
@import 'fonts/fa-thin-100';
:root, :host {
--#{$fa-css-prefix}-style-family-classic: $fa-style-family-thin;
--#{$fa-css-prefix}-font-thin: normal 100 1em/1 '#{ $fa-style-family-thin }';
}
/* #ifndef MP-WEIXIN || MP-ALIPAY */
@font-face {
font-family: $fa-style-family-thin;
font-style: normal;

13
src/demo/example/fontAwesomeIcon/index.vue
View File

@ -16,9 +16,12 @@
<view class="tip">
Tip: 由于字体文件太大,共7种风格图标, 7个字体文件,
<!-- #ifdef MP-WEIXIN || MP-ALIPAY -->
微信小程序和阿里小程序动态远程加载font awesome icon 字体, 在\src\utils\fonts.ts中配置,
微信小程序和阿里小程序动态远程加载font awesome 字体, 在\src\utils\fonts.ts中配置,
<!-- #endif -->
<!-- #ifndef MP-WEIXIN || MP-ALIPAY-->
<!-- #ifdef APP-PLUS -->
APP加载font awesome 字体, 在\src\utils\fonts.ts中配置,
<!-- #endif -->
<!-- #ifndef MP-WEIXIN || MP-ALIPAY || APP-PLUS -->
在组件目录index.scss中配置引入字体,
<!-- #endif -->
已测试: 支持H5, APP(安卓), 微信小程序
@ -28,7 +31,7 @@
<text class="link">{{ iconLink }}</text>
<FontAwesomeIcon mode="duotone" name="copy" @click="onCopyLink" />
</view>
<view class="title">mode-不同风格,对应相应字体文件</view>
<view class="title">mode-不同风格,对应相应字体</view>
<view> <FontAwesomeIcon name="house" />solid (默认)</view>
<view> <FontAwesomeIcon mode="regular" name="house" />regular</view>
<view> <FontAwesomeIcon mode="light" name="grid-2" />light grid-2</view>
@ -36,10 +39,10 @@
<view> <FontAwesomeIcon mode="thin" name="house" />thin</view>
<view> <FontAwesomeIcon mode="duotone" name="trash-can-clock" />duotone trash-can-clock</view>
<view> <FontAwesomeIcon mode="duotone" name="house" />duotone house</view>
<view class="title">sharp-直角图标(只支持大部分solid),对应sharp字体文件</view>
<view class="title">sharp-直角图标(只支持大部分solid),对应sharp字体</view>
<view> <FontAwesomeIcon name="user" sharp counter="999" /> sharp </view>
<view class="title">mode(brands)-品牌logo,对应brands字体文件</view>
<view class="title">mode(brands)-品牌logo,对应brands字体</view>
<view> <FontAwesomeIcon mode="brands" name="bilibili" /> bilibili </view>
<view> <FontAwesomeIcon mode="brands" name="alipay" /> alipay </view>

4
src/pages/index/index.vue
View File

@ -1,6 +1,7 @@
<script setup lang="ts">
import BasicButton from '@/components/BasicButton/index.vue';
import AppProvider from '@/components/AppProvider/inedx.vue';
import FontAwesomeIcon from '@/components/FontAwesomeIcon/index.vue';
import { ref } from 'vue';
import { useRouter } from '@/hooks/router';
import { CURRENT_PLATFORM, PLATFORMS } from '@/enums/platformEnum';
@ -14,7 +15,7 @@
const router = useRouter();
const handleGetStarted = () => {
router.pushTab('/pages/demo/index?d=str');
router.pushTab('/pages/demo/index');
};
</script>
<template>
@ -27,6 +28,7 @@
<view class="text-area">
<text class="">是否是Vue3: {{ isVue3 }}</text>
</view>
<view> <FontAwesomeIcon name="house" />solid (默认)</view>
<view class="text-area">
<text class="">当前平台: {{ platform }}</text>
</view>

49
src/utils/fonts.ts
View File

@ -11,43 +11,41 @@ const fa_style_family_brands = `${fa_style_family} Brands Regular`;
const fa_style_family_duotone = `${fa_style_family} Duotone Solid`;
const BASE_URL = getBaseUrl();
/* 实际项目中替换为自己服务器的url */
const LOAD_FONT_FACE_URL = `${BASE_URL}/fonts`;
const fontFamilyList = [
{
family: fa_style_family_solid,
source: `${LOAD_FONT_FACE_URL}/fa-solid-900.woff2`,
source: `/fa-solid-900.woff2`,
weight: '900',
},
{
family: fa_style_family_regular,
source: `${LOAD_FONT_FACE_URL}/fa-regular-400.woff2`,
source: `/fa-regular-400.woff2`,
weight: '400',
},
{
family: fa_style_family_light,
source: `${LOAD_FONT_FACE_URL}/fa-light-300.woff2`,
source: `/fa-light-300.woff2`,
weight: '300',
},
{
family: fa_style_family_thin,
source: `${LOAD_FONT_FACE_URL}/fa-thin-100.woff2`,
source: `/fa-thin-100.woff2`,
weight: '100',
},
{
family: fa_style_family_sharp_solid,
source: `${LOAD_FONT_FACE_URL}/fa-sharp-solid-900.woff2`,
source: `/fa-sharp-solid-900.woff2`,
weight: '900',
},
{
family: fa_style_family_duotone,
source: `${LOAD_FONT_FACE_URL}/fa-duotone-900.woff2`,
source: `/fa-duotone-900.woff2`,
weight: '900',
},
{
family: fa_style_family_brands,
source: `${LOAD_FONT_FACE_URL}/fa-brands-400.woff2`,
source: `/fa-brands-400.woff2`,
weight: '400',
},
];
@ -72,9 +70,19 @@ function LoadFontFace(data: UniApp.LoadFontFaceOptions & { weight?: string; glob
});
}
/**
* 动态加载字体
*/
export function dynamicLoadFontFace() {
/* 实际项目中替换为自己服务器的静态资源地址
* 微信小程序端字体链接必须是同源下的，或开启了cors支持，微信小程序的域名是servicewechat.com
**/
const DYNAMIC_LOAD_FONT_FACE_URL = `${BASE_URL}/fonts`;
fontFamilyList.forEach((fontFamily) => {
LoadFontFace(fontFamily)
LoadFontFace({
...fontFamily,
source: `url(${DYNAMIC_LOAD_FONT_FACE_URL}${fontFamily.source})`,
})
.then((res: any) => {
console.log(fontFamily.family, res.errMsg);
})
@ -83,3 +91,24 @@ export function dynamicLoadFontFace() {
});
});
}
/**
* APP本地加载字体
*/
export function loadFontFaceFromLocal() {
fontFamilyList.forEach((fontFamily) => {
const source = `url(${plus.io.convertLocalFileSystemURL(
'_www/static/fonts' + fontFamily.source,
)})`;
LoadFontFace({
...fontFamily,
source,
})
.then((res: any) => {
console.log(fontFamily.family, res.errMsg);
})
.catch((err) => {
console.error(fontFamily.family, err);
});
});
}