From 60bb660b92237d96b0daafd723722ba0ee4012f5 Mon Sep 17 00:00:00 2001
From: Huang <596417202@qq.com>
Date: Sat, 8 Oct 2022 18:01:10 +0800
Subject: [PATCH] =?UTF-8?q?perf-FontAwesomeIcon=20=E5=BE=AE=E4=BF=A1?=
 =?UTF-8?q?=E5=B0=8F=E7=A8=8B=E5=BA=8F=E5=92=8C=E9=98=BF=E9=87=8C=E5=B0=8F?=
 =?UTF-8?q?=E7=A8=8B=E5=BA=8F=E5=8A=A8=E6=80=81=E8=BF=9C=E7=A8=8B=E5=8A=A0?=
 =?UTF-8?q?=E8=BD=BD=E5=AD=97=E4=BD=93?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                                   |  6 +-
 src/components/FontAwesomeIcon/index.scss     |  1 +
 .../FontAwesomeIcon/scss/_variables.scss      |  2 +-
 .../FontAwesomeIcon/scss/brands.scss          |  2 +
 .../FontAwesomeIcon/scss/duotone.scss         |  4 +-
 .../FontAwesomeIcon/scss/light.scss           |  6 +-
 .../FontAwesomeIcon/scss/regular.scss         |  3 +-
 .../FontAwesomeIcon/scss/sharp-solid.scss     |  3 +-
 .../FontAwesomeIcon/scss/solid.scss           |  2 +
 src/components/FontAwesomeIcon/scss/thin.scss |  3 +-
 src/demo/example/fontAwesomeIcon/index.vue    | 10 ++-
 src/utils/fonts.ts                            | 85 +++++++++++++++++++
 12 files changed, 115 insertions(+), 12 deletions(-)
 create mode 100644 src/utils/fonts.ts

diff --git a/src/App.vue b/src/App.vue
index aa2f226..4ca7aec 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -3,10 +3,14 @@
   import { useAuthStore } from '@/state/modules/auth';
   import { removeInterceptor, setupInterceptors } from '@/utils/interceptors';
   import { useRouterStore } from '@/state/modules/router';
+  import { dynamicLoadFontFace } from '@/utils/fonts';
 
   onLaunch(() => {
     console.log('App Launch');
-
+    /** 微信小程序和阿里小程序动态远程加载font awesome icon 字体 **/
+    /* #ifdef MP-WEIXIN || MP-ALIPAY */
+    dynamicLoadFontFace();
+    /* #endif */
     removeInterceptor();
 
     setupInterceptors();
diff --git a/src/components/FontAwesomeIcon/index.scss b/src/components/FontAwesomeIcon/index.scss
index 5e463b8..cb3d1a4 100644
--- a/src/components/FontAwesomeIcon/index.scss
+++ b/src/components/FontAwesomeIcon/index.scss
@@ -1,4 +1,5 @@
 @import "scss/fontawesome";
+
 @import "scss/solid";
 @import "scss/brands";
 @import "scss/regular";
diff --git a/src/components/FontAwesomeIcon/scss/_variables.scss b/src/components/FontAwesomeIcon/scss/_variables.scss
index 2a1fb32..21097d7 100644
--- a/src/components/FontAwesomeIcon/scss/_variables.scss
+++ b/src/components/FontAwesomeIcon/scss/_variables.scss
@@ -8,7 +8,7 @@ $fa-style-family        : "Font Awesome 6" !default;
 $fa-style-family-solid : '#{ $fa-style-family } Solid';
 $fa-style-family-regular : '#{ $fa-style-family } Regular';
 $fa-style-family-light  : '#{ $fa-style-family } Light';
-$fa-style-family-thin: '#{ $fa-style-family } Thin';
+$fa-style-family-thin : '#{ $fa-style-family } Thin';
 $fa-style-family-sharp-solid : '#{ $fa-style-family } Sharp Solid';
 $fa-style-family-brands : '#{ $fa-style-family } Brands Regular';
 $fa-style-family-duotone : '#{ $fa-style-family } Duotone Solid';
diff --git a/src/components/FontAwesomeIcon/scss/brands.scss b/src/components/FontAwesomeIcon/scss/brands.scss
index 91c52a2..b8b9659 100644
--- a/src/components/FontAwesomeIcon/scss/brands.scss
+++ b/src/components/FontAwesomeIcon/scss/brands.scss
@@ -12,6 +12,7 @@
   --#{$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;
@@ -28,6 +29,7 @@
   // $fa-brands-400-ttf;
   /* #endif */
 }
+/* #endif */
 
 .fab,
 .#{$fa-css-prefix}-brands {
diff --git a/src/components/FontAwesomeIcon/scss/duotone.scss b/src/components/FontAwesomeIcon/scss/duotone.scss
index 623657f..20f3422 100644
--- a/src/components/FontAwesomeIcon/scss/duotone.scss
+++ b/src/components/FontAwesomeIcon/scss/duotone.scss
@@ -9,9 +9,10 @@
 
 :root, :host {
   --#{$fa-css-prefix}-style-family-classic: $fa-style-family-duotone;
-  --#{$fa-css-prefix}-font-duotone: normal 900 1em/1 $fa-style-family-duotone;
+  --#{$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;
@@ -28,6 +29,7 @@
   /* #endif */
 
 }
+/* #endif */
 
 .far,
 .#{$fa-css-prefix}-duotone {
diff --git a/src/components/FontAwesomeIcon/scss/light.scss b/src/components/FontAwesomeIcon/scss/light.scss
index 245b68b..f672721 100644
--- a/src/components/FontAwesomeIcon/scss/light.scss
+++ b/src/components/FontAwesomeIcon/scss/light.scss
@@ -9,9 +9,9 @@
 
 :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 } Pro 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;
