diff --git a/packages/uni-api/src/service/context/canvas.ts b/packages/uni-api/src/service/context/canvas.ts
index ccc2bbc19ecb34885ecdf94ad2bb3f8c4d4b3c1b..13a413fe33ae2dc622d3519899ad9779fede4215 100644
--- a/packages/uni-api/src/service/context/canvas.ts
+++ b/packages/uni-api/src/service/context/canvas.ts
@@ -28,7 +28,8 @@ import type {
 import { hasOwn } from '@vue/shared'
 
 import {
-  getCurrentPageId,
+  getPageIdByVm,
+  getCurrentPageVm,
   createCallbacks,
   ServiceJSBridge,
 } from '@dcloudio/uni-core'
@@ -1005,9 +1006,9 @@ export const createCanvasContext =
     API_CREATE_CANVAS_CONTEXT,
     (canvasId, componentInstance): any => {
       if (componentInstance) {
-        return new CanvasContext(canvasId, componentInstance.$page.id)
+        return new CanvasContext(canvasId, getPageIdByVm(componentInstance)!)
       }
-      const pageId = getCurrentPageId()
+      const pageId = getPageIdByVm(getCurrentPageVm()!)!
       if (pageId) {
         return new CanvasContext(canvasId, pageId)
       } else {
@@ -1021,7 +1022,7 @@ export const canvasGetImageData =
   defineAsyncApi<API_TYPE_CANVAS_GET_IMAGE_DATA>(
     API_CANVAS_GET_IMAGE_DATA,
     ({ canvasId, x, y, width, height }, { resolve, reject }) => {
-      const pageId = getCurrentPageId()
+      const pageId = getPageIdByVm(getCurrentPageVm()!)!
       if (!pageId) {
         reject()
         return
@@ -1056,7 +1057,7 @@ export const canvasPutImageData =
   defineAsyncApi<API_TYPE_CANVAS_PUT_IMAGE_DATA>(
     API_CANVAS_PUT_IMAGE_DATA,
     async ({ canvasId, data, x, y, width, height }, { resolve, reject }) => {
-      var pageId = getCurrentPageId()
+      var pageId = getPageIdByVm(getCurrentPageVm()!)!
       if (!pageId) {
         reject()
         return
@@ -1111,7 +1112,7 @@ export const canvasToTempFilePath =
       },
       { resolve, reject }
     ) => {
-      var pageId = getCurrentPageId()
+      var pageId = getPageIdByVm(getCurrentPageVm()!)!
       if (!pageId) {
         reject()
         return
diff --git a/packages/uni-api/src/service/context/createMapContext.ts b/packages/uni-api/src/service/context/createMapContext.ts
index 45f5e7607194cdb2931227c0c8eae801cd63c75c..dc4f10d932b59cdc298b5305d27630b12345fc8f 100644
--- a/packages/uni-api/src/service/context/createMapContext.ts
+++ b/packages/uni-api/src/service/context/createMapContext.ts
@@ -1,5 +1,4 @@
-import { ComponentPublicInstance } from 'vue'
-import { getCurrentPageVm } from '@dcloudio/uni-core'
+import { getPageIdByVm, getCurrentPageVm } from '@dcloudio/uni-core'
 import { operateMap } from '@dcloudio/uni-platform'
 import { defineSyncApi } from '../../helpers/api'
 import {
@@ -8,30 +7,30 @@ import {
   CreateMapContextProtocol,
 } from '../../protocols/context/context'
 
-class MapContext implements UniApp.MapContext {
+export class MapContext implements UniApp.MapContext {
   private id: string
-  private vm: ComponentPublicInstance
-  constructor(id: string, vm: ComponentPublicInstance) {
+  private pageId: number
+  constructor(id: string, pageId: number) {
     this.id = id
-    this.vm = vm
+    this.pageId = pageId
   }
   getCenterLocation(options: any) {
-    operateMap(this.id, this.vm, 'getCenterLocation', options)
+    operateMap(this.id, this.pageId, 'getCenterLocation', options)
   }
   moveToLocation() {
-    operateMap(this.id, this.vm, 'moveToLocation')
+    operateMap(this.id, this.pageId, 'moveToLocation')
   }
   getScale(options: any) {
-    operateMap(this.id, this.vm, 'getScale', options)
+    operateMap(this.id, this.pageId, 'getScale', options)
   }
   getRegion(options: any) {
-    operateMap(this.id, this.vm, 'getRegion', options)
+    operateMap(this.id, this.pageId, 'getRegion', options)
   }
   includePoints(options: any) {
-    operateMap(this.id, this.vm, 'includePoints', options)
+    operateMap(this.id, this.pageId, 'includePoints', options)
   }
   translateMarker(options: any) {
-    operateMap(this.id, this.vm, 'translateMarker', options)
+    operateMap(this.id, this.pageId, 'translateMarker', options)
   }
   addCustomLayer() {}
   removeCustomLayer() {}
@@ -50,9 +49,9 @@ export const createMapContext = <API_TYPE_CREATE_MAP_CONTEXT>defineSyncApi(
   API_CREATE_MAP_CONTEXT,
   (id, context) => {
     if (context) {
-      return new MapContext(id, context)
+      return new MapContext(id, getPageIdByVm(context)!)
     }
-    return new MapContext(id, getCurrentPageVm()!)
+    return new MapContext(id, getPageIdByVm(getCurrentPageVm()!)!)
   },
   CreateMapContextProtocol
 )
diff --git a/packages/uni-api/src/service/context/createVideoContext.ts b/packages/uni-api/src/service/context/createVideoContext.ts
index 7e94caab2c34a5048e15ef1eaeb5687480e85703..510e312be14f8ec522fa88624d3ea188dfa14064 100644
--- a/packages/uni-api/src/service/context/createVideoContext.ts
+++ b/packages/uni-api/src/service/context/createVideoContext.ts
@@ -1,5 +1,4 @@
-import { ComponentPublicInstance } from 'vue'
-import { getCurrentPageVm } from '@dcloudio/uni-core'
+import { getPageIdByVm, getCurrentPageVm } from '@dcloudio/uni-core'
 import { operateVideoPlayer } from '@dcloudio/uni-platform'
 import { defineSyncApi } from '../../helpers/api'
 import {
@@ -11,39 +10,39 @@ const RATES = [0.5, 0.8, 1.0, 1.25, 1.5, 2.0]
 
 export class VideoContext {
   private id: string
-  private vm: ComponentPublicInstance
-  constructor(id: string, vm: ComponentPublicInstance) {
+  private pageId: number
+  constructor(id: string, pageId: number) {
     this.id = id
-    this.vm = vm
+    this.pageId = pageId
   }
 
   play() {
-    operateVideoPlayer(this.id, this.vm, 'play')
+    operateVideoPlayer(this.id, this.pageId, 'play')
   }
 
   pause() {
-    operateVideoPlayer(this.id, this.vm, 'pause')
+    operateVideoPlayer(this.id, this.pageId, 'pause')
   }
 
   stop() {
-    operateVideoPlayer(this.id, this.vm, 'stop')
+    operateVideoPlayer(this.id, this.pageId, 'stop')
   }
 
   seek(position?: number) {
-    operateVideoPlayer(this.id, this.vm, 'seek', {
+    operateVideoPlayer(this.id, this.pageId, 'seek', {
       position,
     })
   }
 
   sendDanmu(args: WechatMiniprogram.Danmu) {
-    operateVideoPlayer(this.id, this.vm, 'sendDanmu', args)
+    operateVideoPlayer(this.id, this.pageId, 'sendDanmu', args)
   }
 
   playbackRate(rate: number) {
     if (!~RATES.indexOf(rate)) {
       rate = 1.0
     }
-    operateVideoPlayer(this.id, this.vm, 'playbackRate', {
+    operateVideoPlayer(this.id, this.pageId, 'playbackRate', {
       rate,
     })
   }
@@ -51,19 +50,19 @@ export class VideoContext {
   requestFullScreen(
     args: WechatMiniprogram.VideoContextRequestFullScreenOption = {}
   ) {
-    operateVideoPlayer(this.id, this.vm, 'requestFullScreen', args)
+    operateVideoPlayer(this.id, this.pageId, 'requestFullScreen', args)
   }
 
   exitFullScreen() {
-    operateVideoPlayer(this.id, this.vm, 'exitFullScreen')
+    operateVideoPlayer(this.id, this.pageId, 'exitFullScreen')
   }
 
   showStatusBar() {
-    operateVideoPlayer(this.id, this.vm, 'showStatusBar')
+    operateVideoPlayer(this.id, this.pageId, 'showStatusBar')
   }
 
   hideStatusBar() {
-    operateVideoPlayer(this.id, this.vm, 'hideStatusBar')
+    operateVideoPlayer(this.id, this.pageId, 'hideStatusBar')
   }
 }
 
@@ -71,8 +70,8 @@ export const createVideoContext = defineSyncApi<API_TYPE_CREATE_VIDEO_CONTEXT>(
   API_CREATE_VIDEO_CONTEXT,
   (id, context) => {
     if (context) {
-      return new VideoContext(id, context)
+      return new VideoContext(id, getPageIdByVm(context)!)
     }
-    return new VideoContext(id, getCurrentPageVm()!)
+    return new VideoContext(id, getPageIdByVm(getCurrentPageVm()!)!)
   }
 )
diff --git a/packages/uni-h5/src/service/api/context/operateMap.ts b/packages/uni-h5/src/service/api/context/operateMap.ts
index 9e5fe00413db97a95c1814fb5d36dc8fa7c93ef7..8255ca4370400f3b5a80c9cc7ee57d89ac2ab582 100644
--- a/packages/uni-h5/src/service/api/context/operateMap.ts
+++ b/packages/uni-h5/src/service/api/context/operateMap.ts
@@ -1,13 +1,9 @@
-import { ComponentPublicInstance } from 'vue'
-import { getPageIdByVm } from '@dcloudio/uni-core'
-
 export function operateMap(
   id: string,
-  vm: ComponentPublicInstance,
+  pageId: number,
   type: string,
   data?: unknown
 ) {
-  const pageId = getPageIdByVm(vm)!
   UniServiceJSBridge.publishHandler(
     'map.' + id,
     {
diff --git a/packages/uni-h5/src/service/api/context/operateVideoPlayer.ts b/packages/uni-h5/src/service/api/context/operateVideoPlayer.ts
index 84e4a199a7e9afbb30bbfb71e9324402b7fc604a..7859f79244f31cc205e80a40f60828ec8fd50bcb 100644
--- a/packages/uni-h5/src/service/api/context/operateVideoPlayer.ts
+++ b/packages/uni-h5/src/service/api/context/operateVideoPlayer.ts
@@ -1,13 +1,9 @@
-import { ComponentPublicInstance } from 'vue'
-import { getPageIdByVm } from '@dcloudio/uni-core'
-
 export function operateVideoPlayer(
   videoId: string,
-  vm: ComponentPublicInstance,
+  pageId: number,
   type: string,
   data?: unknown
 ) {
-  const pageId = getPageIdByVm(vm)!
   UniServiceJSBridge.publishHandler(
     'video.' + videoId,
     {