From f80a406f9382aeae6e673f524f2406db610b3e4a Mon Sep 17 00:00:00 2001
From: Huang <596417202@qq.com>
Date: Sun, 9 Oct 2022 14:52:40 +0800
Subject: [PATCH] =?UTF-8?q?perf-=20=E4=BC=98=E5=8C=96=E4=BB=A3=E7=A0=81,?=
 =?UTF-8?q?=E5=87=8F=E5=B0=91=E4=BD=93=E7=A7=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                                   |  4 +-
 src/components/FontAwesomeIcon/index.vue      | 17 +++----
 .../FontAwesomeIcon/scss/_core.scss           |  2 -
 .../FontAwesomeIcon/scss/brands.scss          |  2 +-
 .../FontAwesomeIcon/scss/duotone.scss         |  2 +-
 .../FontAwesomeIcon/scss/fontawesome.scss     |  2 +-
 .../FontAwesomeIcon/scss/light.scss           |  3 +-
 .../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    | 13 +++--
 src/pages/index/index.vue                     |  4 +-
 src/utils/fonts.ts                            | 49 +++++++++++++++----
 14 files changed, 72 insertions(+), 37 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 4ca7aec..9bf3936 100644
--- a/src/App.vue
+++ b/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 */
diff --git a/src/components/FontAwesomeIcon/index.vue b/src/components/FontAwesomeIcon/index.vue
index 1981986..e74ee90 100644
--- a/src/components/FontAwesomeIcon/index.vue
+++ b/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>
-    </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 {
diff --git a/src/components/FontAwesomeIcon/scss/_core.scss b/src/components/FontAwesomeIcon/scss/_core.scss
index fe82c2d..01e238b 100644
--- a/src/components/FontAwesomeIcon/scss/_core.scss
+++ b/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 {
diff --git a/src/components/FontAwesomeIcon/scss/brands.scss b/src/components/FontAwesomeIcon/scss/brands.scss
index b8b9659..306a57a 100644
--- a/src/components/FontAwesomeIcon/scss/brands.scss
+++ b/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;
diff --git a/src/components/FontAwesomeIcon/scss/duotone.scss b/src/components/FontAwesomeIcon/scss/duotone.scss
index 20f3422..6e6f87d 100644
--- a/src/components/FontAwesomeIcon/scss/duotone.scss
+++ b/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;
diff --git a/src/components/FontAwesomeIcon/scss/fontawesome.scss b/src/components/FontAwesomeIcon/scss/fontawesome.scss
index c14ee94..007a4a7 100644
--- a/src/components/FontAwesomeIcon/scss/fontawesome.scss
+++ b/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';
diff --git a/src/components/FontAwesomeIcon/scss/light.scss b/src/components/FontAwesomeIcon/scss/light.scss
index f672721..57a0484 100644
--- a/src/components/FontAwesomeIcon/scss/light.scss
+++ b/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;
diff --git a/src/components/FontAwesomeIcon/scss/regular.scss b/src/components/FontAwesomeIcon/scss/regular.scss
index 69b067f..d106c96 100644
--- a/src/components/FontAwesomeIcon/scss/regular.scss
+++ b/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;
diff --git a/src/components/FontAwesomeIcon/scss/sharp-solid.scss b/src/components/FontAwesomeIcon/scss/sharp-solid.scss
index 3ccf02d..11a1f1d 100644
--- a/src/components/FontAwesomeIcon/scss/sharp-solid.scss
+++ b/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;
diff --git a/src/components/FontAwesomeIcon/scss/solid.scss b/src/components/FontAwesomeIcon/scss/solid.scss
index fc5e40f..50342f3 100644
--- a/src/components/FontAwesomeIcon/scss/solid.scss
+++ b/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;
diff --git a/src/components/FontAwesomeIcon/scss/thin.scss b/src/components/FontAwesomeIcon/scss/thin.scss
index 8b7349d..4a2b2c1 100644
--- a/src/components/FontAwesomeIcon/scss/thin.scss
+++ b/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;
diff --git a/src/demo/example/fontAwesomeIcon/index.vue b/src/demo/example/fontAwesomeIcon/index.vue
index 490d9d0..6e76b44 100644
--- a/src/demo/example/fontAwesomeIcon/index.vue
+++ b/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>
 
diff --git a/src/pages/index/index.vue b/src/pages/index/index.vue
index b24364c..95da1a5 100644
--- a/src/pages/index/index.vue
+++ b/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>
diff --git a/src/utils/fonts.ts b/src/utils/fonts.ts
index 2cda766..48bb998 100644
--- a/src/utils/fonts.ts
+++ b/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);
+      });
+  });
+}