@@ -25,9 +25,9 @@
   /* #ifndef H5 */
   src:  $fa-light-300-woff2;
   //  $fa-light-300-ttf;
-  
   /* #endif */
 }
+/* #endif */
 
 .far,
 .#{$fa-css-prefix}-light {
diff --git a/src/components/FontAwesomeIcon/scss/regular.scss b/src/components/FontAwesomeIcon/scss/regular.scss
index 9d10c09..69b067f 100644
--- a/src/components/FontAwesomeIcon/scss/regular.scss
+++ b/src/components/FontAwesomeIcon/scss/regular.scss
@@ -11,7 +11,7 @@
   --#{$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;
@@ -28,6 +28,7 @@
     
   /* #endif */
   }
+/* #endif */
 
 .far,
 .#{$fa-css-prefix}-regular {
diff --git a/src/components/FontAwesomeIcon/scss/sharp-solid.scss b/src/components/FontAwesomeIcon/scss/sharp-solid.scss
index c09e315..3ccf02d 100644
--- a/src/components/FontAwesomeIcon/scss/sharp-solid.scss
+++ b/src/components/FontAwesomeIcon/scss/sharp-solid.scss
@@ -11,7 +11,7 @@
   --#{$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;
@@ -27,6 +27,7 @@
   // $fa-sharp-solid-900-ttf;
   /* #endif */
 }
+/* #endif */
 
 .far,
 .#{$fa-css-prefix}-sharp-solid {
diff --git a/src/components/FontAwesomeIcon/scss/solid.scss b/src/components/FontAwesomeIcon/scss/solid.scss
index 5e10f69..fc5e40f 100644
--- a/src/components/FontAwesomeIcon/scss/solid.scss
+++ b/src/components/FontAwesomeIcon/scss/solid.scss
@@ -12,6 +12,7 @@
   --#{$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;
@@ -27,6 +28,7 @@
   // $fa-solid-900-ttf;
   /* #endif */
 }
+/* #endif */
 
 .fas,
 .#{$fa-css-prefix}-solid {
diff --git a/src/components/FontAwesomeIcon/scss/thin.scss b/src/components/FontAwesomeIcon/scss/thin.scss
index 4fa5587..8b7349d 100644
--- a/src/components/FontAwesomeIcon/scss/thin.scss
+++ b/src/components/FontAwesomeIcon/scss/thin.scss
@@ -11,7 +11,7 @@
   --#{$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;
@@ -27,6 +27,7 @@
   // $fa-thin-100-ttf;
   /* #endif */
 }
