feat(App): pageScrollTo、loadFontFace

packages/uni-app-plus/dist/uni-app-service.es.js

@@ -4832,6 +4832,34 @@ var serviceContext = (function (vue) {
 
   const API_HIDE_TOAST = 'hideToast';
 
+  const API_LOAD_FONT_FACE = 'loadFontFace';
+  const LoadFontFaceProtocol = {
+      family: {
+          type: String,
+          required: true,
+      },
+      source: {
+          type: String,
+          required: true,
+      },
+      desc: Object,
+  };
+
+  const API_PAGE_SCROLL_TO = 'pageScrollTo';
+  const PageScrollToProtocol = {
+      scrollTop: Number,
+      selector: String,
+      duration: Number,
+  };
+  const DEFAULT_DURATION = 300;
+  const PageScrollToOptions = {
+      formatArgs: {
+          duration(value, params) {
+              params.duration = Math.max(0, parseInt(value + '') || DEFAULT_DURATION);
+          },
+      },
+  };
+
   const API_SHOW_ACTION_SHEET = 'showActionSheet';
   const ShowActionSheetProtocol = {
       itemList: {
@@ -8114,6 +8142,29 @@ var serviceContext = (function (vue) {
       resolve();
   });
 
+  const VD_SYNC = 'vdSync';
+  const ON_WEBVIEW_READY = 'onWebviewReady';
+  const PAGE_SCROLL_TO = 'pageScrollTo';
+  const LOAD_FONT_FACE = 'loadFontFace';
+  const ACTION_TYPE_DICT = 0;
+
+  const loadFontFace = defineAsyncApi(API_LOAD_FONT_FACE, (options, { resolve, reject }) => {
+      const pageId = getPageIdByVm(getCurrentPageVm());
+      UniServiceJSBridge.invokeViewMethod(LOAD_FONT_FACE, options, pageId, (err) => {
+          if (err) {
+              reject(err);
+          }
+          else {
+              resolve();
+          }
+      });
+  }, LoadFontFaceProtocol);
+
+  const pageScrollTo = defineAsyncApi(API_PAGE_SCROLL_TO, (options, { resolve }) => {
+      const pageId = getPageIdByVm(getCurrentPageVm());
+      UniServiceJSBridge.invokeViewMethod(PAGE_SCROLL_TO, options, pageId, resolve);
+  }, PageScrollToProtocol, PageScrollToOptions);
+
   const providers = {
       oauth(callback) {
           plus.oauth.getServices((services) => {
@@ -8892,10 +8943,6 @@ var serviceContext = (function (vue) {
       });
   }
 
-  const VD_SYNC = 'vdSync';
-  const ON_WEBVIEW_READY = 'onWebviewReady';
-  const ACTION_TYPE_DICT = 0;
-
   function onNodeEvent(nodeId, evt, pageNode) {
       pageNode.fireEvent(nodeId, evt);
   }
@@ -10840,6 +10887,8 @@ var serviceContext = (function (vue) {
     hideLoading: hideLoading,
     startPullDownRefresh: startPullDownRefresh,
     stopPullDownRefresh: stopPullDownRefresh,
+    loadFontFace: loadFontFace,
+    pageScrollTo: pageScrollTo,
     getProvider: getProvider,
     login: login,
     getUserInfo: getUserInfo,

packages/uni-app-plus/dist/uni-app-view.umd.js

@@ -171,6 +171,64 @@
       offsetLeft
     };
   }
+  function addFont(family, source, desc) {
+    const fonts = document.fonts;
+    if (fonts) {
+      const fontFace = new FontFace(family, source, desc);
+      return fontFace.load().then(() => {
+        fonts.add(fontFace);
+      });
+    }
+    return new Promise((resolve2) => {
+      const style = document.createElement("style");
+      const values = [];
+      if (desc) {
+        const { style: style2, weight, stretch, unicodeRange, variant, featureSettings } = desc;
+        style2 && values.push(`font-style:${style2}`);
+        weight && values.push(`font-weight:${weight}`);
+        stretch && values.push(`font-stretch:${stretch}`);
+        unicodeRange && values.push(`unicode-range:${unicodeRange}`);
+        variant && values.push(`font-variant:${variant}`);
+        featureSettings && values.push(`font-feature-settings:${featureSettings}`);
+      }
+      style.innerText = `@font-face{font-family:"${family}";src:${source};${values.join(";")}}`;
+      document.head.appendChild(style);
+      resolve2();
+    });
+  }
+  function scrollTo(scrollTop, duration) {
+    if (isString(scrollTop)) {
+      const el = document.querySelector(scrollTop);
+      if (el) {
+        scrollTop = el.getBoundingClientRect().top + window.pageYOffset;
+      }
+    }
+    if (scrollTop < 0) {
+      scrollTop = 0;
+    }
+    const documentElement = document.documentElement;
+    const { clientHeight, scrollHeight } = documentElement;
+    scrollTop = Math.min(scrollTop, scrollHeight - clientHeight);
+    if (duration === 0) {
+      documentElement.scrollTop = document.body.scrollTop = scrollTop;
+      return;
+    }
+    if (window.scrollY === scrollTop) {
+      return;
+    }
+    const scrollTo2 = (duration2) => {
+      if (duration2 <= 0) {
+        window.scrollTo(0, scrollTop);
+        return;
+      }
+      const distaince = scrollTop - window.scrollY;
+      requestAnimationFrame(function() {
+        window.scrollTo(0, window.scrollY + distaince / duration2 * 10);
+        scrollTo2(duration2 - 10);
+      });
+    };
+    scrollTo2(duration);
+  }
   function plusReady(callback) {
     if (typeof callback !== "function") {
       return;
@@ -5445,6 +5503,8 @@
   [ON_PAGE_SCROLL, ON_REACH_BOTTOM];
   const VD_SYNC = "vdSync";
   const ON_WEBVIEW_READY = "onWebviewReady";
+  const PAGE_SCROLL_TO = "pageScrollTo";
+  const LOAD_FONT_FACE = "loadFontFace";
   const ACTION_TYPE_DICT = 0;
   const APP_SERVICE_ID = "__uniapp__service";
   const UniViewJSBridge$1 = /* @__PURE__ */ extend(ViewJSBridge, {
@@ -12669,7 +12729,7 @@
       let val = Number(props2.lowerThreshold);
       return isNaN(val) ? 50 : val;
     });
-    function scrollTo(scrollToValue, direction2) {
+    function scrollTo2(scrollToValue, direction2) {
       const container = main.value;
       let transformValue = 0;
       let transform = "";
@@ -12746,7 +12806,7 @@
       if (props2.scrollY) {
         {
           if (props2.scrollWithAnimation) {
-            scrollTo(val, "y");
+            scrollTo2(val, "y");
           } else {
             main.value.scrollTop = val;
           }
@@ -12757,7 +12817,7 @@
       if (props2.scrollX) {
         {
           if (props2.scrollWithAnimation) {
-            scrollTo(val, "x");
+            scrollTo2(val, "x");
           } else {
             main.value.scrollLeft = val;
           }
@@ -12779,7 +12839,7 @@
             let scrollLeft = main.value.scrollLeft;
             let x = scrollLeft + left;
             if (props2.scrollWithAnimation) {
-              scrollTo(x, "x");
+              scrollTo2(x, "x");
             } else {
               main.value.scrollLeft = x;
             }
@@ -12789,7 +12849,7 @@
             let scrollTop = main.value.scrollTop;
             let y = scrollTop + top;
             if (props2.scrollWithAnimation) {
-              scrollTo(y, "y");
+              scrollTo2(y, "y");
             } else {
               main.value.scrollTop = y;
             }
@@ -15845,6 +15905,10 @@
     }
     requestAnimationFrame(() => document.addEventListener("scroll", createScrollListener(opts)));
   }
+  function pageScrollTo({ scrollTop, selector, duration }, publish) {
+    scrollTo(selector || scrollTop || 0, duration);
+    publish();
+  }
   function onVdSync(actions) {
     const dictAction = actions[0];
     const getDict = createGetDict(dictAction[0] === ACTION_TYPE_DICT ? dictAction[1] : []);
@@ -16015,6 +16079,13 @@
     });
     callback(result);
   }
+  function loadFontFace({ family, source, desc }, publish) {
+    addFont(family, source, desc).then(() => {
+      publish();
+    }).catch((err) => {
+      publish(err.toString());
+    });
+  }
   const pageVm = { $el: document.body };
   function initViewMethods() {
     const pageId = getCurrentPageId();
@@ -16022,6 +16093,8 @@
     registerViewMethod(pageId, "requestComponentInfo", (args, publish) => {
       requestComponentInfo(pageVm, args.reqs, publish);
     });
+    registerViewMethod(pageId, PAGE_SCROLL_TO, pageScrollTo);
+    registerViewMethod(pageId, LOAD_FONT_FACE, loadFontFace);
   }
   window.uni = uni$1;
   window.UniViewJSBridge = UniViewJSBridge$1;

packages/uni-app-plus/src/constants.ts

@@ -2,6 +2,10 @@ export const VD_SYNC = 'vdSync'
 
 export const ON_WEBVIEW_READY = 'onWebviewReady'
 
+export const PAGE_SCROLL_TO = 'pageScrollTo'
+
+export const LOAD_FONT_FACE = 'loadFontFace'
+
 export let ACTION_MINIFY = true
 // __tests__
 export function setActionMinify(minify: boolean) {

packages/uni-app-plus/src/service/api/index.ts

@@ -45,6 +45,8 @@ export * from './ui/popup/showActionSheet'
 export * from './ui/popup/showToast'
 export * from './ui/startPullDownRefresh'
 export * from './ui/stopPullDownRefresh'
+export * from './ui/loadFontFace'
+export * from './ui/pageScrollTo'
 
 export * from './plugin/getProvider'
 export * from './plugin/oauth'

packages/uni-app-plus/src/service/api/ui/loadFontFace.ts

+import {
+  API_LOAD_FONT_FACE,
+  API_TYPE_LOAD_FONT_FACE,
+  defineAsyncApi,
+  LoadFontFaceProtocol,
+} from '@dcloudio/uni-api'
+import { getPageIdByVm, getCurrentPageVm } from '@dcloudio/uni-core'
+import { LOAD_FONT_FACE } from '../../../constants'
+
+export const loadFontFace = defineAsyncApi<API_TYPE_LOAD_FONT_FACE>(
+  API_LOAD_FONT_FACE,
+  (options, { resolve, reject }) => {
+    const pageId = getPageIdByVm(getCurrentPageVm()!)!
+    UniServiceJSBridge.invokeViewMethod(
+      LOAD_FONT_FACE,
+      options,
+      pageId,
+      (err: string) => {
+        if (err) {
+          reject(err)
+        } else {
+          resolve()
+        }
+      }
+    )
+  },
+  LoadFontFaceProtocol
+)

packages/uni-app-plus/src/service/api/ui/pageScrollTo.ts

+import {
+  API_PAGE_SCROLL_TO,
+  API_TYPE_PAGE_SCROLL_TO,
+  defineAsyncApi,
+  PageScrollToOptions,
+  PageScrollToProtocol,
+} from '@dcloudio/uni-api'
+import { getPageIdByVm, getCurrentPageVm } from '@dcloudio/uni-core'
+import { PAGE_SCROLL_TO } from '../../../constants'
+
+export const pageScrollTo = defineAsyncApi<API_TYPE_PAGE_SCROLL_TO>(
+  API_PAGE_SCROLL_TO,
+  (options, { resolve }) => {
+    const pageId = getPageIdByVm(getCurrentPageVm()!)!
+    UniServiceJSBridge.invokeViewMethod(
+      PAGE_SCROLL_TO,
+      options,
+      pageId,
+      resolve
+    )
+  },
+  PageScrollToProtocol,
+  PageScrollToOptions
+)

packages/uni-app-plus/src/view/framework/dom/font.ts

+import { addFont } from '@dcloudio/uni-shared'
+
+export function loadFontFace(
+  {
+    family,
+    source,
+    desc,
+  }: { family: string; source: string; desc?: UniApp.LoadFontFaceOptionsDesc },
+  publish: (err?: string) => void
+) {
+  addFont(family, source, desc)
+    .then(() => {
+      publish()
+    })
+    .catch((err) => {
+      publish(err.toString())
+    })
+}

packages/uni-app-plus/src/view/framework/dom/page.ts

@@ -10,6 +10,7 @@ import {
   ON_REACH_BOTTOM,
   PageCreateData,
   UniNodeJSON,
+  scrollTo,
 } from '@dcloudio/uni-shared'
 
 import { UniElement } from './elements/UniElement'
@@ -172,3 +173,15 @@ function initPageScroll(
     document.addEventListener('scroll', createScrollListener(opts))
   )
 }
+
+export function pageScrollTo(
+  {
+    scrollTop,
+    selector,
+    duration,
+  }: { selector?: string; scrollTop?: number; duration?: number },
+  publish: (err?: string) => void
+) {
+  scrollTo(selector! || scrollTop! || 0, duration!)
+  publish()
+}

packages/uni-app-plus/src/view/framework/viewMethods.ts

@@ -5,8 +5,10 @@ import {
   getCurrentPageId,
 } from '@dcloudio/uni-core'
 import { ComponentPublicInstance } from 'vue'
-
 import { requestComponentInfo } from '../../../../uni-h5/src/platform'
+import { PAGE_SCROLL_TO, LOAD_FONT_FACE } from '../../constants'
+import { loadFontFace } from './dom/font'
+import { pageScrollTo } from './dom/page'
 
 const pageVm = { $el: document.body } as ComponentPublicInstance
 
@@ -20,4 +22,6 @@ export function initViewMethods() {
       requestComponentInfo(pageVm, args.reqs, publish)
     }
   )
+  registerViewMethod(pageId, PAGE_SCROLL_TO, pageScrollTo)
+  registerViewMethod(pageId, LOAD_FONT_FACE, loadFontFace)
 }