perf- 优化代码,减少体积

src/App.vue

@@ -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 */

src/components/FontAwesomeIcon/index.vue

@@ -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>
+    </template>
-    </view>
+    <template v-else>
-  </template>
-  <template v-else>
-    <view @click="onClick" class="icon-wrap" :class="wrapClassObject" :style="wrapStyleObject">
       <text class="icon" :style="iconStyleObject" :class="iconClassObject" />
-      <text v-if="props.counter" class="counter" :style="counterStyleObject">{{ count }}</text>
+    </template>
-    </view>
+    <text v-if="props.counter" class="counter" :style="counterStyleObject">{{ count }}</text>
-  </template>
+  </view>
 </template>
 <style lang="scss" scoped>
   .icon-wrap {

src/components/FontAwesomeIcon/scss/_core.scss

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

src/components/FontAwesomeIcon/scss/brands.scss

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

src/components/FontAwesomeIcon/scss/duotone.scss

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

src/components/FontAwesomeIcon/scss/fontawesome.scss

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

src/components/FontAwesomeIcon/scss/light.scss

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

src/components/FontAwesomeIcon/scss/regular.scss

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

src/components/FontAwesomeIcon/scss/sharp-solid.scss

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

src/components/FontAwesomeIcon/scss/solid.scss

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

src/components/FontAwesomeIcon/scss/thin.scss

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

src/demo/example/fontAwesomeIcon/index.vue

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

src/pages/index/index.vue

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

src/utils/fonts.ts

@@ -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);
+      });
+  });
+}