From 78a59e0ed31173996a4c45a6086adeb68e2fd2ea Mon Sep 17 00:00:00 2001 From: qiang Date: Wed, 28 Jul 2021 17:26:13 +0800 Subject: [PATCH] =?UTF-8?q?feat(App):=20pageScrollTo=E3=80=81loadFontFace?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../uni-app-plus/dist/uni-app-service.es.js | 57 ++++++++++++- .../uni-app-plus/dist/uni-app-view.umd.js | 83 +++++++++++++++++-- packages/uni-app-plus/src/constants.ts | 4 + .../uni-app-plus/src/service/api/index.ts | 2 + .../src/service/api/ui/loadFontFace.ts | 28 +++++++ .../src/service/api/ui/pageScrollTo.ts | 24 ++++++ .../src/view/framework/dom/font.ts | 18 ++++ .../src/view/framework/dom/page.ts | 13 +++ .../src/view/framework/viewMethods.ts | 6 +- 9 files changed, 225 insertions(+), 10 deletions(-) create mode 100644 packages/uni-app-plus/src/service/api/ui/loadFontFace.ts create mode 100644 packages/uni-app-plus/src/service/api/ui/pageScrollTo.ts create mode 100644 packages/uni-app-plus/src/view/framework/dom/font.ts diff --git a/packages/uni-app-plus/dist/uni-app-service.es.js b/packages/uni-app-plus/dist/uni-app-service.es.js index 5d14f7302..c40b7be43 100644 --- a/packages/uni-app-plus/dist/uni-app-service.es.js +++ b/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, diff --git a/packages/uni-app-plus/dist/uni-app-view.umd.js b/packages/uni-app-plus/dist/uni-app-view.umd.js index 1109f332a..98782224f 100644 --- a/packages/uni-app-plus/dist/uni-app-view.umd.js +++ b/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; diff --git a/packages/uni-app-plus/src/constants.ts b/packages/uni-app-plus/src/constants.ts index dadbe0dbc..abd4abd86 100644 --- a/packages/uni-app-plus/src/constants.ts +++ b/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) { diff --git a/packages/uni-app-plus/src/service/api/index.ts b/packages/uni-app-plus/src/service/api/index.ts index 63736217c..3c34addee 100644 --- a/packages/uni-app-plus/src/service/api/index.ts +++ b/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' diff --git a/packages/uni-app-plus/src/service/api/ui/loadFontFace.ts b/packages/uni-app-plus/src/service/api/ui/loadFontFace.ts new file mode 100644 index 000000000..7641561d2 --- /dev/null +++ b/packages/uni-app-plus/src/service/api/ui/loadFontFace.ts @@ -0,0 +1,28 @@ +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_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 +) diff --git a/packages/uni-app-plus/src/service/api/ui/pageScrollTo.ts b/packages/uni-app-plus/src/service/api/ui/pageScrollTo.ts new file mode 100644 index 000000000..11c1628e4 --- /dev/null +++ b/packages/uni-app-plus/src/service/api/ui/pageScrollTo.ts @@ -0,0 +1,24 @@ +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_PAGE_SCROLL_TO, + (options, { resolve }) => { + const pageId = getPageIdByVm(getCurrentPageVm()!)! + UniServiceJSBridge.invokeViewMethod( + PAGE_SCROLL_TO, + options, + pageId, + resolve + ) + }, + PageScrollToProtocol, + PageScrollToOptions +) diff --git a/packages/uni-app-plus/src/view/framework/dom/font.ts b/packages/uni-app-plus/src/view/framework/dom/font.ts new file mode 100644 index 000000000..16afc97dc --- /dev/null +++ b/packages/uni-app-plus/src/view/framework/dom/font.ts @@ -0,0 +1,18 @@ +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()) + }) +} diff --git a/packages/uni-app-plus/src/view/framework/dom/page.ts b/packages/uni-app-plus/src/view/framework/dom/page.ts index 74a599259..d12bb2853 100644 --- a/packages/uni-app-plus/src/view/framework/dom/page.ts +++ b/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() +} diff --git a/packages/uni-app-plus/src/view/framework/viewMethods.ts b/packages/uni-app-plus/src/view/framework/viewMethods.ts index db1eaf6a7..2c4a1359d 100644 --- a/packages/uni-app-plus/src/view/framework/viewMethods.ts +++ b/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) } -- GitLab