diff --git a/examples/taro-list/config/dev.ts b/examples/taro-list/config/dev.ts
index c37eb434ba63..af34163774fc 100644
--- a/examples/taro-list/config/dev.ts
+++ b/examples/taro-list/config/dev.ts
@@ -1,4 +1,5 @@
 import type { UserConfigExport } from "@tarojs/cli";
+
 export default {
    logger: {
     quiet: false,
diff --git a/examples/taro-list/config/prod.ts b/examples/taro-list/config/prod.ts
index c9ba67fcd1e4..0dcb02c63274 100644
--- a/examples/taro-list/config/prod.ts
+++ b/examples/taro-list/config/prod.ts
@@ -1,4 +1,5 @@
 import type { UserConfigExport } from "@tarojs/cli";
+
 export default {
   mini: {},
   h5: {
diff --git a/packages/taro-h5/__tests__/ui/navigation.test.ts b/packages/taro-h5/__tests__/ui/navigation.test.ts
index e583df971dea..f72757b085f6 100644
--- a/packages/taro-h5/__tests__/ui/navigation.test.ts
+++ b/packages/taro-h5/__tests__/ui/navigation.test.ts
@@ -1,5 +1,7 @@
 import * as Taro from '@tarojs/taro-h5'
 
+import { buildApp } from '../utils'
+
 const mockConsole = require('jest-mock-console')
 
 describe('navigation', () => {
@@ -73,4 +75,25 @@ describe('navigation', () => {
         })
     })
   })
+  describe('showNavigationBarLoading / hideNavigationBarLoading', () => {
+    beforeEach(() => {
+      mockConsole()
+      buildApp()
+    })
+
+    test('should be able to showNavigationBarLoading / hideNavigationBarLoading', done => {
+      Taro.showNavigationBarLoading().then(res => {
+        expect(res.errMsg).toBe('showNavigationBarLoading:ok')
+        const loadingElement = document.querySelector('.taro-navigation-bar-loading-show')
+        expect(loadingElement).toBeTruthy()
+  
+        Taro.hideNavigationBarLoading().then(res => {
+          expect(res.errMsg).toBe('hideNavigationBarLoading:ok')
+          const loadingElement = document.querySelector('.taro-navigation-bar-loading-show')
+          expect(loadingElement).toBeFalsy()
+          done()
+        })
+      })
+    })
+  })
 })
diff --git a/packages/taro-h5/src/api/ui/navigation-bar/index.ts b/packages/taro-h5/src/api/ui/navigation-bar/index.ts
index b82881d88777..51a28d0923a5 100644
--- a/packages/taro-h5/src/api/ui/navigation-bar/index.ts
+++ b/packages/taro-h5/src/api/ui/navigation-bar/index.ts
@@ -1,11 +1,19 @@
 import Taro from '@tarojs/api'
-import { setNavigationBarStyle, setTitle } from '@tarojs/router'
+import { setNavigationBarLoading, setNavigationBarStyle, setTitle } from '@tarojs/router'
 
 import { getParameterError, shouldBeObject, temporarilyNotSupport } from '../../../utils'
 import { MethodHandler } from '../../../utils/handler'
 
 // 导航栏
-export const showNavigationBarLoading = /* @__PURE__ */ temporarilyNotSupport('showNavigationBarLoading')
+/**
+ * 展示导航栏 loading 状态
+*/
+export function showNavigationBarLoading (options: Taro.showNavigationBarLoading.Option = {}) {
+  const { success, fail, complete } = options
+  const handle = new MethodHandler({ name: 'showNavigationBarLoading', success, fail, complete })
+  setNavigationBarLoading(true)
+  return handle.success()
+}
 
 export function setNavigationBarTitle (options?: Taro.setNavigationBarTitle.Option) {
   // options must be an Object
@@ -48,5 +56,14 @@ export const setNavigationBarColor: typeof Taro.setNavigationBarColor = (options
   return handle.success()
 }
 
-export const hideNavigationBarLoading = /* @__PURE__ */ temporarilyNotSupport('hideNavigationBarLoading')
+/**
+ * 隐藏导航栏 loading 状态
+*/
+export function hideNavigationBarLoading (options: Taro.hideNavigationBarLoading.Option = {}) {
+  const { success, fail, complete } = options
+  const handle = new MethodHandler({ name: 'hideNavigationBarLoading', success, fail, complete })
+  setNavigationBarLoading(false)
+  return handle.success()
+}
+
 export const hideHomeButton = /* @__PURE__ */ temporarilyNotSupport('hideHomeButton')
diff --git a/packages/taro-platform-harmony-hybrid/build/config/harmony-definition.json b/packages/taro-platform-harmony-hybrid/build/config/harmony-definition.json
index c686debaf29d..dcbcdffbc61d 100644
--- a/packages/taro-platform-harmony-hybrid/build/config/harmony-definition.json
+++ b/packages/taro-platform-harmony-hybrid/build/config/harmony-definition.json
@@ -234,6 +234,13 @@
     "NfcB": false,
     "NfcF": false,
     "NfcV": false,
+    "NodesRef": {
+      "boundingClientRect": true,
+      "context": true,
+      "node": true,
+      "fields": true,
+      "scrollOffset": true
+    },
     "OffscreenCanvas": false,
     "Path2D": true,
     "Performance": false,
@@ -1232,6 +1239,12 @@
           "TRACE": true,
           "CONNECT": true
         },
+        "dataType": {
+          "json": true,
+          "text": true,
+          "base64": true,
+          "arraybuffer": true
+        },
         "responseType": {
           "text": true,
           "arraybuffer": true
@@ -2112,6 +2125,7 @@
     },
     "rtc-room": false,
     "rtc-room-item": false,
