From 62918d287a404af8ceb4f464dbdbce861766cb03 Mon Sep 17 00:00:00 2001 From: qiang Date: Fri, 30 Jul 2021 18:16:09 +0800 Subject: [PATCH] feat(App): navigationBar --- .../uni-app-plus/dist/uni-app-service.es.js | 117 +++++++++++++++++ .../uni-app-plus/src/service/api/index.ts | 1 + .../src/service/api/ui/navigationBar.ts | 122 ++++++++++++++++++ packages/uni-app-plus/src/service/utils.ts | 7 + 4 files changed, 247 insertions(+) create mode 100644 packages/uni-app-plus/src/service/api/ui/navigationBar.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 dc9c9c265..b3ad58d41 100644 --- a/packages/uni-app-plus/dist/uni-app-service.es.js +++ b/packages/uni-app-plus/dist/uni-app-service.es.js @@ -4844,6 +4844,47 @@ var serviceContext = (function (vue) { desc: Object, }; + const FRONT_COLORS = ['#ffffff', '#000000']; + const API_SET_NAVIGATION_BAR_COLOR = 'setNavigationBarColor'; + const SetNavigationBarColorOptions = { + formatArgs: { + animation(animation, params) { + if (!animation) { + animation = { duration: 0, timingFunc: 'linear' }; + } + params.animation = { + duration: animation.duration || 0, + timingFunc: animation.timingFunc || 'linear', + }; + }, + }, + }; + const SetNavigationBarColorProtocol = { + frontColor: { + type: String, + required: true, + validator(frontColor) { + if (FRONT_COLORS.indexOf(frontColor) === -1) { + return `invalid frontColor "${frontColor}"`; + } + }, + }, + backgroundColor: { + type: String, + required: true, + }, + animation: Object, + }; + const API_SET_NAVIGATION_BAR_TITLE = 'setNavigationBarTitle'; + const SetNavigationBarTitleProtocol = { + title: { + type: String, + required: true, + }, + }; + const API_SHOW_NAVIGATION_BAR_LOADING = 'showNavigationBarLoading'; + const API_HIDE_NAVIGATION_BAR_LOADING = 'hideNavigationBarLoading'; + const API_PAGE_SCROLL_TO = 'pageScrollTo'; const PageScrollToProtocol = { scrollTop: Number, @@ -5603,6 +5644,12 @@ var serviceContext = (function (vue) { } return null; } + function getWebview(page) { + if (page) { + return page.$getAppWebview(); + } + return getCurrentWebview(); + } let pullDownRefreshWebview = null; function getPullDownRefreshWebview() { return pullDownRefreshWebview; @@ -8474,6 +8521,72 @@ var serviceContext = (function (vue) { UniServiceJSBridge.invokeViewMethod(PAGE_SCROLL_TO, options, pageId, resolve); }, PageScrollToProtocol, PageScrollToOptions); + const setNavigationBarTitle = defineAsyncApi(API_SET_NAVIGATION_BAR_TITLE, ({ __page__, title }, { resolve, reject }) => { + const webview = getWebview(__page__); + if (webview) { + const style = webview.getStyle(); + if (style && style.titleNView) { + webview.setStyle({ + titleNView: { + titleText: title + } + }); + } + resolve(); + } + else { + reject(); + } + }, SetNavigationBarTitleProtocol); + const showNavigationBarLoading = defineAsyncApi(API_SHOW_NAVIGATION_BAR_LOADING, (_, { resolve }) => { + plus.nativeUI.showWaiting('', { + modal: false + }); + resolve(); + }); + const hideNavigationBarLoading = defineAsyncApi(API_HIDE_NAVIGATION_BAR_LOADING, (_, { resolve }) => { + plus.nativeUI.closeWaiting(); + resolve(); + }); + function setPageMeta(statusBarStyle) { + const pages = getCurrentPages(); + if (!pages.length) { + return; + } + // 框架内部页面跳转会从这里获取style配置 + pages[pages.length - 1].$page.statusBarStyle = statusBarStyle; + } + const setNavigationBarColor = defineAsyncApi(API_SET_NAVIGATION_BAR_COLOR, ({ __page__, frontColor, backgroundColor }, { resolve, reject }) => { + const webview = getWebview(__page__); + if (webview) { + const styles = {}; + if (frontColor) { + styles.titleColor = frontColor; + } + if (backgroundColor) { + styles.backgroundColor = backgroundColor; + } + const statusBarStyle = frontColor === '#000000' ? 'dark' : 'light'; + plus.navigator.setStatusBarStyle(statusBarStyle); + // 用户调用api时同时改变当前页配置，这样在系统调用设置时，可以避免覆盖用户设置 + setPageMeta(statusBarStyle); + const style = webview.getStyle(); + if (style && style.titleNView) { + if (style.titleNView.autoBackButton) { + styles.backButton = styles.backButton || {}; + styles.backButton.color = frontColor; + } + webview.setStyle({ + titleNView: styles + }); + } + resolve(); + } + else { + reject(); + } + }, SetNavigationBarColorProtocol, SetNavigationBarColorOptions); + const providers = { oauth(callback) { plus.oauth.getServices((services) => { @@ -11093,6 +11206,10 @@ var serviceContext = (function (vue) { stopPullDownRefresh: stopPullDownRefresh, loadFontFace: loadFontFace, pageScrollTo: pageScrollTo, + setNavigationBarTitle: setNavigationBarTitle, + showNavigationBarLoading: showNavigationBarLoading, + hideNavigationBarLoading: hideNavigationBarLoading, + setNavigationBarColor: setNavigationBarColor, getProvider: getProvider, login: login, getUserInfo: getUserInfo, diff --git a/packages/uni-app-plus/src/service/api/index.ts b/packages/uni-app-plus/src/service/api/index.ts index fef8a81ac..8c33876ed 100644 --- a/packages/uni-app-plus/src/service/api/index.ts +++ b/packages/uni-app-plus/src/service/api/index.ts @@ -48,6 +48,7 @@ export * from './ui/startPullDownRefresh' export * from './ui/stopPullDownRefresh' export * from './ui/loadFontFace' export * from './ui/pageScrollTo' +export * from './ui/navigationBar' export * from './plugin/getProvider' export * from './plugin/oauth' diff --git a/packages/uni-app-plus/src/service/api/ui/navigationBar.ts b/packages/uni-app-plus/src/service/api/ui/navigationBar.ts new file mode 100644 index 000000000..c12125c75 --- /dev/null +++ b/packages/uni-app-plus/src/service/api/ui/navigationBar.ts @@ -0,0 +1,122 @@ +import { ComponentPublicInstance } from 'vue' +import { + defineAsyncApi, + API_SET_NAVIGATION_BAR_COLOR, + API_SET_NAVIGATION_BAR_TITLE, + API_SHOW_NAVIGATION_BAR_LOADING, + API_HIDE_NAVIGATION_BAR_LOADING, + API_TYPE_SET_NAVIGATION_BAR_COLOR, + API_TYPE_SET_NAVIGATION_BAR_TITLE, + API_TYPE_SHOW_NAVIGATION_BAR_LOADING, + API_TYPE_HIDE_NAVIGATION_BAR_LOADING, + SetNavigationBarColorOptions, + SetNavigationBarColorProtocol, + SetNavigationBarTitleProtocol, +} from '@dcloudio/uni-api' +import { getWebview } from '../../../service/utils' +import { StatusBarStyle } from '../../statusBar' + +interface SetNavigationBarTitleOptions + extends UniApp.SetNavigationBarTitleOptions { + __page__?: ComponentPublicInstance +} + +export const setNavigationBarTitle = + defineAsyncApi( + API_SET_NAVIGATION_BAR_TITLE, + ( + { __page__, title }: SetNavigationBarTitleOptions, + { resolve, reject } + ) => { + const webview = getWebview(__page__) + if (webview) { + const style = webview.getStyle() + if (style && style.titleNView) { + webview.setStyle({ + titleNView: { + titleText: title, + }, + }) + } + resolve() + } else { + reject() + } + }, + SetNavigationBarTitleProtocol + ) + +export const showNavigationBarLoading = + defineAsyncApi( + API_SHOW_NAVIGATION_BAR_LOADING, + (_, { resolve }) => { + plus.nativeUI.showWaiting('', { + modal: false, + }) + resolve() + } + ) + +export const hideNavigationBarLoading = + defineAsyncApi( + API_HIDE_NAVIGATION_BAR_LOADING, + (_, { resolve }) => { + plus.nativeUI.closeWaiting() + resolve() + } + ) + +function setPageMeta(statusBarStyle: StatusBarStyle) { + const pages = getCurrentPages() + if (!pages.length) { + return + } + // 框架内部页面跳转会从这里获取style配置 + pages[pages.length - 1].$page.statusBarStyle = statusBarStyle +} + +interface SetNavigationbarColorOptions + extends UniApp.SetNavigationbarColorOptions { + __page__?: ComponentPublicInstance +} + +export const setNavigationBarColor = + defineAsyncApi( + API_SET_NAVIGATION_BAR_COLOR, + ( + { __page__, frontColor, backgroundColor }: SetNavigationbarColorOptions, + { resolve, reject } + ) => { + const webview = getWebview(__page__) + if (webview) { + const styles: PlusWebviewWebviewTitleNViewStyles = {} + if (frontColor) { + styles.titleColor = frontColor + } + if (backgroundColor) { + styles.backgroundColor = backgroundColor + } + const statusBarStyle = frontColor === '#000000' ? 'dark' : 'light' + plus.navigator.setStatusBarStyle(statusBarStyle) + + // 用户调用api时同时改变当前页配置，这样在系统调用设置时，可以避免覆盖用户设置 + setPageMeta(statusBarStyle) + + const style = webview.getStyle() + if (style && style.titleNView) { + if (style.titleNView.autoBackButton) { + styles.backButton = styles.backButton || {} + styles.backButton.color = frontColor + } + webview.setStyle({ + titleNView: styles, + }) + } + resolve() + } else { + reject() + } + }, + SetNavigationBarColorProtocol, + SetNavigationBarColorOptions + ) diff --git a/packages/uni-app-plus/src/service/utils.ts b/packages/uni-app-plus/src/service/utils.ts index 83111749a..6960e3296 100644 --- a/packages/uni-app-plus/src/service/utils.ts +++ b/packages/uni-app-plus/src/service/utils.ts @@ -9,6 +9,13 @@ export function getCurrentWebview() { return null } +export function getWebview(page?: ComponentPublicInstance) { + if (page) { + return page.$getAppWebview!() + } + return getCurrentWebview() +} + let pullDownRefreshWebview: PlusWebviewWebviewObject | null = null export function getPullDownRefreshWebview() { -- GitLab