+/* #endif */
 
 .far,
 .#{$fa-css-prefix}-thin {
diff --git a/src/demo/example/fontAwesomeIcon/index.vue b/src/demo/example/fontAwesomeIcon/index.vue
index 601ccab..490d9d0 100644
--- a/src/demo/example/fontAwesomeIcon/index.vue
+++ b/src/demo/example/fontAwesomeIcon/index.vue
@@ -8,7 +8,6 @@
 
   const onCopyLink = () => {
     SetClipboardData(iconLink.value);
-    console.log('的反馈了高考历史电饭锅');
   };
 </script>
 <template>
@@ -16,8 +15,13 @@
     <view class="h2"> FontAwesomeIcon 图标组件基于font awesome icon v6.20</view>
     <view class="tip">
       Tip: 由于字体文件太大,共7种风格图标, 7个字体文件,
-      在微信小程序中请不要引用全部字体,在组件目录index.scss中配置, 已测试: 支持H5, APP(安卓),
-      微信小程序
+      <!-- #ifdef MP-WEIXIN || MP-ALIPAY -->
+      微信小程序和阿里小程序动态远程加载font awesome icon 字体, 在\src\utils\fonts.ts中配置,
+      <!-- #endif -->
+      <!-- #ifndef MP-WEIXIN || MP-ALIPAY-->
+      在组件目录index.scss中配置引入字体,
+      <!-- #endif -->
+      已测试: 支持H5, APP(安卓), 微信小程序
     </view>
     <view class="tip">
       全部icon请查看:
diff --git a/src/utils/fonts.ts b/src/utils/fonts.ts
new file mode 100644
index 0000000..2cda766
--- /dev/null
+++ b/src/utils/fonts.ts
@@ -0,0 +1,85 @@
+import { getBaseUrl } from '@/utils/env';
+
+const fa_style_family = 'Font Awesome 6';
+
+const fa_style_family_solid = `${fa_style_family} Solid`;
+const fa_style_family_regular = `${fa_style_family} Regular`;
+const fa_style_family_light = `${fa_style_family} Light`;
+const fa_style_family_thin = `${fa_style_family} Thin`;
+const fa_style_family_sharp_solid = `${fa_style_family} Sharp Solid`;
+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`,
+    weight: '900',
+  },
+  {
+    family: fa_style_family_regular,
+    source: `${LOAD_FONT_FACE_URL}/fa-regular-400.woff2`,
+    weight: '400',
+  },
+  {
+    family: fa_style_family_light,
+    source: `${LOAD_FONT_FACE_URL}/fa-light-300.woff2`,
+    weight: '300',
+  },
+  {
+    family: fa_style_family_thin,
+    source: `${LOAD_FONT_FACE_URL}/fa-thin-100.woff2`,
+    weight: '100',
+  },
+  {
+    family: fa_style_family_sharp_solid,
+    source: `${LOAD_FONT_FACE_URL}/fa-sharp-solid-900.woff2`,
+    weight: '900',
+  },
+  {
+    family: fa_style_family_duotone,
+    source: `${LOAD_FONT_FACE_URL}/fa-duotone-900.woff2`,
+    weight: '900',
+  },
+  {
+    family: fa_style_family_brands,
+    source: `${LOAD_FONT_FACE_URL}/fa-brands-400.woff2`,
+    weight: '400',
+  },
+];
+
+function LoadFontFace(data: UniApp.LoadFontFaceOptions & { weight?: string; global?: boolean }) {
+  return new Promise((resolve, reject) => {
+    uni.loadFontFace({
+      global: true,
+      ...data,
+      desc: {
+        style: 'normal',
+        weight: data.weight ?? 'normal',
+        variant: 'normal',
+      },
+      success: (res) => {
+        resolve(res);
+      },
+      fail: (err) => {
+        reject(err);
+      },
+    });
+  });
+}
+
+export function dynamicLoadFontFace() {
+  fontFamilyList.forEach((fontFamily) => {
+    LoadFontFace(fontFamily)
+      .then((res: any) => {
+        console.log(fontFamily.family, res.errMsg);
+      })
+      .catch((err) => {
+        console.error(fontFamily.family, err.errMsg);
+      });
+  });
+}