+    "script.ts": false,
     "scroll-view": {
       "scroll-x": true,
       "scroll-y": true,
@@ -2157,7 +2171,8 @@
       "refresher-two-level-close-threshold": false,
       "refresher-two-level-scroll-enabled": false,
       "refresher-ballistic-refresh-enabled": false,
-      "refresher-two-level-pinned": false
+      "refresher-two-level-pinned": false,
+      "using-sticky": false
     },
     "share-element": {
       "key": false,
diff --git a/packages/taro-platform-harmony-hybrid/src/api/apis/NativeApi.ts b/packages/taro-platform-harmony-hybrid/src/api/apis/NativeApi.ts
new file mode 100644
index 000000000000..0689a405f067
--- /dev/null
+++ b/packages/taro-platform-harmony-hybrid/src/api/apis/NativeApi.ts
@@ -0,0 +1,398 @@
+// @proxyClassSign('')
+class NativeApi {
+  // @ts-ignore
+  @window.MethodChannel.jsBridgeMode({ isAsync: false, autoRelease: true })
+  getWindowInfo (): any {
+    return ''
+  }
+
+  // @ts-ignore
+  @window.MethodChannel.jsBridgeMode({ isAsync: false, autoRelease: true })
+  getSystemInfoSync (): any {
+    return ''
+  }
+
+  // @ts-ignore
+  @window.MethodChannel.jsBridgeMode({ isAsync: false, autoRelease: true })
+  getSystemSetting (): any {
+    return ''
+  }
+
+  // @ts-ignore
+  @window.MethodChannel.jsBridgeMode({ isAsync: false, autoRelease: true })
+  getAppBaseInfo (): any {
+    return ''
+  }
+
+  // @ts-ignore
+  @window.MethodChannel.jsBridgeMode({ isAsync: false, autoRelease: true })
+  getAppAuthorizeSetting (): any {
+    return ''
+  }
+
+  // @ts-ignore
+  @window.MethodChannel.jsBridgeMode({ isAsync: false, autoRelease: true })
+  navigateToMiniProgram (options: any) {
+    return options
+  }
+
+  // @ts-ignore
+  @window.MethodChannel.jsBridgeMode({ isAsync: false, autoRelease: true })
+  setNavigationBarColor (options: any) {
+    return options
+  }
+
+  // @ts-ignore
+  @window.MethodChannel.jsBridgeMode({ isAsync: false, autoRelease: true })
+  getMenuButtonBoundingClientRect (): any {
+    return ''
+  }
+
+  // @ts-ignore
+  @window.MethodChannel.jsBridgeMode({ isAsync: false, autoRelease: true })
+  request (options: any): any {
+    return options
+  }
+
+  // @ts-ignore
+  @window.MethodChannel.jsBridgeMode({ isAsync: false, autoRelease: true })
+  saveDataUrlToFile (options: any): any {
+    return options
+  }
+
+  // @ts-ignore
+  @window.MethodChannel.jsBridgeMode({ isAsync: false, autoRelease: true })
+  copyFileToSandboxCache (options: any): any {
+    return options
+  }
+
+  // @ts-ignore
+  @window.MethodChannel.jsBridgeMode({ isAsync: false, autoRelease: true })
+  saveImageToPhotosAlbum (options: any): any {
+    return options
+  }
+
+  // @ts-ignore
+  @window.MethodChannel.jsBridgeMode({ isAsync: false, autoRelease: true })
+  chooseMediaAssets (options: any): any {
+    return options
+  }
+
+  // @ts-ignore
+  @window.MethodChannel.jsBridgeMode({ isAsync: false, autoRelease: true })
+  getVideoInfo (options: any): any {
+    return options
+  }
+
+  // @ts-ignore
+  @window.MethodChannel.jsBridgeMode({ isAsync: false, autoRelease: true })
+  getImageInfo (options: any): any {
+    return options
+  }
+
+  // @ts-ignore
+  @window.MethodChannel.jsBridgeMode({ isAsync: false, autoRelease: true })
+  getLocation (options: any): any {
+    return options
+  }
+
+  // @ts-ignore
+  @window.MethodChannel.jsBridgeMode({ isAsync: false, autoRelease: true })
+  login (options: any): any {
+    return options
+  }
+
+  // @ts-ignore
+  @window.MethodChannel.jsBridgeMode({ isAsync: false, autoRelease: true })
+  getUserInfo (options: any): any {
+    return options
+  }
+
+  // @ts-ignore
+  @window.MethodChannel.jsBridgeMode({ isAsync: true, autoRelease: false })
+  openSetting (options: any): any {
+    return options
+  }
+
+  // @ts-ignore
+  @window.MethodChannel.jsBridgeMode({ isAsync: true, autoRelease: false })
+  getSetting (options: any): any {
+    return options
+  }
+
+  // @ts-ignore
+  @window.MethodChannel.jsBridgeMode({ isAsync: false, autoRelease: true })
+  setKeepScreenOn (options: any): any {
+    return options
+  }
+
+  // @ts-ignore
+  @window.MethodChannel.jsBridgeMode({ isAsync: true, autoRelease: false })
+  onUserCaptureScreen (options: any): any {
+    return options
+  }
+
+  // @ts-ignore
+  @window.MethodChannel.jsBridgeMode({ isAsync: false, autoRelease: true })
+  hideKeyboard (options?: any): any {
+    return options
+  }
+
+  // @ts-ignore
+  @window.MethodChannel.jsBridgeMode({ isAsync: false, autoRelease: true })
+  makePhoneCall (options: any): any {
+    return options
+  }
+
+  // NativeAContextApi
+  // @ts-ignore
+  @window.MethodChannel.jsBridgeMode({ isAsync: false, autoRelease: true })
+  createInnerAudioContext (): any {
+  }
+
+  // @ts-ignore
+  @window.MethodChannel.jsBridgeMode({ isAsync: false, autoRelease: true })
+  innerAudioStop (option: any, _: number) {
+    return option
+  }
+
+  // @ts-ignore
+  @window.MethodChannel.jsBridgeMode({ isAsync: false, autoRelease: true })
+  innerAudioPlay (option: any, _: number) {
+    return option
+  }
+
+  // @ts-ignore
+  @window.MethodChannel.jsBridgeMode({ isAsync: false, autoRelease: false })
+  innerAudioOnPlay (option: any, _: number) {
+    return option
+  }
+
+  // @ts-ignore
+  @window.MethodChannel.jsBridgeMode({ isAsync: false, autoRelease: false })
+  innerAudioOnStop (option: any, _: number) {
+    return option
+  }
+
+  // @ts-ignore
+  @window.MethodChannel.jsBridgeMode({ isAsync: false, autoRelease: false })
+  innerAudioOnError (option: any, _: number) {
+    return option
+  }
+
+  // @ts-ignore
+  @window.MethodChannel.jsBridgeMode({ isAsync: false, autoRelease: false })
+  innerAudioOnEnded (option: any, _: number) {
+    return option
+  }
+
+  // @ts-ignore
+  @window.MethodChannel.jsBridgeMode({ isAsync: false, autoRelease: true })
+  getAudioContextVolume (option: any, _: number) {
+    return option
+  }
+
+  // @ts-ignore
+  @window.MethodChannel.jsBridgeMode({ isAsync: false, autoRelease: true })
+  setAudioContextVolume (option: any, _: number) {
+    return option
+  }
+
+  // @ts-ignore
+  @window.MethodChannel.jsBridgeMode({ isAsync: false, autoRelease: true })
+  getAudioContextStartTime (option: any, _: number) {
+    return option
+  }
+
+  // @ts-ignore
+  @window.MethodChannel.jsBridgeMode({ isAsync: false, autoRelease: true })
+  setAudioContextStartTime (option: any, _: number) {
+    return option
+  }
+
+  // @ts-ignore
+  @window.MethodChannel.jsBridgeMode({ isAsync: false, autoRelease: true })
+  getAudioContextPlaybackRate (option: any, _: number) {
+    return option
+  }
+
+  // @ts-ignore
+  @window.MethodChannel.jsBridgeMode({ isAsync: false, autoRelease: true })
+  setAudioContextPlaybackRate (option: any, _: number) {
+    return option
+  }
+
+  // @ts-ignore
+  @window.MethodChannel.jsBridgeMode({ isAsync: false, autoRelease: true })
+  getAudioContextPaused (option: any, _: number) {
+    return option
+  }
+
+  // @ts-ignore
+  @window.MethodChannel.jsBridgeMode({ isAsync: false, autoRelease: true })
+  setAudioContextPaused (option: any, _: number) {
+    return option
+  }
+
+  // @ts-ignore
+  @window.MethodChannel.jsBridgeMode({ isAsync: false, autoRelease: true })
+  getAudioContextObeyMuteSwitch (option: any, _: number) {
+    return option
+  }
+
+  // @ts-ignore
+  @window.MethodChannel.jsBridgeMode({ isAsync: false, autoRelease: true })
+  setAudioContextObeyMuteSwitch (option: any, _: number) {
+    return option
+  }
+
+  // @ts-ignore
+  @window.MethodChannel.jsBridgeMode({ isAsync: false, autoRelease: true })
+  getAudioContextLoop (option: any, _: number) {
+    return option
+  }
+
+  // @ts-ignore
+  @window.MethodChannel.jsBridgeMode({ isAsync: false, autoRelease: true })
+  setAudioContextLoop (option: any, _: number) {
+    return option
+  }
+
+  // @ts-ignore
+  @window.MethodChannel.jsBridgeMode({ isAsync: false, autoRelease: true })
+  getAudioContextDuration (option: any, _: number) {
+    return option
+  }
+
+  // @ts-ignore
+  @window.MethodChannel.jsBridgeMode({ isAsync: false, autoRelease: true })
+  setAudioContextDuration (option: any, _: number) {
+    return option
+  }
+
+  // @ts-ignore
+  @window.MethodChannel.jsBridgeMode({ isAsync: false, autoRelease: true })
+  getAudioContextCurrentTime (option: any, _: number) {
+    return option
+  }
+
+  // @ts-ignore
+  @window.MethodChannel.jsBridgeMode({ isAsync: false, autoRelease: true })
+  setAudioContextCurrentTime (option: any, _: number) {
+    return option
+  }
+
+  // @ts-ignore
+  @window.MethodChannel.jsBridgeMode({ isAsync: false, autoRelease: true })
+  getAudioContextBuffered (option: any, _: number) {
+    return option
+  }
+
+  // @ts-ignore
+  @window.MethodChannel.jsBridgeMode({ isAsync: false, autoRelease: true })
+  setAudioContextBuffered (option: any, _: number) {
+    return option
+  }
+
+  // @ts-ignore
+  @window.MethodChannel.jsBridgeMode({ isAsync: false, autoRelease: true })
+  getAudioContextAutoplay (option: any, _: number) {
+    return option
+  }
+
+  // @ts-ignore
+  @window.MethodChannel.jsBridgeMode({ isAsync: false, autoRelease: true })
+  setAudioContextAutoplay (option: any, _: number) {
+    return option
+  }
+
+  // @ts-ignore
+  @window.MethodChannel.jsBridgeMode({ isAsync: false, autoRelease: true })
+  getAudioContextSrc (option: any, _: number) {
+    return option
+  }
+
+  // @ts-ignore
+  @window.MethodChannel.jsBridgeMode({ isAsync: false, autoRelease: true })
+  setAudioContextSrc (option: any, _: number) {
+    return option
+  }
+
+  // NativeUploadFile
+  // @ts-ignore
+  @window.MethodChannel.jsBridgeMode({ isAsync: true, autoRelease: false })
+  uploadFile (options: any): any {
+    return options
+  }
+
+  // @ts-ignore
+  @window.MethodChannel.jsBridgeMode({ isAsync: false, autoRelease: true })
+  downloadFile (options: any): any {
+    return options
+  }
+
+  // @ts-ignore
+  @window.MethodChannel.jsBridgeMode({ isAsync: false, autoRelease: true })
+  abort (option: any, _: number): any {
+    return option
+  }
+
+  // @ts-ignore
+  @window.MethodChannel.jsBridgeMode({ isAsync: false, autoRelease: true })
+  offHeadersReceived (option: any, _: number): any {
+    return option
+  }
+
+  // @ts-ignore
+  @window.MethodChannel.jsBridgeMode({ isAsync: false, autoRelease: true })
+  offProgressUpdate (option: any, _: number): any {
+    return option
+  }
+
+  // @ts-ignore
+  @window.MethodChannel.jsBridgeMode({ isAsync: true, autoRelease: false })
+  onHeadersReceived (option: any, _: number): any {
+    return option
+  }
+
+  // @ts-ignore
+  @window.MethodChannel.jsBridgeMode({ isAsync: true, autoRelease: false })
+  onProgressUpdate (option: any, _: number): any {
+    return option
+  }
+
+  // NativeFileSystemManager
+  // @ts-ignore
+  @window.MethodChannel.jsBridgeMode({ isAsync: false, autoRelease: true })
+  getFileManager (): any {}
+
+  // @ts-ignore
+  @window.MethodChannel.jsBridgeMode({ isAsync: true, autoRelease: false })
+  access (option: any): any {
+    return option
+  }
+
+  // @ts-ignore
+  @window.MethodChannel.jsBridgeMode({ isAsync: true, autoRelease: false })
+  getFileInfo (option: any): any {
+    return option
+  }
+
+  // @ts-ignore
+  @window.MethodChannel.jsBridgeMode({ isAsync: true, autoRelease: false })
+  readFile (option: any): any {
+    return option
+  }
+
+  // @ts-ignore
+  @window.MethodChannel.jsBridgeMode({ isAsync: false, autoRelease: true })
+  readFileSync (option: any): any {
+    return option
+  }
+}
+
+const native = new NativeApi()
+
+export default native
+
+
diff --git a/packages/taro-platform-harmony-hybrid/src/api/apis/base/system.ts b/packages/taro-platform-harmony-hybrid/src/api/apis/base/system.ts
index 3a3edea558b5..17a7ebc3d5eb 100644
--- a/packages/taro-platform-harmony-hybrid/src/api/apis/base/system.ts
+++ b/packages/taro-platform-harmony-hybrid/src/api/apis/base/system.ts
@@ -1,7 +1,7 @@
 import Taro from '@tarojs/api'
 
+import native from '../NativeApi'
 import { MethodHandler } from '../utils/handler'
-
 /**
  * 获取窗口信息
  *
@@ -11,7 +11,6 @@ import { MethodHandler } from '../utils/handler'
  * bottom, height, left, right, top, width]]
  */
 export const getWindowInfo: typeof Taro.getWindowInfo = () => {
-  // @ts-ignore
   const info = native.getWindowInfo()
   const windowInfo: Taro.getWindowInfo.Result = {
     pixelRatio: info.pixelRatio,
@@ -53,7 +52,6 @@ export const getSystemSetting: typeof Taro.getSystemSetting = () => {
   if (currentTime - lastGetSystemSettingTime < 500) {
     return lastSystemSettingResult
   }
-  // @ts-ignore
   const info = native.getSystemSetting()
   lastSystemSettingResult.bluetoothEnabled = info.bluetoothEnabled
   lastSystemSettingResult.locationEnabled = info.locationEnabled
@@ -70,9 +68,7 @@ export const getSystemSetting: typeof Taro.getSystemSetting = () => {
  * @__return [SDKVersion, enableDebug, host[appId], language, version, theme[dark, light]]
  */
 export const getAppBaseInfo: typeof Taro.getAppBaseInfo = () => {
-  // @ts-ignore
   const info = native.getAppBaseInfo()
-  // @ts-ignore
   const sdkApiVersion = native.getSystemInfoSync().ohosAPILevel.toString()
   const appBaseInfo: Taro.getAppBaseInfo.Result = {
     SDKVersion: sdkApiVersion,
@@ -94,7 +90,6 @@ export const getAppBaseInfo: typeof Taro.getAppBaseInfo = () => {
  * microphoneAuthorized, notificationAuthorized, phoneCalendarAuthorized]
  */
 export const getAppAuthorizeSetting: typeof Taro.getAppAuthorizeSetting = () => {
-  // @ts-ignore
   const info = native.getAppAuthorizeSetting()
   // @ts-ignore
   const appAuthorizeSetting: Taro.getAppAuthorizeSetting.Result = {
@@ -130,7 +125,6 @@ export const getAppAuthorizeSetting: typeof Taro.getAppAuthorizeSetting = () =>
  * locationReducedAccuracy, theme[dark, light], host[appId], enableDebug, deviceOrientation[portrait, landscape]]
  */
 export const getSystemInfoSync: typeof Taro.getSystemInfoSync = () => {
-  // @ts-ignore
   const info = native.getSystemInfoSync()
   const windowInfo = getWindowInfo()
   const systemSetting = getSystemSetting()
diff --git a/packages/taro-platform-harmony-hybrid/src/api/apis/canvas/CanvasContext.ts b/packages/taro-platform-harmony-hybrid/src/api/apis/canvas/CanvasContext.ts
index a8e55c697e8c..da8ccee7999d 100644
--- a/packages/taro-platform-harmony-hybrid/src/api/apis/canvas/CanvasContext.ts
+++ b/packages/taro-platform-harmony-hybrid/src/api/apis/canvas/CanvasContext.ts
@@ -1,5 +1,7 @@
 import Taro, { CanvasGradient } from '@tarojs/api'
 
+import native from '../NativeApi'
+
 interface IAction {
   func: (...arr: any[]) => void
   args: any[]
@@ -17,9 +19,9 @@ const TextBaseLineMap: Record<keyof Taro.CanvasContext.TextBaseline, CanvasTextB
 
 /**
  * canvas 组件的绘图上下文
- * 
+ *
  * @canUse CanvasContext
- * @__class 
+ * @__class
  * [arc, arcTo, beginPath, bezierCurveTo, clearRect, clip, closePath, createCircularGradient, createLinearGradient, createPattern,\
  * draw, drawImage, fill, fillRect, fillText, lineTo, measureText, moveTo, quadraticCurveTo, rect,\
  * restore, rotate, save, scale, setFillStyle, setFontSize, setGlobalAlpha, setLineCap, setLineDash,\
@@ -321,7 +323,6 @@ export class CanvasContext implements Taro.CanvasContext {
   drawImage (imageResource: string, ...extra: any[]): void {
     // 如果是本地file://开头的文件路径，需要先转换为internal://开头的沙箱路径
     if (imageResource.startsWith('file://')) {
-      // @ts-ignore
       imageResource = native.copyFileToSandboxCache(imageResource).internalCachePath
     }
     type TExtra = [number, number]
@@ -502,4 +503,4 @@ export class CanvasContext implements Taro.CanvasContext {
   createLinearGradient (x0: number, y0: number, x1: number, y1: number): CanvasGradient {
     return this.ctx.createLinearGradient(x0, y0, x1, y1)
   }
-}
\ No newline at end of file
+}
diff --git a/packages/taro-platform-harmony-hybrid/src/api/apis/comments.ts b/packages/taro-platform-harmony-hybrid/src/api/apis/comments.ts
index 345a85628a0d..026d7cd28e32 100644
--- a/packages/taro-platform-harmony-hybrid/src/api/apis/comments.ts
+++ b/packages/taro-platform-harmony-hybrid/src/api/apis/comments.ts
@@ -2396,6 +2396,13 @@
  * @__class [observe, disconnect]
  */
 
+/**
+ * NodesRef 对象，用于获取 WXML 节点信息的对象
+ * 
+ * @canUse NodesRef
+ * @__class [boundingClientRect, context, node, fields, scrollOffset]
+ */
+
 /**
  * Path2D
  * 
diff --git a/packages/taro-platform-harmony-hybrid/src/api/apis/device/keyBoard/hideKeyboard.ts b/packages/taro-platform-harmony-hybrid/src/api/apis/device/keyBoard/hideKeyboard.ts
index 2d0c9a00531f..efc5f26b5a5f 100644
--- a/packages/taro-platform-harmony-hybrid/src/api/apis/device/keyBoard/hideKeyboard.ts
+++ b/packages/taro-platform-harmony-hybrid/src/api/apis/device/keyBoard/hideKeyboard.ts
@@ -1,11 +1,12 @@
 import Taro from '@tarojs/taro'
 
+import native from '../../NativeApi'
 import { shouldBeObject } from '../../utils'
 import { MethodHandler } from '../../utils/handler'
 
 /**
  * 在input、textarea等focus拉起键盘之后，手动调用此接口收起键盘
- * 
+ *
  * @canUse hideKeyboard
  */
 export const hideKeyboard: typeof Taro.hideKeyboard = (options) => {
@@ -21,7 +22,6 @@ export const hideKeyboard: typeof Taro.hideKeyboard = (options) => {
 
   return new Promise((resolve, reject) => {
     try {
-      // @ts-ignore
       native.hideKeyboard()
       const result: TaroGeneral.CallbackResult = {
         errMsg: `${name}:ok`,
diff --git a/packages/taro-platform-harmony-hybrid/src/api/apis/device/phone/phone.ts b/packages/taro-platform-harmony-hybrid/src/api/apis/device/phone/phone.ts
index 1d3f4092f71c..deedc99196b2 100644
--- a/packages/taro-platform-harmony-hybrid/src/api/apis/device/phone/phone.ts
+++ b/packages/taro-platform-harmony-hybrid/src/api/apis/device/phone/phone.ts
@@ -1,11 +1,12 @@
 import Taro from '@tarojs/api'
 
+import native from '../../NativeApi'
 import { getParameterError, shouldBeObject } from '../../utils'
 import { MethodHandler } from '../../utils/handler'
 
 /**
  * 拨打电话
- * 
+ *
  * @canUse makePhoneCall
  * @__object [phoneNumber]
  */
@@ -37,7 +38,6 @@ export const makePhoneCall: typeof Taro.makePhoneCall = (options) => {
   }
 
   return new Promise((resolve, reject) => {
-    // @ts-ignore
     native.makePhoneCall({
       phoneNumber: phoneNumber,
       success: (res: any) => {
diff --git a/packages/taro-platform-harmony-hybrid/src/api/apis/device/screen/onUserCaptureScreen.ts b/packages/taro-platform-harmony-hybrid/src/api/apis/device/screen/onUserCaptureScreen.ts
index df5e19e60cd5..660485aca13c 100644
--- a/packages/taro-platform-harmony-hybrid/src/api/apis/device/screen/onUserCaptureScreen.ts
+++ b/packages/taro-platform-harmony-hybrid/src/api/apis/device/screen/onUserCaptureScreen.ts
@@ -1,11 +1,12 @@
 import Taro from '@tarojs/taro'
 
+import native from '../../NativeApi'
 import { shouldBeFunction } from '../../utils'
 import { taroCallbackMap } from '../../utils/callbakMap'
 
 /**
  * 监听用户主动截屏事件，用户使用系统截屏按键截屏时触发此事件
- * 
+ *
  * @canUse onUserCaptureScreen
  */
 export const onUserCaptureScreen: typeof Taro.onUserCaptureScreen = (callback) => {
@@ -18,7 +19,7 @@ export const onUserCaptureScreen: typeof Taro.onUserCaptureScreen = (callback) =
     console.error(res.errMsg)
     return
   }
-  
+
   try {
     if (!taroCallbackMap.has(callback)) {
       // eslint-disable-next-line no-inner-declarations
@@ -29,7 +30,6 @@ export const onUserCaptureScreen: typeof Taro.onUserCaptureScreen = (callback) =
         callback(result)
       }
       taroCallbackMap.set(callback, newCallback)
-      // @ts-ignore
       native.onUserCaptureScreen(newCallback)
     }
   } catch (exception) {
diff --git a/packages/taro-platform-harmony-hybrid/src/api/apis/device/screen/setKeepScreenOn.ts b/packages/taro-platform-harmony-hybrid/src/api/apis/device/screen/setKeepScreenOn.ts
index 3a18dac397bc..d9634904187a 100644
--- a/packages/taro-platform-harmony-hybrid/src/api/apis/device/screen/setKeepScreenOn.ts
+++ b/packages/taro-platform-harmony-hybrid/src/api/apis/device/screen/setKeepScreenOn.ts
@@ -1,11 +1,12 @@
 import Taro from '@tarojs/taro'
 
+import native from '../../NativeApi'
 import { getParameterError, shouldBeObject } from '../../utils'
 import { MethodHandler } from '../../utils/handler'
 
 /**
  * 设置是否保持常亮状态
- * 
+ *
  * @canUse setKeepScreenOn
  * @__object [keepScreenOn]
  */
@@ -34,7 +35,6 @@ export const setKeepScreenOn: typeof Taro.setKeepScreenOn = (options) => {
         { resolve, reject }
       )
     }
-    // @ts-ignore
     native.setKeepScreenOn({
       keepScreenOn: keepScreenOn,
       success: (res: any) => {
diff --git a/packages/taro-platform-harmony-hybrid/src/api/apis/files/getFileSystemManager.ts b/packages/taro-platform-harmony-hybrid/src/api/apis/files/getFileSystemManager.ts
index db138f89d7a7..d459e4c32d36 100644
--- a/packages/taro-platform-harmony-hybrid/src/api/apis/files/getFileSystemManager.ts
+++ b/packages/taro-platform-harmony-hybrid/src/api/apis/files/getFileSystemManager.ts
@@ -1,11 +1,11 @@
 import Taro from '@tarojs/taro'
 
+import { NativeFileSystemManager } from '../interface/NativeFileSystemManager'
 /**
  * 获取全局唯一的文件管理器
- * 
+ *
  * @canUse getFileSystemManager
  */
 export const getFileSystemManager: typeof Taro.getFileSystemManager = () => {
-  // @ts-ignore
-  return native.getFileSystemManager()
+  return NativeFileSystemManager.getFileSystemManager()
 }
diff --git a/packages/taro-platform-harmony-hybrid/src/api/apis/interface/NativeAContextApi.ts b/packages/taro-platform-harmony-hybrid/src/api/apis/interface/NativeAContextApi.ts
new file mode 100644
index 000000000000..1529b400fc22
--- /dev/null
+++ b/packages/taro-platform-harmony-hybrid/src/api/apis/interface/NativeAContextApi.ts
@@ -0,0 +1,203 @@
+import Taro from '@tarojs/api'
+
+import native from '../NativeApi'
+
+export class NativeInnerAudioContext implements Taro.InnerAudioContext {
+  private objectId: number
+
+  constructor ()  {
+    this.objectId = native.createInnerAudioContext()
+  }
+
+  get volume () {
+    return native.getAudioContextVolume({}, this.objectId)
+  }
+
+  set volume (option: any) {
+    native.setAudioContextVolume(option, this.objectId)
+  }
+
+  get startTime () {
+    return native.getAudioContextStartTime({}, this.objectId)
+  }
+
+  set startTime (option: any) {
+    native.setAudioContextStartTime(option, this.objectId)
+  }
+
+  get playbackRate () {
+    return native.getAudioContextPlaybackRate({}, this.objectId)
+  }
+
+  set playbackRate (option: any) {
+    native.setAudioContextPlaybackRate(option, this.objectId)
+  }
+
+  get paused () {
+    return native.getAudioContextPaused({}, this.objectId)
+  }
+
+  set paused (option: any) {
+    native.setAudioContextPaused(option, this.objectId)
+  }
+
+  get obeyMuteSwitch () {
+    return native.getAudioContextObeyMuteSwitch({}, this.objectId)
+  }
+
+  set obeyMuteSwitch (option: any) {
+    native.setAudioContextObeyMuteSwitch(option, this.objectId)
+  }
+
+  get loop () {
+    return native.getAudioContextLoop({}, this.objectId)
+  }
+
+  set loop (option: any) {
+    native.setAudioContextLoop(option, this.objectId)
+  }
+
+  get duration () {
+    return native.getAudioContextDuration({}, this.objectId)
+  }
+
+  set duration (option: any) {
+    native.setAudioContextDuration(option, this.objectId)
+  }
+
+  get currentTime () {
+    return native.getAudioContextCurrentTime({}, this.objectId)
+  }
+
+  set currentTime (option: any) {
+    native.setAudioContextCurrentTime(option, this.objectId)
+  }
+
+  get buffered () {
+    return native.getAudioContextBuffered({}, this.objectId)
+  }
+
+  set buffered (option: any) {
+    native.setAudioContextBuffered(option, this.objectId)
+  }
+
+  get autoplay () {
+    return native.getAudioContextAutoplay({}, this.objectId)
+  }
+
+  set autoplay (option: any) {
+    native.setAudioContextAutoplay(option, this.objectId)
+  }
+
+  get src () {
+    return native.getAudioContextSrc({}, this.objectId)
+  }
+
+  set src (option: any) {
+    native.setAudioContextSrc(option, this.objectId)
+  }
+
+  static createInnerAudioContext () {
+    return new NativeInnerAudioContext()
+  }
+
+  stop (): void {
+    native.innerAudioStop({}, this.objectId)
+  }
+
+  play (): void {
+    native.innerAudioPlay({}, this.objectId)
+  }
+
+  onStop (option: any): void {
+    native.innerAudioOnStop(option, this.objectId)
+  }
+
+  onPlay (option: any): void {
+    native.innerAudioOnPlay(option, this.objectId)
+  }
+
+  onEnded (option: any): void {
+    native.innerAudioOnEnded(option, this.objectId)
+  }
+
+  onError (option: any): void {
+    native.innerAudioOnError(option, this.objectId)
+  }
+
+  destroy (): void {
+  }
+
+  offCanplay (option: any): void {
+    return option
+  }
+
+  offEnded (option: any): void {
+    return option
+  }
+
+  offError (option: any): void {
+    return option
+  }
+
+  offPause (option: any): void {
+    return option
+  }
+
+  offPlay (option: any): void {
+    return option
+  }
+
+  offSeeked (option: any): void {
+    return option
+  }
+
+  offSeeking (option: any): void {
+    return option
+  }
+
+  offStop (option: any): void {
+    return option
+  }
+
+  offTimeUpdate (option: any): void {
+    return option
+  }
+
+  offWaiting (option: any): void {
+    return option
+  }
+
+  onCanplay (option: any): void {
+    return option
+  }
+
+  onPause (option: any): void {
+    return option
+  }
+
+  onSeeked (option: any): void {
+    return option
+  }
+
+  onSeeking (option: any): void {
+    return option
+  }
+
+  onTimeUpdate (option: any): void {
+    return option
+  }
+
+  onWaiting (option: any): void {
+    return option
+  }
+
+  pause (): void {
+  }
+
+  seek (option: any): void {
+    return option
+  }
+
+
+}
diff --git a/packages/taro-platform-harmony-hybrid/src/api/apis/interface/NativeFileSystemManager.ts b/packages/taro-platform-harmony-hybrid/src/api/apis/interface/NativeFileSystemManager.ts
new file mode 100644
index 000000000000..09f3cd4f67be
--- /dev/null
+++ b/packages/taro-platform-harmony-hybrid/src/api/apis/interface/NativeFileSystemManager.ts
@@ -0,0 +1,225 @@
+import Taro from '@tarojs/api'
+import { toByteArray } from 'base64-js'
+
+import native from '../NativeApi'
+
+export class NativeFileSystemManager implements Taro.FileSystemManager {
+  private static nativeFileSystemManager: NativeFileSystemManager
+
+  constructor () {
+    native.getFileManager()
+  }
+
+  static getFileSystemManager () {
+    if ( !NativeFileSystemManager.nativeFileSystemManager ) {
+      NativeFileSystemManager.nativeFileSystemManager =  new NativeFileSystemManager()
+    }
+    return NativeFileSystemManager.nativeFileSystemManager
+  }
+
+
+  access (option: any): void {
+    native.access(option)
+  }
+
+
+  getFileInfo (option: any): any {
+    native.getFileInfo(option)
+  }
+
+  readFile (option: any): any {
+    native.readFile({
+      ...(option || {}),
+      success: (res) => {
+        const result = {
+          data: res?.bufBase64 !== undefined ? toByteArray(res.bufBase64).buffer : res?.result
+        }
+        option?.success && option.success(result)
+        option?.complete && option.complete(result)
+      },
+      fail: (res) => {
+        option?.fail && option.fail(res)
+        option?.complete && option.complete(res)
+      },
+    })
+  }
+
+  readFileSync (filePath: string, encoding?: string, position?: number, length?: number): any {
+    const data = native.readFileSync({
+      filePath,
+      encoding,
+      position,
+      length,
+    })
+    if (data?.error) {
+      throw data.error
+    }
+    return (data?.bufBase64 !== undefined ? toByteArray(data.bufBase64).buffer : data?.result)
+  }
+
+  accessSync (option: any): any {
+    return option
+  }
+
+  appendFile (option: any): any {
+    return option
+  }
+
+  appendFileSync (option: any): any {
+    return option
+  }
+
+  close (option: any): any {
+    return option
+  }
+
+  closeSync (option: any): any {
+    return option
+  }
+
+  copyFile (option: any): any {
+    return option
+  }
+
+  copyFileSync (option: any): any {
+    return option
+  }
+
+  fstat (option: any): any {
+    return option
+  }
+
+  fstatSync (option: any): any {
+    return option
+  }
+
+  ftruncate (option: any): any {
+    return option
+  }
+
+  ftruncateSync (option: any): any {
+    return option
+  }
+
+
+  getSavedFileList (option: any): any {
+    return option
+  }
+
+  mkdir (option: any): any {
+    return option
+  }
+
+  mkdirSync (option: any): any {
+    return option
+  }
+
+  open (option: any): any {
+    return option
+  }
+
+  openSync (option: any): any {
+    return option
+  }
+
+  read (option: any): any {
+    return option
+  }
+
+  readCompressedFile (option: any): any {
+    return option
+  }
+
+  readCompressedFileSync (option: any): any {
+    return option
+  }
+
+
+  readSync (option: any): any {
+    return option
+  }
+
+  readZipEntry (option: any): any {
+    return option
+  }
+
+  readdir (option: any): any {
+    return option
+  }
+
+  readdirSync (option: any): any {
+    return option
+  }
+
+  removeSavedFile (option: any): any {
+    return option
+  }
+
+  rename (option: any): any {
+    return option
+  }
+
+  renameSync (option: any): any {
+    return option
+  }
+
+  rmdir (option: any): any {
+    return option
+  }
+
+  rmdirSync (option: any): any {
+    return option
+  }
+
+  saveFile (option: any): any {
+    return option
+  }
+
+  saveFileSync (option: any): any {
+    return option
+  }
+
+  stat (option: any): any {
+    return option
+  }
+
+  statSync (option: any): any {
+    return option
+  }
+
+  truncate (option: any): any {
+    return option
+  }
+
+  truncateSync (option: any): any {
+    return option
+  }
+
+  unlink (option: any): any {
+    return option
+  }
+
+  unlinkSync (option: any): any {
+    return option
+  }
+
+  unzip (option: any): any {
+    return option
+  }
+
+  write (option: any): any {
+    return option
+  }
+
+  writeFile (option: any): any {
+    return option
+  }
+
+  writeFileSync (option: any): any {
+    return option
+  }
+
+  writeSync (option: any): any {
+    return option
+  }
+}
diff --git a/packages/taro-platform-harmony-hybrid/src/api/apis/interface/NativeRequest.ts b/packages/taro-platform-harmony-hybrid/src/api/apis/interface/NativeRequest.ts
new file mode 100644
index 000000000000..19ecec82edea
--- /dev/null
+++ b/packages/taro-platform-harmony-hybrid/src/api/apis/interface/NativeRequest.ts
@@ -0,0 +1,50 @@
+import Taro from '@tarojs/api'
+
+import native from '../NativeApi'
+
+
+export class NativeRequest implements Taro.RequestTask<any> {
+  readonly [Symbol.toStringTag]: string = 'NativeRequest'
+  private objectId: number
+  constructor (objectId: number) {
+    this.objectId = objectId
+  }
+
+  static getRequestTask (objectId: number) {
+    return new NativeRequest(objectId)
+  }
+
+  abort (): void {
+    native.abort( {}, this.objectId)
+  }
+
+  onHeadersReceived (option: any): void {
+    native.onHeadersReceived(option, this.objectId)
+  }
+
+  offHeadersReceived (option: any): void {
+    native.offHeadersReceived(option, this.objectId)
+  }
+
+  catch<TResult = never> (onrejected?: ((reason: any) => (PromiseLike<TResult> | TResult)) | undefined | null): Promise<any> {
+    return Promise.resolve(onrejected)
+  }
+
+  offChunkReceived (option: any): void {
+    return option
+  }
+
+  onChunkReceived (option: any): void {
+    return option
+  }
+
+  then<TResult = never> (onrejected?: ((reason: any) => (PromiseLike<TResult> | TResult)) | undefined | null): Promise<any> {
+    return Promise.resolve(onrejected)
+  }
+
+  finally (onfinally?: (() => void) | null | undefined): any {
+    throw new Error(onfinally as undefined)
+  }
+
+
+}
diff --git a/packages/taro-platform-harmony-hybrid/src/api/apis/interface/NativeUploadFile.ts b/packages/taro-platform-harmony-hybrid/src/api/apis/interface/NativeUploadFile.ts
new file mode 100644
index 000000000000..63605bcee9b0
--- /dev/null
+++ b/packages/taro-platform-harmony-hybrid/src/api/apis/interface/NativeUploadFile.ts
@@ -0,0 +1,35 @@
+import Taro from '@tarojs/api'
+
+import native from '../NativeApi'
+
+export class NativeUploadFile implements Taro.UploadTask {
+  private objectId: number
+
+  constructor ( objectId: number) {
+    this.objectId = objectId
+  }
+
+  static getUploadTask (objectId: number) {
+    return new NativeUploadFile(objectId)
+  }
+
+  abort (): void {
+    native.abort({}, this.objectId )
+  }
+
+  offHeadersReceived (option: any): void {
+    native.offHeadersReceived(option, this.objectId)
+  }
+
+  offProgressUpdate (option: any): void {
+    native.offProgressUpdate(option, this.objectId)
+  }
+
+  onHeadersReceived (option: any): void {
+    native.onHeadersReceived(option, this.objectId)
+  }
+
+  onProgressUpdate (option: any): void {
+    native.onProgressUpdate(option, this.objectId)
+  }
+}
diff --git a/packages/taro-platform-harmony-hybrid/src/api/apis/location/getFuzzyLocation.ts b/packages/taro-platform-harmony-hybrid/src/api/apis/location/getFuzzyLocation.ts
index 6bf1128cf021..e3003fb2528b 100644
--- a/packages/taro-platform-harmony-hybrid/src/api/apis/location/getFuzzyLocation.ts
+++ b/packages/taro-platform-harmony-hybrid/src/api/apis/location/getFuzzyLocation.ts
@@ -1,12 +1,12 @@
 import Taro from '@tarojs/taro'
 
+import native from '../NativeApi'
 import { shouldBeObject } from '../utils'
 import { wgs84Togcj02 } from '../utils/coordinateConvert'
 import { MethodHandler } from '../utils/handler'
-
 /**
  * 获取当前的模糊地理位置
- *  
+ *
  * @canUse getFuzzyLocation
  * @__object [type]
  * @__success [latitude, longitude]
@@ -43,7 +43,6 @@ export const getFuzzyLocation: typeof Taro.getFuzzyLocation = (options) => {
       }
     }, 10000)
 
-    // @ts-ignore
     native.getLocation({
       success: (res: any) => {
         // 超时后即使后面回调触发了也不后面的逻辑
@@ -80,4 +79,4 @@ export const getFuzzyLocation: typeof Taro.getFuzzyLocation = (options) => {
       }
     })
   })
-}
\ No newline at end of file
+}
diff --git a/packages/taro-platform-harmony-hybrid/src/api/apis/location/getLocation.ts b/packages/taro-platform-harmony-hybrid/src/api/apis/location/getLocation.ts
index 585487695a1e..0af89ad4f6c0 100644
--- a/packages/taro-platform-harmony-hybrid/src/api/apis/location/getLocation.ts
+++ b/packages/taro-platform-harmony-hybrid/src/api/apis/location/getLocation.ts
@@ -1,5 +1,6 @@
 import Taro from '@tarojs/taro'
 
+import native from '../NativeApi'
 import { shouldBeObject } from '../utils'
 import { wgs84Togcj02 } from '../utils/coordinateConvert'
 import { MethodHandler } from '../utils/handler'
@@ -8,7 +9,7 @@ const HIGH_ACCURACY_TIMEOUT = 10000
 
 /**
  * 获取当前的地理位置、速度
- * 
+ *
  * @canUse getLocation
  * @__object [altitude, highAccuracyExpireTime, isHighAccuracy, type]
  * @__success [accuracy, altitude, horizontalAccuracy, latitude, longitude, speed, verticalAccuracy]
@@ -50,7 +51,6 @@ export const getLocation: typeof Taro.getLocation = (options) => {
       }, highAccuracyExpireTime ?? HIGH_ACCURACY_TIMEOUT)
     }
 
-    // @ts-ignore
     native.getLocation({
       success: (res: any) => {
         // 超时后即使后面回调触发了也不执行后面的逻辑
diff --git a/packages/taro-platform-harmony-hybrid/src/api/apis/media/audio/index.ts b/packages/taro-platform-harmony-hybrid/src/api/apis/media/audio/index.ts
index 667671612073..6a467295b8d3 100644
--- a/packages/taro-platform-harmony-hybrid/src/api/apis/media/audio/index.ts
+++ b/packages/taro-platform-harmony-hybrid/src/api/apis/media/audio/index.ts
@@ -1,5 +1,6 @@
 import Taro from '@tarojs/api'
 
+import { NativeInnerAudioContext } from '../../interface/NativeAContextApi'
 import { AudioContext } from './AudioContext'
 import { InnerAudioContext } from './InnerAudioContext'
 
@@ -13,8 +14,7 @@ export const createInnerAudioContext: typeof Taro.createInnerAudioContext = (opt
   if (options && typeof options === 'object' && options.useWebAudioImplement) {
     return new InnerAudioContext()
   } else {
-    // @ts-ignore
-    return native.createInnerAudioContext()
+    return NativeInnerAudioContext.createInnerAudioContext()
   }
 }
 
diff --git a/packages/taro-platform-harmony-hybrid/src/api/apis/media/image/chooseImage.ts b/packages/taro-platform-harmony-hybrid/src/api/apis/media/image/chooseImage.ts
index 456a4e891c7c..dc1eec279946 100644
--- a/packages/taro-platform-harmony-hybrid/src/api/apis/media/image/chooseImage.ts
+++ b/packages/taro-platform-harmony-hybrid/src/api/apis/media/image/chooseImage.ts
@@ -1,6 +1,7 @@
 import Taro from '@tarojs/api'
 import { showActionSheet } from '@tarojs/taro-h5'
 
+import native from '../../NativeApi'
 import { shouldBeObject } from '../../utils'
 import { MethodHandler } from '../../utils/handler'
 
@@ -53,15 +54,14 @@ export const chooseImage: typeof Taro.chooseImage = async (options) => {
   }
 
   return new Promise<Taro.chooseImage.SuccessCallbackResult>((resolve, reject) => {
-    // @ts-ignore
     native.chooseMediaAssets({
       count: count,
       mediaType: mediaType,
       sourceType: sourceSelected,
       sizeType: sizeType,
       apiName: name,
-      success: (res: any) => {      
-        const tempFiles: Taro.chooseImage.ImageFile[] = [] 
+      success: (res: any) => {
+        const tempFiles: Taro.chooseImage.ImageFile[] = []
         for (const file of res.tempFiles) {
           const fileInfo: Taro.chooseImage.ImageFile = {
             path: file.tempFilePath,
diff --git a/packages/taro-platform-harmony-hybrid/src/api/apis/media/image/getImageInfo.ts b/packages/taro-platform-harmony-hybrid/src/api/apis/media/image/getImageInfo.ts
index 0adbdefeef9e..020f528658e7 100644
--- a/packages/taro-platform-harmony-hybrid/src/api/apis/media/image/getImageInfo.ts
+++ b/packages/taro-platform-harmony-hybrid/src/api/apis/media/image/getImageInfo.ts
@@ -1,8 +1,8 @@
 import Taro from '@tarojs/api'
 
+import native from '../../NativeApi'
 import { shouldBeObject } from '../../utils'
 import { MethodHandler } from '../../utils/handler'
-
 /**
  * 从本地相册选择图片或使用相机拍照。
  *
@@ -34,7 +34,6 @@ export const getImageInfo: typeof Taro.getImageInfo = function (options) {
   }>({ name, success, fail, complete })
 
   return new Promise<Taro.getImageInfo.SuccessCallbackResult>((resolve, reject) => {
-    // @ts-ignore
     native.getImageInfo({
       src: src,
       success: (res: any) => {
diff --git a/packages/taro-platform-harmony-hybrid/src/api/apis/media/image/previewImage.ts b/packages/taro-platform-harmony-hybrid/src/api/apis/media/image/previewImage.ts
index 3ad91aa66ad3..d692aca151ec 100644
--- a/packages/taro-platform-harmony-hybrid/src/api/apis/media/image/previewImage.ts
+++ b/packages/taro-platform-harmony-hybrid/src/api/apis/media/image/previewImage.ts
@@ -8,6 +8,7 @@ import { isFunction } from '@tarojs/shared'
 import Taro from '@tarojs/taro'
 import { showActionSheet, showToast } from '@tarojs/taro-h5'
 
+import native from '../../NativeApi'
 import { shouldBeObject } from '../../utils'
 import { MethodHandler } from '../../utils/handler'
 import { saveImageToPhotosAlbum } from './saveImageToPhotosAlbum'
@@ -85,7 +86,6 @@ export const previewImage: typeof Taro.previewImage = async (options) => {
             if (tapIndex !== SAVE_IMAGE_BUTTON) {
               return
             }
-            // @ts-ignore
             native.downloadFile ({
               url: url, // 仅为示例，并非真实的资源
               success: function (res: any) {
diff --git a/packages/taro-platform-harmony-hybrid/src/api/apis/media/image/saveImageToPhotosAlbum.ts b/packages/taro-platform-harmony-hybrid/src/api/apis/media/image/saveImageToPhotosAlbum.ts
index a645886d2a1f..1973086beb23 100644
--- a/packages/taro-platform-harmony-hybrid/src/api/apis/media/image/saveImageToPhotosAlbum.ts
+++ b/packages/taro-platform-harmony-hybrid/src/api/apis/media/image/saveImageToPhotosAlbum.ts
@@ -1,5 +1,6 @@
 import Taro from '@tarojs/api'
 
+import native from '../../NativeApi'
 import { getParameterError, shouldBeObject } from '../../utils'
 import { MethodHandler } from '../../utils/handler'
 
@@ -32,7 +33,6 @@ export const saveImageToPhotosAlbum: typeof Taro.saveImageToPhotosAlbum = (optio
   }
 
   return new Promise<TaroGeneral.CallbackResult>((resolve, reject) => {
-    // @ts-ignore
     native.saveImageToPhotosAlbum({
       filePath: filePath,
       success: (res: any) => {
diff --git a/packages/taro-platform-harmony-hybrid/src/api/apis/media/video/chooseMedia.ts b/packages/taro-platform-harmony-hybrid/src/api/apis/media/video/chooseMedia.ts
index 987c65acc798..a6de317c3742 100644
--- a/packages/taro-platform-harmony-hybrid/src/api/apis/media/video/chooseMedia.ts
+++ b/packages/taro-platform-harmony-hybrid/src/api/apis/media/video/chooseMedia.ts
@@ -1,6 +1,7 @@
 import Taro from '@tarojs/taro'
 import { showActionSheet } from '@tarojs/taro-h5'
 
+import native from '../../NativeApi'
 import { shouldBeObject } from '../../utils'
 import { MethodHandler } from '../../utils/handler'
 
@@ -55,7 +56,6 @@ export const chooseMedia: typeof Taro.chooseMedia = async (options) => {
   }
 
   return new Promise<Taro.chooseMedia.SuccessCallbackResult>((resolve, reject) => {
-    // @ts-ignore
     native.chooseMediaAssets({
       count: count,
       mediaType: mediaType,
@@ -64,7 +64,7 @@ export const chooseMedia: typeof Taro.chooseMedia = async (options) => {
       sizeType: sizeType,
       camera: camera,
       apiName: name,
-      success: (res: any) => {       
+      success: (res: any) => {
         const result: Taro.chooseMedia.SuccessCallbackResult = {
           tempFiles: res.tempFiles,
           type: res.type,
diff --git a/packages/taro-platform-harmony-hybrid/src/api/apis/media/video/getVideoInfo.ts b/packages/taro-platform-harmony-hybrid/src/api/apis/media/video/getVideoInfo.ts
index cea34d9ce8a6..f1abb48c7983 100644
--- a/packages/taro-platform-harmony-hybrid/src/api/apis/media/video/getVideoInfo.ts
+++ b/packages/taro-platform-harmony-hybrid/src/api/apis/media/video/getVideoInfo.ts
@@ -1,8 +1,8 @@
 import Taro from '@tarojs/taro'
 
+import native from '../../NativeApi'
 import { getParameterError, shouldBeObject } from '../../utils'
 import { MethodHandler } from '../../utils/handler'
-
 /**
  * 获取视频详细信息
  *
@@ -48,7 +48,6 @@ export const getVideoInfo: typeof Taro.getVideoInfo = (options) => {
   }
 
   return new Promise<Taro.getVideoInfo.SuccessCallbackResult>((resolve, reject) => {
-    // @ts-ignore
     native.getVideoInfo({
       src: src,
       success: (res: any) => {
diff --git a/packages/taro-platform-harmony-hybrid/src/api/apis/navigate/index.ts b/packages/taro-platform-harmony-hybrid/src/api/apis/navigate/index.ts
index 6839a3f8c2e3..4b259f96991d 100644
--- a/packages/taro-platform-harmony-hybrid/src/api/apis/navigate/index.ts
+++ b/packages/taro-platform-harmony-hybrid/src/api/apis/navigate/index.ts
@@ -1,12 +1,13 @@
 import Taro from '@tarojs/api'
 import { showModal } from '@tarojs/taro-h5'
 
+import native from '../NativeApi'
 import { shouldBeObject } from '../utils'
 import { MethodHandler } from '../utils/handler'
 
 /**
 * 打开另一个小程序
-* 
+*
 * @canUse navigateToMiniProgram
 * @__object [appId, path, extraData]
 */
@@ -19,7 +20,7 @@ export const navigateToMiniProgram: typeof Taro.navigateToMiniProgram = (options
     return Promise.reject(res)
   }
   return new Promise((resolve, reject) => {
-    const { success, fail, complete, ...otherOptions } = options as Exclude<typeof options, undefined>
+    const { success, fail, complete } = options as Exclude<typeof options, undefined>
     const handle = new MethodHandler({ name: apiName, success, fail, complete })
 
     showModal({
@@ -34,15 +35,7 @@ export const navigateToMiniProgram: typeof Taro.navigateToMiniProgram = (options
       },
       success: (res) => {
         if (res.confirm) {
-          // @ts-ignore
-          native.navigateToMiniProgram(otherOptions).then(
-            (res: any) => {
-              handle.success(res, { resolve, reject })
-            },
-            (res: any) => {
-              handle.fail(res, { resolve, reject })
-            }
-          )
+          native.navigateToMiniProgram(options)
         } else {
           handle.fail({ errMsg: 'cancel' }, { resolve, reject })
         }
diff --git a/packages/taro-platform-harmony-hybrid/src/api/apis/network/download.ts b/packages/taro-platform-harmony-hybrid/src/api/apis/network/download.ts
index 833688819181..75905930357a 100644
--- a/packages/taro-platform-harmony-hybrid/src/api/apis/network/download.ts
+++ b/packages/taro-platform-harmony-hybrid/src/api/apis/network/download.ts
@@ -1,9 +1,9 @@
 import Taro from '@tarojs/api'
 
+import native from '../NativeApi'
 import { CallbackManager } from '../utils/handler'
 import { NETWORK_TIMEOUT, setHeader, XHR_STATS } from './utils'
 
-
 const splitHeaders = (headers: string) => {
   const arr = headers.trim().split(/[\r\n]+/)
   const headerMap = {}
@@ -55,8 +55,7 @@ const createDownloadTask = ({ url, header, filePath, withCredentials = true, tim
     reader.onload = () => {
       clearTimeout(timeoutInter)
       const base64Data = reader.result as string
-      // @ts-ignore
-      native .saveDataUrlToFile({
+      native.saveDataUrlToFile({
         filePath,
         url,
         data: base64Data,
@@ -123,7 +122,7 @@ const createDownloadTask = ({ url, header, filePath, withCredentials = true, tim
    * 监听 HTTP Response Header 事件。会比请求完成事件更早
    * @param {HeadersReceivedCallback} callback HTTP Response Header 事件的回调函数
    */
-  const onHeadersReceived = callbackManager.headersReceived.add
+  const onHeadersReceived = callbackManager.headersReceived.addUnique
   /**
    * 取消监听 HTTP Response Header 事件
    * @param {HeadersReceivedCallback} callback HTTP Response Header 事件的回调函数
@@ -134,7 +133,7 @@ const createDownloadTask = ({ url, header, filePath, withCredentials = true, tim
    * 监听进度变化事件
    * @param {ProgressUpdateCallback} callback HTTP Response Header 事件的回调函数
    */
-  const onProgressUpdate = callbackManager.progressUpdate.add
+  const onProgressUpdate = callbackManager.progressUpdate.addUnique
   /**
    * 取消监听进度变化事件
    * @param {ProgressUpdateCallback} callback HTTP Response Header 事件的回调函数
@@ -157,7 +156,7 @@ const createDownloadTask = ({ url, header, filePath, withCredentials = true, tim
 
 /**
  * 下载文件资源到本地
- * 
+ *
  * @canUse downloadFile
  * @__object [url, filePath, header, timeout, withCredentials]
  * @__success [filePath, statusCode, tempFilePath, header, dataLength, cookies, profile]
diff --git a/packages/taro-platform-harmony-hybrid/src/api/apis/network/request/index.ts b/packages/taro-platform-harmony-hybrid/src/api/apis/network/request/index.ts
index 83b15a014ccd..092a0720adf3 100644
--- a/packages/taro-platform-harmony-hybrid/src/api/apis/network/request/index.ts
+++ b/packages/taro-platform-harmony-hybrid/src/api/apis/network/request/index.ts
@@ -1,6 +1,8 @@
 import Taro from '@tarojs/api'
 import { isFunction } from '@tarojs/shared'
 
+import { NativeRequest } from '../../interface/NativeRequest'
+import native from '../../NativeApi'
 import { getParameterError, shouldBeObject } from '../../utils'
 
 export const _request = (options) => {
@@ -29,8 +31,7 @@ export const _request = (options) => {
   let task!: Taro.RequestTask<any>
   const result: ReturnType<typeof Taro.request> = new Promise((resolve, reject) => {
     const upperMethod = method ? method.toUpperCase() : method
-    // @ts-ignore
-    task = native.request({
+    const taskID = native.request({
       url,
       method: upperMethod,
       ...otherOptions,
@@ -45,6 +46,7 @@ export const _request = (options) => {
         reject(res)
       },
     })
+    task = NativeRequest.getRequestTask(taskID)
   }) as any
 
   result.onHeadersReceived = task.onHeadersReceived.bind(task)
@@ -63,9 +65,9 @@ const link = new Link(taroInterceptor)
 
 /**
  * 发起 HTTPS 网络请求
- * 
+ *
  * @canUse request
- * @__object [url, data, header, timeout, method[OPTIONS, GET, HEAD, POST, PUT, PATCH, DELETE, TRACE, CONNECT], responseType[text, arraybuffer], enableCache]
+ * @__object [url, data, header, timeout, method[OPTIONS, GET, HEAD, POST, PUT, PATCH, DELETE, TRACE, CONNECT], dataType[json, text, base64, arraybuffer], responseType[text, arraybuffer], enableCache]
  * @__success [data, header, statusCode, cookies]
  */
 export function request (options) {
@@ -76,7 +78,7 @@ export function request (options) {
 
 /**
  * 网络请求任务对象
- * 
+ *
  * @canUse RequestTask
  * @__class [abort, onHeadersReceived, offHeadersReceived]
- */
\ No newline at end of file
+ */
diff --git a/packages/taro-platform-harmony-hybrid/src/api/apis/network/upload.ts b/packages/taro-platform-harmony-hybrid/src/api/apis/network/upload.ts
index 5a4f1595be98..f57dff65185e 100644
--- a/packages/taro-platform-harmony-hybrid/src/api/apis/network/upload.ts
+++ b/packages/taro-platform-harmony-hybrid/src/api/apis/network/upload.ts
@@ -1,10 +1,11 @@
 import { isFunction } from '@tarojs/shared'
 
+import { NativeUploadFile } from '../interface/NativeUploadFile'
+import native from '../NativeApi'
 import { getParameterError, shouldBeObject } from '../utils'
-
 /**
  * 将本地资源上传到服务器
- * 
+ *
  * @canUse uploadFile
  * @__object [url, filePath, name, header, formData, timeout, fileName, withCredentials]
  * @__success [data, statusCode, header, cookies]
@@ -38,8 +39,7 @@ export const uploadFile = (options) => {
     }
   }
 
-  // @ts-ignore
-  const task = native.uploadFile({
+  const objectID = native.uploadFile({
     url,
     filePath,
     name,
@@ -55,9 +55,11 @@ export const uploadFile = (options) => {
     },
   })
 
+  const task = NativeUploadFile.getUploadTask(objectID)
+
   /**
    * 一个可以监听上传进度变化事件，以及取消上传任务的对象
-   * 
+   *
    * @canUse UploadTask
    * @__class [abort, onProgressUpdate, offProgressUpdate, onHeadersReceived, offHeadersReceived]
    */
diff --git a/packages/taro-platform-harmony-hybrid/src/api/apis/open-api/login/login.ts b/packages/taro-platform-harmony-hybrid/src/api/apis/open-api/login/login.ts
index 5170578bb103..4f22029f2cff 100644
--- a/packages/taro-platform-harmony-hybrid/src/api/apis/open-api/login/login.ts
+++ b/packages/taro-platform-harmony-hybrid/src/api/apis/open-api/login/login.ts
@@ -1,13 +1,14 @@
 import Taro from '@tarojs/taro'
 
+import native from '../../NativeApi'
 import { shouldBeObject } from '../../utils'
 import { MethodHandler } from '../../utils/handler'
 
 /**
  * 调用接口获取登录凭证（code）
- *  
+ *
  * @canUse login
- * @__object [timeout] 
+ * @__object [timeout]
  * @__success [code]
  */
 export const login: typeof Taro.login = (options) => {
@@ -25,7 +26,6 @@ export const login: typeof Taro.login = (options) => {
   const handle = new MethodHandler({ name, success, fail, complete })
 
   let loginPromise = new Promise((resolve, reject) => {
-    // @ts-ignore
     native.login({
       success: (res: any) => {
         resolve(res)
diff --git a/packages/taro-platform-harmony-hybrid/src/api/apis/open-api/settings/getSetting.ts b/packages/taro-platform-harmony-hybrid/src/api/apis/open-api/settings/getSetting.ts
index 87edf907d9bd..f3be35345c14 100644
--- a/packages/taro-platform-harmony-hybrid/src/api/apis/open-api/settings/getSetting.ts
+++ b/packages/taro-platform-harmony-hybrid/src/api/apis/open-api/settings/getSetting.ts
@@ -1,7 +1,7 @@
 import Taro from '@tarojs/api'
 
+import native from '../../NativeApi'
 import { shouldBeObject } from '../../utils'
-import { MethodHandler } from '../../utils/handler'
 
 /**
  * 获取用户的当前设置
@@ -21,29 +21,5 @@ export const getSetting: typeof Taro.getSetting = function (options) {
     return Promise.reject(res)
   }
 
-  const { success, fail, complete, ...otherOptions } = options as Exclude<typeof options, undefined>
-
-  const handle = new MethodHandler<{
-    authSetting: Taro.AuthSetting
-    subscriptionsSetting?: Taro.SubscriptionsSetting
-    miniprogramAuthSetting: Taro.AuthSetting
-    errMsg?: string
-  }>({ name, success, fail, complete })
-
-  // @ts-ignore
-  return native.getSetting(otherOptions).then(
-    (res: any) => {
-      const result: Taro.getSetting.SuccessCallbackResult = {
-        authSetting: res.authSetting,
-        subscriptionsSetting: res.subscriptionsSetting || {},
-        miniprogramAuthSetting: {},
-        errMsg: res.errMsg,
-      }
-      handle.success(result)
-      // handle.success(res)
-    },
-    (res: any) => {
-      handle.fail(res)
-    }
-  )
+  return native.getSetting(options)
 }
diff --git a/packages/taro-platform-harmony-hybrid/src/api/apis/open-api/settings/openSetting.ts b/packages/taro-platform-harmony-hybrid/src/api/apis/open-api/settings/openSetting.ts
index 9fd1ffb43989..c4cb94842257 100644
--- a/packages/taro-platform-harmony-hybrid/src/api/apis/open-api/settings/openSetting.ts
+++ b/packages/taro-platform-harmony-hybrid/src/api/apis/open-api/settings/openSetting.ts
@@ -1,7 +1,7 @@
 import Taro from '@tarojs/api'
 
+import native from '../../NativeApi'
 import { shouldBeObject } from '../../utils'
-import { MethodHandler } from '../../utils/handler'
 
 /**
  * 调起客户端小程序设置界面，返回用户设置的操作结果
@@ -20,27 +20,5 @@ export const openSetting: typeof Taro.openSetting = function (options) {
     return Promise.reject(res)
   }
 
-  const { success, fail, complete, ...otherOptions } = options as Exclude<typeof options, undefined>
-
-  const handle = new MethodHandler<{
-    authSetting: Taro.AuthSetting
-    subscriptionsSetting?: Taro.SubscriptionsSetting
-    errMsg?: string
-  }>({ name, success, fail, complete })
-
-  // @ts-ignore
-  return native.openSetting(otherOptions).then(
-    (res: any) => {
-      const result: Taro.openSetting.SuccessCallbackResult = {
-
-        authSetting: res.authSetting,
-        subscriptionsSetting: res.subscriptionsSetting || {},
-        errMsg: res.errMsg,
-      }
-      handle.success(result)
-    },
-    (res: any) => {
-      handle.fail(res)
-    }
-  )
+  return native.openSetting(options)
 }
diff --git a/packages/taro-platform-harmony-hybrid/src/api/apis/open-api/user-info/getUserInfo.ts b/packages/taro-platform-harmony-hybrid/src/api/apis/open-api/user-info/getUserInfo.ts
index f05c4022a9c5..eadfc9b45bad 100644
--- a/packages/taro-platform-harmony-hybrid/src/api/apis/open-api/user-info/getUserInfo.ts
+++ b/packages/taro-platform-harmony-hybrid/src/api/apis/open-api/user-info/getUserInfo.ts
@@ -1,11 +1,11 @@
 import Taro from '@tarojs/taro'
 
+import native from '../../NativeApi'
 import { shouldBeObject } from '../../utils'
 import { MethodHandler } from '../../utils/handler'
-
 /**
  * 获取用户信息
- * 
+ *
  * @canUse getUserInfo
  * @__object [lang, withCredentials]
  * @__success [userInfo]
@@ -25,7 +25,6 @@ export const getUserInfo: typeof Taro.getUserInfo = (options) => {
 
   const handle = new MethodHandler({ name, success, fail, complete })
 
-  // @ts-ignore
   const ret = native.getUserInfo({
     lang: lang,
     withCredentials: withCredentials,
@@ -37,4 +36,4 @@ export const getUserInfo: typeof Taro.getUserInfo = (options) => {
     },
   })
   return ret
-}
\ No newline at end of file
+}
diff --git a/packages/taro-platform-harmony-hybrid/src/api/apis/ui/menu.ts b/packages/taro-platform-harmony-hybrid/src/api/apis/ui/menu.ts
index 5bf202afa746..dc917dbd0a9e 100644
--- a/packages/taro-platform-harmony-hybrid/src/api/apis/ui/menu.ts
+++ b/packages/taro-platform-harmony-hybrid/src/api/apis/ui/menu.ts
@@ -1,13 +1,13 @@
 import Taro from '@tarojs/api'
 
+import  native from '../NativeApi'
 /**
  * 获取菜单按钮（右上角胶囊按钮）的布局位置信息
- * 
+ *
  * @canUse getMenuButtonBoundingClientRect
  * @__return [left, top, right, bottom, height, width]
  */
 export const getMenuButtonBoundingClientRect: typeof Taro.getMenuButtonBoundingClientRect = () => {
-  // @ts-ignore
   const data = native.getMenuButtonBoundingClientRect()
   const rect = JSON.parse(JSON.stringify(data))
   return {
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 3373140153d3..d3173decc58e 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,11 +1,11 @@
 import Taro from '@tarojs/api'
 
+import  native from '../../NativeApi'
 import { getParameterError, shouldBeObject } from '../../utils'
 import { MethodHandler } from '../../utils/handler'
-
 /**
  * 设置页面导航条颜色
- * 
+ *
  * @canUse setNavigationBarColor
  * @__object [backgroundColor, frontColor, animation]
  */
@@ -49,7 +49,6 @@ export const setNavigationBarColor: typeof Taro.setNavigationBarColor = (options
       }),
     })
   }
-  // @ts-ignore
   native.setNavigationBarColor({ frontColor, backgroundColor, ...otherOptions })
   return handle.success()
 }
diff --git a/packages/taro-platform-harmony-hybrid/src/api/apis/utils/handler.ts b/packages/taro-platform-harmony-hybrid/src/api/apis/utils/handler.ts
index 342130db9d7e..d0821a5ddf69 100644
--- a/packages/taro-platform-harmony-hybrid/src/api/apis/utils/handler.ts
+++ b/packages/taro-platform-harmony-hybrid/src/api/apis/utils/handler.ts
@@ -72,6 +72,16 @@ type TCallbackManagerUnit<T extends unknown[] = unknown[]> = TCallbackManagerFun
 export class CallbackManager<T extends unknown[] = unknown[]> {
   callbacks: TCallbackManagerUnit<T>[] = []
 
+  /** 判断是否有相同的回调 */
+  hasSameCallback = (opt: TCallbackManagerUnit<T>) => {
+    return this.callbacks.indexOf(opt) !== -1
+  }
+
+  /** 添加不可重复的回调 */
+  addUnique = (opt?: TCallbackManagerUnit<T>) => {
+    if (opt && !this.hasSameCallback(opt)) this.callbacks.push(opt)
+  }
+
   /** 添加回调 */
   add = (opt?: TCallbackManagerUnit<T>) => {
     if (opt) this.callbacks.push(opt)
diff --git a/packages/taro-router/src/navigationBar.ts b/packages/taro-router/src/navigationBar.ts
index 8ee8f518366e..74ba1464d965 100644
--- a/packages/taro-router/src/navigationBar.ts
+++ b/packages/taro-router/src/navigationBar.ts
@@ -14,22 +14,36 @@ const back_svg_str = `
 </svg>
 `
 
+const loading_svg_str = `
+<svg t="1709608074670" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4741" width="24" height="24"><path d="M256 529.066667H85.333333a17.066667 17.066667 0 1 1 0-34.133334h170.666667a17.066667 17.066667 0 0 1 0 34.133334z" opacity=".278" p-id="4742"></path><path d="M99.84 640a17.066667 17.066667 0 0 1-4.437333-33.553067l164.693333-44.373333a17.066667 17.066667 0 1 1 8.891733 32.9728l-164.693333 44.373333a17.544533 17.544533 0 0 1-4.4544 0.580267z" opacity=".322" p-id="4743"></path><path d="M264.533333 462.523733a16.896 16.896 0 0 1-4.369066-0.580266l-164.693334-43.52a17.0496 17.0496 0 1 1 8.721067-32.989867l164.693333 43.52a17.066667 17.066667 0 1 1-4.352 33.570133z" opacity=".239" p-id="4744"></path><path d="M384.017067 307.2a17.032533 17.032533 0 0 1-14.7968-8.533333l-85.333334-147.626667a17.066667 17.066667 0 0 1 29.559467-17.083733l85.333333 147.626666A17.066667 17.066667 0 0 1 384.017067 307.2z" opacity=".122" p-id="4745"></path><path d="M639.982933 307.2a17.0496 17.0496 0 0 1-14.762666-25.6l85.333333-147.626667a17.066667 17.066667 0 1 1 29.559467 17.066667l-85.333334 147.626667a17.032533 17.032533 0 0 1-14.7968 8.533333z" opacity=".922" p-id="4746"></path><path d="M692.906667 347.306667a17.066667 17.066667 0 0 1-12.117334-29.098667l120.337067-121.173333a17.066667 17.066667 0 1 1 24.234667 24.046933l-120.337067 121.173333a17.1008 17.1008 0 0 1-12.117333 5.051734z" opacity=".878" p-id="4747"></path><path d="M733.883733 401.066667a17.066667 17.066667 0 0 1-8.5504-31.8464l147.626667-85.333334a17.0496 17.0496 0 1 1 17.066667 29.5424l-147.626667 85.333334a16.776533 16.776533 0 0 1-8.516267 2.304z" opacity=".839" p-id="4748"></path><path d="M512 273.066667a17.066667 17.066667 0 0 1-17.066667-17.066667V85.333333a17.066667 17.066667 0 0 1 34.133334 0v170.666667a17.066667 17.066667 0 0 1-17.066667 17.066667z" p-id="4749"></path><path d="M578.577067 281.6a17.066667 17.066667 0 0 1-16.520534-21.418667l43.52-164.693333a17.066667 17.066667 0 0 1 33.006934 8.721067l-43.52 164.693333a17.066667 17.066667 0 0 1-16.4864 12.6976z" opacity=".961" p-id="4750"></path><path d="M445.44 282.453333a17.066667 17.066667 0 0 1-16.469333-12.629333l-44.373334-164.693333a17.066667 17.066667 0 0 1 32.955734-8.891734l44.373333 164.693334a17.066667 17.066667 0 0 1-16.4864 21.521066z" opacity=".078" p-id="4751"></path><path d="M924.177067 640c-1.4848 0-2.9696-0.187733-4.4544-0.580267l-164.693334-44.373333a17.066667 17.066667 0 0 1 8.874667-32.9728l164.693333 44.373333a17.066667 17.066667 0 0 1-4.420266 33.553067z" opacity=".722" p-id="4752"></path><path d="M881.476267 742.4a17.015467 17.015467 0 0 1-8.482134-2.269867l-148.48-85.333333a17.0496 17.0496 0 1 1 16.9984-29.5936l148.48 85.333333a17.0496 17.0496 0 0 1-8.516266 31.863467z" opacity=".678" p-id="4753"></path><path d="M813.226667 830.293333a17.015467 17.015467 0 0 1-12.066134-5.000533l-120.337066-120.337067a17.0496 17.0496 0 1 1 24.132266-24.132266l120.337067 120.337066a17.0496 17.0496 0 0 1-12.066133 29.1328z" opacity=".639" p-id="4754"></path><path d="M938.666667 529.066667H768a17.066667 17.066667 0 1 1 0-34.133334h170.666667a17.066667 17.066667 0 1 1 0 34.133334z" opacity=".761" p-id="4755"></path><path d="M401.066667 941.226667a17.066667 17.066667 0 0 1-16.4864-21.504l44.373333-164.693334a17.066667 17.066667 0 1 1 32.955733 8.874667l-44.373333 164.693333a17.066667 17.066667 0 0 1-16.469333 12.629334z" opacity=".478" p-id="4756"></path><path d="M298.6496 898.56a17.066667 17.066667 0 0 1-14.779733-25.565867l85.333333-148.48a17.083733 17.083733 0 0 1 29.5936 16.9984l-85.333333 148.48a17.032533 17.032533 0 0 1-14.813867 8.567467z" opacity=".439" p-id="4757"></path><path d="M512 955.733333a17.066667 17.066667 0 0 1-17.066667-17.066666V768a17.066667 17.066667 0 1 1 34.133334 0v170.666667a17.066667 17.066667 0 0 1-17.066667 17.066666z" opacity=".522" p-id="4758"></path><path d="M725.3504 898.56a17.032533 17.032533 0 0 1-14.7968-8.533333l-85.333333-147.626667a17.066667 17.066667 0 0 1 29.559466-17.066667l85.333334 147.626667a17.066667 17.066667 0 0 1-14.762667 25.6z" opacity=".6" p-id="4759"></path><path d="M622.062933 942.08c-7.509333 0-14.421333-5.0176-16.469333-12.629333l-44.3904-164.693334a17.066667 17.066667 0 1 1 32.9728-8.874666l44.3904 164.693333a17.066667 17.066667 0 0 1-16.503467 21.504z" opacity=".561" p-id="4760"></path><path d="M759.4496 463.36a17.083733 17.083733 0 0 1-4.420267-33.553067l164.693334-44.373333a17.066667 17.066667 0 0 1 8.874666 32.955733l-164.693333 44.373334a16.657067 16.657067 0 0 1-4.4544 0.597333z" opacity=".702" p-id="4761"></path><path d="M330.24 347.306667a17.015467 17.015467 0 0 1-12.066133-5.000534l-120.32-120.32a17.0496 17.0496 0 1 1 24.132266-24.132266l120.32 120.32a17.0496 17.0496 0 0 1-12.066133 29.1328z" opacity=".161" p-id="4762"></path><path d="M290.116267 401.066667a17.032533 17.032533 0 0 1-8.533334-2.286934l-147.626666-85.333333a17.066667 17.066667 0 1 1 17.083733-29.5424l147.626667 85.333333a17.066667 17.066667 0 0 1-8.5504 31.829334z" opacity=".2" p-id="4763"></path><path d="M142.523733 742.4a17.066667 17.066667 0 0 1-8.567466-31.8464l147.626666-85.333333a17.066667 17.066667 0 1 1 17.083734 29.559466l-147.626667 85.333334a16.930133 16.930133 0 0 1-8.516267 2.286933z" opacity=".361" p-id="4764"></path><path d="M209.92 830.293333a17.066667 17.066667 0 0 1-12.117333-29.098666l120.32-121.173334a17.066667 17.066667 0 0 1 24.2176 24.029867l-120.32 121.1904a16.896 16.896 0 0 1-12.100267 5.051733z" opacity=".4" p-id="4765"></path></svg>
+`
+
 export function initNavigationBar (config: SpaRouterConfig | MpaRouterConfig, container: HTMLElement) {
   if(config.router.mode === 'multi') return
   
   const navigationBar = document.createElement('div')
   navigationBar.classList.add('taro-navigation-bar-no-icon')
+
   const navigationBarBackBtn = document.createElement('div')
   navigationBarBackBtn.classList.add('taro-navigation-bar-back')
   const navigationBarHomeBtn = document.createElement('div')
   navigationBarHomeBtn.classList.add('taro-navigation-bar-home')
   navigationBarBackBtn.innerHTML = back_svg_str
   navigationBarHomeBtn.innerHTML = home_svg_str
+
+  const navigationBarTitleWrap = document.createElement('div')
+  navigationBarTitleWrap.classList.add('taro-navigation-bar-title-wrap')
+  const navigationBarLoading = document.createElement('div')
+  navigationBarLoading.classList.add('taro-navigation-bar-loading')
+  navigationBarLoading.innerHTML = loading_svg_str
   const navigationBarTitle = document.createElement('div')
   navigationBarTitle.classList.add('taro-navigation-bar-title')
+  navigationBarTitleWrap.appendChild(navigationBarLoading)
+  navigationBarTitleWrap.appendChild(navigationBarTitle)
+
   navigationBar.appendChild(navigationBarHomeBtn)
   navigationBar.appendChild(navigationBarBackBtn)
-  navigationBar.appendChild(navigationBarTitle)
+  navigationBar.appendChild(navigationBarTitleWrap)
   navigationBar.id = 'taro-navigation-bar'
   container.prepend(navigationBar)
   loadNavigationBarStyle()
diff --git a/packages/taro-router/src/router/mpa.ts b/packages/taro-router/src/router/mpa.ts
index 0da22e1bdf55..41922c15e571 100644
--- a/packages/taro-router/src/router/mpa.ts
+++ b/packages/taro-router/src/router/mpa.ts
@@ -35,7 +35,7 @@ export async function createMultiRouter (
   if (typeof app.onUnhandledRejection === 'function') {
     window.addEventListener('unhandledrejection', app.onUnhandledRejection)
   }
-  eventCenter.on('__taroH5SetNavigationTitle', setMpaTitle)
+  eventCenter.on('__taroH5SetNavigationBarTitle', setMpaTitle)
   RouterConfig.config = config
   const handler = new MultiPageHandler(config, history)
   const launchParam: Taro.getLaunchOptionsSync.LaunchOptions = {
diff --git a/packages/taro-router/src/router/navigation-bar.ts b/packages/taro-router/src/router/navigation-bar.ts
index 1997052952a6..cc889b4d5f30 100644
--- a/packages/taro-router/src/router/navigation-bar.ts
+++ b/packages/taro-router/src/router/navigation-bar.ts
@@ -11,11 +11,12 @@ interface NavigationBarCache {
   fontColor?: string
   title?: string
   show?: boolean
+  loading?: boolean
 }
 
 export default class NavigationBarHandler {
   pageContext: PageHandler
-  navigationBarElement: Element
+  navigationBarElement: HTMLElement
   cache: Record<string, NavigationBarCache>
   isLoadDdEntry = false
 
@@ -24,11 +25,15 @@ export default class NavigationBarHandler {
     this.pageContext = pageContext
     this.init()
 
-    eventCenter.on('__taroH5SetNavigationTitle', (title)=> {
+    eventCenter.on('__taroH5SetNavigationBarTitle', (title) => {
       this.setTitle(title)
     })
 
-    eventCenter.on('__taroH5setNavigationBarColor', ({ backgroundColor, frontColor })=> {
+    eventCenter.on('__taroH5setNavigationBarLoading', (loading) => {
+      this.setNavigationLoading(loading)
+    })
+
+    eventCenter.on('__taroH5setNavigationBarColor', ({ backgroundColor, frontColor }) => {
       if (typeof backgroundColor === 'string') this.setNavigationBarBackground(backgroundColor)
 
       if (typeof frontColor === 'string') this.setNavigationBarTextStyle(frontColor)
@@ -43,21 +48,26 @@ export default class NavigationBarHandler {
     navigateBack()
   }
 
-  get homeBtnElement (){
+  get homeBtnElement () {
     if (!this.navigationBarElement) return null
     return this.navigationBarElement.getElementsByClassName('taro-navigation-bar-home')?.[0]
   }
 
-  get backBtnElement (){
+  get backBtnElement () {
     if (!this.navigationBarElement) return null
     return this.navigationBarElement.getElementsByClassName('taro-navigation-bar-back')?.[0]
   }
 
-  get titleElement (){
+  get titleElement () {
     if (!this.navigationBarElement) return null
     return this.navigationBarElement.getElementsByClassName('taro-navigation-bar-title')?.[0]
   }
 
+  get loadingElement () {
+    if (!this.navigationBarElement) return null
+    return this.navigationBarElement.getElementsByClassName('taro-navigation-bar-loading')[0]
+  }
+
   init () {
     this.setNavigationBarElement()
     if (!this.navigationBarElement) return
@@ -66,7 +76,7 @@ export default class NavigationBarHandler {
   }
 
   setNavigationBarElement (){
-    this.navigationBarElement = document.getElementById('taro-navigation-bar') as Element
+    this.navigationBarElement = document.getElementById('taro-navigation-bar') as HTMLElement
   }
 
   load () {
@@ -76,6 +86,7 @@ export default class NavigationBarHandler {
     this.setFnBtnState()
     this.setNavigationBarBackground()
     this.setNavigationBarTextStyle()
+    this.setNavigationLoading()
   }
 
   setCacheValue (){
@@ -96,6 +107,38 @@ export default class NavigationBarHandler {
     }
   }
 
+  shiftLoadingState (show: boolean) {
+    if (!this.loadingElement) return
+    if (show) {
+      this.loadingElement.classList.add('taro-navigation-bar-loading-show')
+    } else {
+      this.loadingElement.classList.remove('taro-navigation-bar-loading-show')
+    }
+  }
+
+  setNavigationLoading (show?: boolean) {
+    if (!this.navigationBarElement) return
+    const currentPage = this.pageContext.currentPage
+    let isShow
+    if (typeof show === 'boolean') {
+      isShow = show
+      this.cache[currentPage] &&
+      (this.cache[currentPage].loading = isShow)
+    } else {
+      const cacheValue = this.cache[currentPage]?.loading
+      if (typeof cacheValue === 'boolean') {
+        isShow = cacheValue
+      } else {
+        // 默认值为 false
+        isShow = false
+        this.cache[currentPage] &&
+        (this.cache[currentPage].loading = isShow)
+      }
+    }
+
+    this.shiftLoadingState(isShow)
+  }
+
   setNavigationBarBackground (backgroundColor?: string) {
     if (!this.navigationBarElement) return
 
diff --git a/packages/taro-router/src/style.ts b/packages/taro-router/src/style.ts
index 193562b0e2e0..b753f5f89a2a 100644
--- a/packages/taro-router/src/style.ts
+++ b/packages/taro-router/src/style.ts
@@ -77,13 +77,13 @@ ${
 export function loadNavigationBarStyle () {
   const css = `
   .taro-navigation-bar-show {
+    display: flex;
     background: white;
     position: sticky;
     z-index: 500;
     top: 0;
     padding-bottom: 8px;
     padding-top: calc(env(safe-area-inset-top) + 8px);
-    display: flex;
     justify-content: center;
     align-items: center;
   }
@@ -92,12 +92,37 @@ export function loadNavigationBarStyle () {
     display: none;
   }
 
-  .taro-navigation-bar-title {
-    font-size: 24px;
+  .taro-navigation-bar-title-wrap {
+    display: flex;
     height: 24px;
-    line-height: 24px;
+    > .taro-navigation-bar-title {
+      font-size: 24px;
+      height: 24px;
+      line-height: 24px;
+      max-width: 100px;
+      white-space: nowrap;
+      overflow: hidden;
+      line-height: 24px;
+      text-overflow: ellipsis;
+    }
+    > .taro-navigation-bar-loading {
+      animation: loading 2s linear infinite;
+      display: none;
+      &.taro-navigation-bar-loading-show {
+        display: flex;
+      }
+    }
   }
 
+  @keyframes loading {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }  
+
   .taro-navigation-bar-no-icon > .taro-navigation-bar-home {
     display: none;
   }
@@ -107,7 +132,7 @@ export function loadNavigationBarStyle () {
   }
 
   .taro-navigation-bar-home-icon > .taro-navigation-bar-home {
-    display: block;
+    display: flex;
     left: 8px;
     position: absolute;
     width: 24px;
@@ -115,7 +140,7 @@ export function loadNavigationBarStyle () {
   }
 
   .taro-navigation-bar-back-icon > .taro-navigation-bar-back {
-    display: block;
+    display: flex;
     left: 8px;
     position: absolute;
     width: 24px;
diff --git a/packages/taro-router/src/utils/navigate.ts b/packages/taro-router/src/utils/navigate.ts
index 576c2704b17a..4064b8e48b72 100644
--- a/packages/taro-router/src/utils/navigate.ts
+++ b/packages/taro-router/src/utils/navigate.ts
@@ -20,9 +20,13 @@ export function setMpaTitle (title: string): void {
 }
 
 export function setTitle (title: string): void {
-  eventCenter.trigger('__taroH5SetNavigationTitle', title)
+  eventCenter.trigger('__taroH5SetNavigationBarTitle', title)
 }
 
-export function setNavigationBarStyle (option: { backgroundColor: string, frontColor: string }){
+export function setNavigationBarStyle (option: { backgroundColor: string, frontColor: string }):void {
   eventCenter.trigger('__taroH5setNavigationBarColor', option)
 }
+
+export function setNavigationBarLoading (loading: boolean): void {
+  eventCenter.trigger('__taroH5setNavigationBarLoading', loading)
+}
\ No newline at end of file
diff --git a/packages/taro/types/compile/config/h5.d.ts b/packages/taro/types/compile/config/h5.d.ts
index bffca29af4f1..5aeaec609640 100644
--- a/packages/taro/types/compile/config/h5.d.ts
+++ b/packages/taro/types/compile/config/h5.d.ts
@@ -96,7 +96,7 @@ export interface IH5Config {
   /** 配置需要额外的经由 Taro 预设的 postcss 编译的模块 */
   esnextModules?: string[]
 
-  /** 用于控制在 H5 端是否使用兼容性组件库，详情请看 [React 兼容性组件库](https://taro-docs.jd.com/docs/next/h5#react-兼容性组件库)。(默认值：false) */
+  /** 用于控制在 H5 端是否使用兼容性组件库，详情请看 [React 兼容性组件库](https://taro-docs.jd.com/docs/h5#react-兼容性组件库)。(默认值：false) */
   useHtmlComponents?: boolean
 
   /** 用于控制在 H5 端是否使用旧版本适配器，旧版本采用全局注册组件，懒加载组件相关依赖；新版本适配器会自动注册相关组件，不再需要引入 @tarojs/components/loader 中的全局 defineCustomElements 方法。(默认值：false) */
diff --git a/packages/taro/types/compile/config/rn.d.ts b/packages/taro/types/compile/config/rn.d.ts
index 221a8660976c..a7a481e261fd 100644
--- a/packages/taro/types/compile/config/rn.d.ts
+++ b/packages/taro/types/compile/config/rn.d.ts
@@ -20,7 +20,7 @@ export interface IRNConfig {
   /** [less](https://lesscss.org/usage/#less-options) 相关配置 */
   less?: IOption
 
-  /** [stylus](https://github.com/NervJS/taro/blob/next/packages/taro-rn-style-transformer/README.md#rnstylus) 相关配置 */
+  /** [stylus](https://github.com/NervJS/taro/blob/main/packages/taro-rn-style-transformer/README.md#rnstylus) 相关配置 */
   stylus?: IOption
 
   /** 配置 postcss 相关插件 */