From c410398d1a648f0e8f41575422e2314f3f15ada3 Mon Sep 17 00:00:00 2001 From: guoenxuan Date: Fri, 14 Jun 2024 16:18:44 +0800 Subject: [PATCH 1/2] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E5=AF=BC=E8=88=AA?= =?UTF-8?q?=E6=A0=8F=E9=85=8D=E7=BD=AE=E6=97=A0=E6=95=88=E7=9A=84=E9=97=AE?= =?UTF-8?q?=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/api/apis/NativeApi.ts | 18 ++++- .../src/api/apis/index.ts | 48 ------------ .../src/api/apis/taro.ts | 5 ++ .../src/api/apis/ui/navigation-bar/index.ts | 28 +------ .../api/apis/ui/navigation-bar/style-event.ts | 77 +++++++++++++++++++ 5 files changed, 98 insertions(+), 78 deletions(-) create mode 100644 packages/taro-platform-harmony-hybrid/src/api/apis/ui/navigation-bar/style-event.ts diff --git a/packages/taro-platform-harmony-hybrid/src/api/apis/NativeApi.ts b/packages/taro-platform-harmony-hybrid/src/api/apis/NativeApi.ts index 7cb555c1ba09..f6a78bbff36f 100644 --- a/packages/taro-platform-harmony-hybrid/src/api/apis/NativeApi.ts +++ b/packages/taro-platform-harmony-hybrid/src/api/apis/NativeApi.ts @@ -212,11 +212,23 @@ export class NativeApi { return options } + // @ts-ignore + @(asyncAndRelease) + // @ts-ignore + // eslint-disable-next-line @typescript-eslint/no-unused-vars + setNavigationStyle (options: any): void {} + + // @ts-ignore + @(asyncAndRelease) + // @ts-ignore + // eslint-disable-next-line @typescript-eslint/no-unused-vars + setCapsuleState (options: any): void {} + // @ts-ignore @(syncAndRelease) - setNavigationStyle (options: any): any { - return options - } + // @ts-ignore + // eslint-disable-next-line @typescript-eslint/no-unused-vars + getCapsuleState (options: any): any {} // @ts-ignore @(syncAndRelease) diff --git a/packages/taro-platform-harmony-hybrid/src/api/apis/index.ts b/packages/taro-platform-harmony-hybrid/src/api/apis/index.ts index bbeafa50fc8c..2c46904c6a73 100644 --- a/packages/taro-platform-harmony-hybrid/src/api/apis/index.ts +++ b/packages/taro-platform-harmony-hybrid/src/api/apis/index.ts @@ -1,7 +1,3 @@ -import Taro from '@tarojs/api' - -import native from './NativeApi' - export * from './ad' export * from './ai' export * from './alipay' @@ -28,47 +24,3 @@ export * from './swan' export * from './ui' export * from './worker' export * from './wxml' - -if (typeof window !== 'undefined') { - // @ts-ignore - window.currentNavigation = {} -} - -Taro.eventCenter.on('__taroSetNavigationStyle', (style, textStyle, backgroundColor) => { - if (typeof window !== 'undefined') { - native.setNavigationStyle({ style: style, textStyle: textStyle, backgroundColor: backgroundColor }) - // @ts-ignore - Object.assign(window.currentNavigation, { - style, - textStyle, - backgroundColor, - }) - // @ts-ignore - if (typeof window.originCapsuleState !== 'undefined') { - // @ts-ignore - window.native?.setCapsuleState?.(window.originCapsuleState) - } - } -}) - -Taro.eventCenter.on('__taroEnterFullScreen', () => { - native.setNavigationStyle({ style: 'custom', textStyle: 'black', backgroundColor: '#000000' }) - // @ts-ignore - if (typeof window.originCapsuleState === 'undefined') { - // @ts-ignore - window.originCapsuleState = window.native?.getCapsuleState().visible - } - // @ts-ignore - window.native?.setCapsuleState?.(false) -}) - -Taro.eventCenter.on('__taroExitFullScreen', () => { - // @ts-ignore - const { style, textStyle, backgroundColor } = window.currentNavigation - native.setNavigationStyle({ style: style, textStyle: textStyle, backgroundColor: backgroundColor }) - // @ts-ignore - if (typeof window.originCapsuleState !== 'undefined') { - // @ts-ignore - window.native?.setCapsuleState?.(window.originCapsuleState) - } -}) diff --git a/packages/taro-platform-harmony-hybrid/src/api/apis/taro.ts b/packages/taro-platform-harmony-hybrid/src/api/apis/taro.ts index 43437e72fc00..b872555cc728 100644 --- a/packages/taro-platform-harmony-hybrid/src/api/apis/taro.ts +++ b/packages/taro-platform-harmony-hybrid/src/api/apis/taro.ts @@ -5,10 +5,12 @@ import { getApp, getCurrentInstance, getCurrentPages, + loadNavigationStyle, navigateBack, navigateTo, nextTick, redirectTo, + registerNavigationStyleHandler, reLaunch, switchTab, } from './index' @@ -22,6 +24,9 @@ const requirePlugin = () => { } } +loadNavigationStyle() +registerNavigationStyleHandler() + const { Behavior, getEnv, diff --git a/packages/taro-platform-harmony-hybrid/src/api/apis/ui/navigation-bar/index.ts b/packages/taro-platform-harmony-hybrid/src/api/apis/ui/navigation-bar/index.ts index 73bd5d1beb0c..ec1bc138d0a9 100644 --- a/packages/taro-platform-harmony-hybrid/src/api/apis/ui/navigation-bar/index.ts +++ b/packages/taro-platform-harmony-hybrid/src/api/apis/ui/navigation-bar/index.ts @@ -1,37 +1,10 @@ import Taro from '@tarojs/api' -import { addStyle } from '@tarojs/router/dist/style' import { setTitle } from '@tarojs/router/dist/utils/navigate' import native from '../../NativeApi' import { getParameterError, shouldBeObject } from '../../utils' import { MethodHandler } from '../../utils/handler' -/** - * 导航条与Web层叠布局，导航条可见情况下Web页面顶部空出一定高度的留白 - */ -function loadNavigationSytle () { - if (typeof window === 'undefined') { - return - } - // @ts-ignore - const naviHeight = window.navigationHeight ? window.navigationHeight : 0 - const css = ` -.taro_router .taro_page.taro_navigation_page { - padding-top: ${naviHeight}px; -} - -.taro-tabbar__container .taro_page.taro_navigation_page { - max-height: calc(100vh - ${naviHeight}px); -} - -.taro-tabbar__container .taro_page.taro_tabbar_page.taro_navigation_page { - max-height: calc(100vh - 50px - ${naviHeight}px); -}` - addStyle(css) -} - -loadNavigationSytle() - /** * 显示页面导航条加载图标 * @@ -149,3 +122,4 @@ export const setNavigationBarColor: typeof Taro.setNavigationBarColor = (options * @null_implementation */ export const hideHomeButton = () => Promise.resolve() +export { loadNavigationStyle, registerNavigationStyleHandler } from './style-event' diff --git a/packages/taro-platform-harmony-hybrid/src/api/apis/ui/navigation-bar/style-event.ts b/packages/taro-platform-harmony-hybrid/src/api/apis/ui/navigation-bar/style-event.ts new file mode 100644 index 000000000000..3c2c047b65b7 --- /dev/null +++ b/packages/taro-platform-harmony-hybrid/src/api/apis/ui/navigation-bar/style-event.ts @@ -0,0 +1,77 @@ +import Taro from '@tarojs/api' + +import native from '../../NativeApi' + +/** + * 导航条与Web层叠布局，导航条可见情况下Web页面顶部空出一定高度的留白 + */ +export function loadNavigationStyle () { + if (window === undefined) { + return + } + // @ts-ignore + const naviHeight = window.navigationHeight ? window.navigationHeight : 0 + const css = ` +.taro_router .taro_page.taro_navigation_page { + padding-top: ${naviHeight}px; +} + +.taro-tabbar__container .taro_page.taro_navigation_page { + max-height: calc(100vh - ${naviHeight}px); +} + +.taro-tabbar__container .taro_page.taro_tabbar_page.taro_navigation_page { + max-height: calc(100vh - 50px - ${naviHeight}px); +}` + const style = document.createElement('style') + style.innerHTML = css + document.getElementsByTagName('head')[0].appendChild(style) +} + +/** + * 监听导航栏设置、进入/退出全屏事件，更改导航栏样式以及显示/隐藏胶囊按钮 + */ +export function registerNavigationStyleHandler () { + if (window !== undefined) { + // @ts-ignore + window.currentNavigation = {} + } + + Taro.eventCenter.on('__taroSetNavigationStyle', (style, textStyle, backgroundColor) => { + if (window !== undefined) { + native.setNavigationStyle({ style: style, textStyle: textStyle, backgroundColor: backgroundColor }) + // @ts-ignore + Object.assign(window.currentNavigation, { + style, + textStyle, + backgroundColor, + }) + // @ts-ignore + const { originCapsuleVisible } = window + if (originCapsuleVisible !== undefined) { + native.setCapsuleState({ visible: originCapsuleVisible }) + } + } + }) + + Taro.eventCenter.on('__taroEnterFullScreen', () => { + native.setNavigationStyle({ style: 'custom', textStyle: 'black', backgroundColor: '#000000' }) + // @ts-ignore + if (window.originCapsuleVisible === undefined) { + // @ts-ignore + window.originCapsuleVisible = native.getCapsuleState().visible + } + native.setCapsuleState({ visible: false }) + }) + + Taro.eventCenter.on('__taroExitFullScreen', () => { + // @ts-ignore + const { style, textStyle, backgroundColor } = window.currentNavigation + native.setNavigationStyle({ style: style, textStyle: textStyle, backgroundColor: backgroundColor }) + // @ts-ignore + const { originCapsuleVisible } = window + if (originCapsuleVisible !== undefined) { + native.setCapsuleState({ visible: originCapsuleVisible }) + } + }) +} From 98e8a507ef5539bd5c77f5765d7ee138cc435412 Mon Sep 17 00:00:00 2001 From: guoenxuan Date: Mon, 17 Jun 2024 18:05:36 +0800 Subject: [PATCH 2/2] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8DgetLaunchOptionsSy?= =?UTF-8?q?nc=E6=97=A0=E8=BF=94=E5=9B=9E=E6=95=B0=E6=8D=AE=E7=9A=84?= =?UTF-8?q?=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/api/apis/taro.ts | 4 + .../src/runtime/apis/index.ts | 173 ------------------ 2 files changed, 4 insertions(+), 173 deletions(-) diff --git a/packages/taro-platform-harmony-hybrid/src/api/apis/taro.ts b/packages/taro-platform-harmony-hybrid/src/api/apis/taro.ts index b872555cc728..228451dafb61 100644 --- a/packages/taro-platform-harmony-hybrid/src/api/apis/taro.ts +++ b/packages/taro-platform-harmony-hybrid/src/api/apis/taro.ts @@ -5,6 +5,7 @@ import { getApp, getCurrentInstance, getCurrentPages, + initLaunchOptions, loadNavigationStyle, navigateBack, navigateTo, @@ -27,6 +28,9 @@ const requirePlugin = () => { loadNavigationStyle() registerNavigationStyleHandler() +// 同步小程序启动时的参数 +Taro.eventCenter.once('__taroRouterLaunch', initLaunchOptions) + const { Behavior, getEnv, diff --git a/packages/taro-platform-harmony-hybrid/src/runtime/apis/index.ts b/packages/taro-platform-harmony-hybrid/src/runtime/apis/index.ts index 028aa9146b5c..b6ddbf3a5468 100644 --- a/packages/taro-platform-harmony-hybrid/src/runtime/apis/index.ts +++ b/packages/taro-platform-harmony-hybrid/src/runtime/apis/index.ts @@ -1,9 +1,6 @@ import definition from '@tarojs/plugin-platform-harmony-hybrid/dist/definition.json' import isMatchWith from 'lodash-es/isMatchWith' import setWith from 'lodash-es/setWith' -import { initLaunchOptions } from 'src/api/apis' -import native from 'src/api/apis/NativeApi' -import { invertColor } from 'src/api/apis/utils/colorConvert' import Taro from './taro' @@ -30,173 +27,3 @@ export function canIUse (scheme = '') { } export default Taro - -// 同步小程序启动时的参数 -Taro.eventCenter.once('__taroRouterLaunch', initLaunchOptions) - -if (typeof window !== 'undefined') { - // @ts-ignore - window.currentNavigation = {} -} - - -// 更新导航栏状态 -Taro.eventCenter.on('__taroSetNavigationStyle', (style, textStyle, backgroundColor) => { - if (typeof window !== 'undefined') { - if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) { - // 当前处于深色模式，对textStyle和backgroundColor进行反转 - textStyle = textStyle === 'black' ? 'white' : 'black' - backgroundColor = invertColor(backgroundColor) - } - native.setNavigationStyle({ style, textStyle, backgroundColor }) - // @ts-ignore - Object.assign(window.currentNavigation, { - style, - textStyle, - backgroundColor, - }) - // @ts-ignore - if (typeof window.originCapsuleState !== 'undefined') { - // @ts-ignore - window.native?.setCapsuleState?.(window.originCapsuleState) - } - } -}) - - -// 进入全屏时隐藏导航栏和胶囊按钮 -Taro.eventCenter.on('__taroEnterFullScreen', () => { - native.setNavigationStyle({ - style: 'custom', - textStyle: 'black', - backgroundColor: '#000000', - }) - // @ts-ignore - if (typeof window.originCapsuleState === 'undefined') { - // @ts-ignore - window.originCapsuleState = window.native?.getCapsuleState().visible - } - // @ts-ignore - window.native?.setCapsuleState?.(false) -}) - - -// 退出全屏时恢复导航栏和胶囊按钮 -Taro.eventCenter.on('__taroExitFullScreen', () => { - // @ts-ignore - const { style, textStyle, backgroundColor } = window.currentNavigation - native.setNavigationStyle({ style, textStyle, backgroundColor }) - // @ts-ignore - if (typeof window.originCapsuleState !== 'undefined') { - // @ts-ignore - window.native?.setCapsuleState?.(window.originCapsuleState) - } -}) - - -// 根据是否有导航栏设置页面样式 -function loadNavigationSytle () { - if (typeof window === 'undefined') { - return - } - // @ts-ignore - const naviHeight = window.navigationHeight ? window.navigationHeight : 0 - const css = ` -.taro_router .taro_page.taro_navigation_page { - padding-top: ${naviHeight}px; -} - -.taro-tabbar__container .taro_page.taro_navigation_page { - max-height: calc(100vh - ${naviHeight}px); -} - -.taro-tabbar__container .taro_page.taro_tabbar_page.taro_navigation_page { - max-height: calc(100vh - 50px - ${naviHeight}px); -}` - - const style = document.createElement('style') - style.innerHTML = css - document.getElementsByTagName('head')[0].appendChild(style) -} - -loadNavigationSytle() - - -// 设置位置选择样式 -function loadChooseLocationStyle () { - const css = ` -.taro_choose_location { - display: flex; - position: fixed; - top: 100%; - z-index: 1; - flex-direction: column; - width: 100%; - height: 100%; - background-color: #fff; - transition: ease top 0.3s; -} -.taro_choose_location_bar { - display: flex; - flex: 0 60px; - height: 60px; - background-color: #ededed; - color: #090909; - align-items: center; -} -.taro_choose_location_back { - position: relative; - flex: 0 40px; - margin-left: 10px; - width: 25px; - height: 30px; -} -.taro_choose_location_back::before { - display: block; - position: absolute; - left: 0; - top: 0; - border: solid 15px; - border-color: transparent #090909 transparent transparent; - width: 0; - height: 0; - content: ""; -} -.taro_choose_location_back::after { - display: block; - position: absolute; - left: 3px; - top: 0; - border: solid 15px; - border-color: transparent #ededed transparent transparent; - width: 0; - height: 0; - content: ""; -} -.taro_choose_location_title { - flex: 1; - padding-left: 30px; - line-height: 60px; -} -.taro_choose_location_submit { - margin-right: 25px; - padding: 0; - border: none; - width: 75px; - height: 40px; - background-color: #08bf62; - line-height: 40px; - font-size: 20px; - color: #fff; -} -.taro_choose_location_frame { - flex: 1; -} -` - - const style = document.createElement('style') - style.innerHTML = css - document.getElementsByTagName('head')[0].appendChild(style) -} - -loadChooseLocationStyle()