chore: useSubscribe use registerViewMethod、unregisterViewMethod

packages/uni-api/src/service/context/canvas.ts

@@ -43,31 +43,27 @@ import { TEMP_PATH } from '@dcloudio/uni-platform'
 //#region UniServiceJSBridge
 const canvasEventCallbacks = createCallbacks('canvasEvent')
 
-const onCanvasMethodCallback = /*#__PURE__*/ once(() => {
-  UniServiceJSBridge.subscribe(
-    'onCanvasMethodCallback',
-    ({ callbackId, data }: { callbackId: number | string; data: any }) => {
-      const callback = canvasEventCallbacks.pop(callbackId)
-      if (callback) {
-        callback(data)
-      }
-    }
-  )
-})
-
 function operateCanvas(
   canvasId: string,
   pageId: number,
   type: unknown,
   data: any
 ) {
-  UniServiceJSBridge.publishHandler(
-    'canvas.' + canvasId,
+  UniServiceJSBridge.invokeViewMethod<
+    {},
+    { callbackId: number | string; data: any }
+  >(
+    `canvas.${canvasId}`,
     {
-      canvasId,
       type,
       data,
     },
+    ({ callbackId, data }) => {
+      const callback = canvasEventCallbacks.pop(callbackId)
+      if (callback) {
+        callback(data)
+      }
+    },
     pageId
   )
 }
@@ -1046,7 +1042,7 @@ export const canvasGetImageData =
   defineAsyncApi<API_TYPE_CANVAS_GET_IMAGE_DATA>(
     API_CANVAS_GET_IMAGE_DATA,
     ({ canvasId, x, y, width, height }, { resolve, reject }) => {
-      onCanvasMethodCallback()
+      // onCanvasMethodCallback()
       const pageId = getPageIdByVm(getCurrentPageVm()!)!
       if (!pageId) {
         reject()
@@ -1085,7 +1081,7 @@ export const canvasPutImageData =
   defineAsyncApi<API_TYPE_CANVAS_PUT_IMAGE_DATA>(
     API_CANVAS_PUT_IMAGE_DATA,
     ({ canvasId, data, x, y, width, height }, { resolve, reject }) => {
-      onCanvasMethodCallback()
+      // onCanvasMethodCallback()
       var pageId = getPageIdByVm(getCurrentPageVm()!)!
       if (!pageId) {
         reject()
@@ -1144,7 +1140,7 @@ export const canvasToTempFilePath =
       },
       { resolve, reject }
     ) => {
-      onCanvasMethodCallback()
+      // onCanvasMethodCallback()
       var pageId = getPageIdByVm(getCurrentPageVm()!)!
       if (!pageId) {
         reject()

packages/uni-components/src/components/canvas/index.tsx

@@ -8,7 +8,7 @@ import {
   withWebEvent,
   defineBuiltInComponent,
 } from '@dcloudio/uni-components'
-import { getCurrentPageId, onEventPrevent } from '@dcloudio/uni-core'
+import { onEventPrevent } from '@dcloudio/uni-core'
 import {
   saveImage,
   getSameOriginUrl,
@@ -67,6 +67,11 @@ const props = {
 }
 
 type Props = ExtractPropTypes<typeof props>
+type triggerMethodsName =
+  | 'actionsChanged'
+  | 'getImageData'
+  | 'putImageData'
+  | 'toTempFilePath'
 
 export default /*#__PURE__*/ defineBuiltInComponent({
   inheritAttrs: false,
@@ -94,11 +99,20 @@ export default /*#__PURE__*/ defineBuiltInComponent({
     const { _handleSubscribe, _resize } = useMethods(canvas, actionsWaiting)
 
     useSubscribe(
-      _handleSubscribe as (type: string, data: unknown) => void,
+      _handleSubscribe as (
+        type: string,
+        data: unknown,
+        resolve: (res: any) => void
+      ) => void,
       useContextInfo(props.canvasId),
       true
     )
 
+    /* registerViewMethod<
+      { type: triggerMethodsName; data: any },
+      { callbackId: number; data: any }
+    >(getCurrentPageId(), `canvas.${props.canvasId}`, _handleSubscribe) */
+
     onMounted(() => {
       _resize()
     })
@@ -214,7 +228,8 @@ function useMethods(
       wrapper(canvas)
     }
   }
-  function actionsChanged({
+  function actionsChanged(
+    {
       actions,
       reserve,
       callbackId,
@@ -222,7 +237,9 @@ function useMethods(
       actions: Actions
       reserve: boolean
       callbackId: number
-  }) {
+    },
+    resolve: (res: { callbackId: number; data: any }) => void
+  ) {
     if (!actions) {
       return
     }
@@ -284,6 +301,7 @@ function useMethods(
               data[1] as string,
               actions.slice(index + 1),
               callbackId,
+              resolve,
               function (image) {
                 if (image) {
                   c2d[method1] = c2d.createPattern(image, data[2] as string)!
@@ -357,6 +375,7 @@ function useMethods(
               url,
               actions.slice(index + 1),
               callbackId,
+              resolve,
               function (image) {
                 if (image) {
                   c2d.drawImage.apply(
@@ -391,16 +410,12 @@ function useMethods(
       }
     }
     if (!actionsWaiting.value && callbackId) {
-      UniViewJSBridge.publishHandler(
-        'onCanvasMethodCallback',
-        {
+      resolve({
         callbackId,
         data: {
           errMsg: 'drawCanvas:ok',
         },
-        },
-        getCurrentPageId()
-      )
+      })
     }
   }
   function preloadImage(actions: Actions) {
@@ -453,6 +468,7 @@ function useMethods(
     src: string,
     actions: Actions,
     callbackId: number,
+    resolve: (res: { callbackId: number; data: any }) => void,
     fn: (a: CanvasImageSource) => void
   ) {
     var image = _images[src]
@@ -469,18 +485,22 @@ function useMethods(
         var actions = _actionsDefer.slice(0)
         _actionsDefer = []
         for (var action = actions.shift(); action; ) {
-          actionsChanged({
+          actionsChanged(
+            {
+              callbackId,
               actions: action[0],
               reserve: action[1],
-            callbackId,
-          })
+            },
+            resolve
+          )
           action = actions.shift()
         }
       }
       return false
     }
   }
-  function getImageData({
+  function getImageData(
+    {
       x = 0,
       y = 0,
       width,
@@ -504,7 +524,9 @@ function useMethods(
       quality: number
       type: string
       callbackId?: number
-  }) {
+    },
+    resolve?: (res: { callbackId: number; data: any }) => void
+  ) {
     const canvas = canvasRef.value!
     let data: string | number[]
     const maxWidth = canvas.offsetWidth - x
@@ -580,17 +602,15 @@ function useMethods(
     if (!callbackId) {
       return result
     } else {
-      UniViewJSBridge.publishHandler(
-        'onCanvasMethodCallback',
-        {
+      resolve &&
+        resolve({
           callbackId,
           data: result,
-        },
-        getCurrentPageId()
-      )
+        })
     }
   }
-  function putImageData({
+  function putImageData(
+    {
       data,
       x,
       y,
@@ -606,7 +626,9 @@ function useMethods(
       height: number
       compressed: boolean
       callbackId: number
-  }) {
+    },
+    resolve: (res: { callbackId: number; data: any }) => void
+  ) {
     try {
       if (!height) {
         height = Math.round(data.length / 4 / width)
@@ -625,30 +647,23 @@ function useMethods(
       canvasRef.value!.getContext('2d')!.drawImage(canvas, x, y, width, height)
       canvas.height = canvas.width = 0
     } catch (error) {
-      UniViewJSBridge.publishHandler(
-        'onCanvasMethodCallback',
-        {
+      resolve({
         callbackId,
         data: {
           errMsg: 'canvasPutImageData:fail',
         },
-        },
-        getCurrentPageId()
-      )
+      })
       return
     }
-    UniViewJSBridge.publishHandler(
-      'onCanvasMethodCallback',
-      {
+    resolve({
       callbackId,
       data: {
         errMsg: 'canvasPutImageData:ok',
       },
-      },
-      getCurrentPageId()
-    )
+    })
   }
-  function toTempFilePath({
+  function toTempFilePath(
+    {
       x = 0,
       y = 0,
       width,
@@ -670,7 +685,9 @@ function useMethods(
       quality: number
       dirname: string
       callbackId: number
-  }) {
+    },
+    resolve: (res: { callbackId: number; data: any }) => void
+  ) {
     const res = getImageData({
       x,
       y,
@@ -684,16 +701,12 @@ function useMethods(
       quality,
     })!
     if (!res.data || !res.data.length) {
-      UniViewJSBridge.publishHandler(
-        'onCanvasMethodCallback',
-        {
+      resolve({
         callbackId,
         data: {
           errMsg: res!.errMsg.replace('canvasPutImageData', 'toTempFilePath'),
         },
-        },
-        getCurrentPageId()
-      )
+      })
       return
     }
     saveImage(res.data as string, dirname, (error, tempFilePath) => {
@@ -701,17 +714,13 @@ function useMethods(
       if (error) {
         errMsg += ` ${error.message}`
       }
-      UniViewJSBridge.publishHandler(
-        'onCanvasMethodCallback',
-        {
+      resolve({
         callbackId,
         data: {
           errMsg,
           tempFilePath: tempFilePath,
         },
-        },
-        getCurrentPageId()
-      )
+      })
     })
   }
 
@@ -722,10 +731,14 @@ function useMethods(
     toTempFilePath,
   }
 
-  function _handleSubscribe(type: keyof typeof methods, data = {}) {
+  function _handleSubscribe(
+    type: triggerMethodsName,
+    data: any,
+    resolve: (res: { callbackId: number; data: any }) => void
+  ) {
     let method = methods[type]
     if (type.indexOf('_') !== 0 && typeof method === 'function') {
-      method(data as any)
+      method(data as any, resolve)
     }
   }
 

packages/uni-components/src/components/editor/quill/index.ts

@@ -6,9 +6,8 @@ import QuillClass, {
   RangeStatic,
   StringMap,
 } from 'quill'
-import { useContextInfo } from '@dcloudio/uni-components'
+import { useContextInfo, useSubscribe } from '@dcloudio/uni-components'
 import { getRealPath } from '@dcloudio/uni-platform'
-import { getCurrentPageId, registerViewMethod } from '@dcloudio/uni-core'
 import { CustomEventTrigger } from '../../../helpers/useEvent'
 import HTMLParser from '../../../helpers/html-parser'
 import loadScript from './loadScript'
@@ -56,7 +55,6 @@ interface WindowExt extends Window {
 
 export function useQuill(
   props: {
-    id: string
     readOnly?: any
     placeholder?: any
     showImgSize?: any
@@ -257,13 +255,9 @@ export function useQuill(
       }
     })
   })
-  registerViewMethod<
-    {
-      type: string
-      data: { callbackId?: string; options: any }
-    },
-    { callbackId: string; data: any }
-  >(getCurrentPageId(), `editor.${props.id}`, ({ type, data }, resolve) => {
+  const id = useContextInfo()
+  useSubscribe<{ callbackId: string; data: any }>(
+    (type, data: any, resolve) => {
       const { options, callbackId } = data
       let res
       let range: RangeStatic | undefined
@@ -421,5 +415,8 @@ export function useQuill(
           }),
         })
       }
-  })
+    },
+    id,
+    true
+  )
 }

packages/uni-components/src/helpers/useContextInfo.ts

@@ -27,7 +27,7 @@ export function useContextInfo(_id?: string) {
       page,
     }
   })
-  return `${page}.${type}.${id}`
+  return `${type}.${id}`
 }
 export function getContextInfo(el: HTMLElement | HTMLElementWithContextInfo) {
   return (el as HTMLElementWithContextInfo).__uniContextInfo

packages/uni-components/src/helpers/useSubscribe.ts

@@ -5,30 +5,41 @@ import {
   getCurrentInstance,
   ComponentPublicInstance,
 } from 'vue'
-import { useCurrentPageId } from '@dcloudio/uni-core'
+import {
+  getCurrentPageId,
+  registerViewMethod,
+  unregisterViewMethod,
+} from '@dcloudio/uni-core'
 
-function normalizeEvent(
-  pageId: number,
-  vm: ComponentPublicInstance,
-  id?: string
-) {
+type SubscribeCallbackRes<Res = any> = (
+  type: string,
+  data: unknown,
+  resolve: (res: Res) => void
+) => void
+
+function normalizeEvent(vm: ComponentPublicInstance, id?: string) {
   if (!id) {
     id = (vm as any).id
   }
   if (!id) {
     return
   }
-  return pageId + '.' + vm.$options.name!.toLowerCase() + '.' + id
+  return vm.$options.name!.toLowerCase() + '.' + id
 }
 
-function addSubscribe(name: string, callback: Function) {
+function addSubscribe(name: string, callback: SubscribeCallbackRes) {
   if (!name) {
     return
   }
-  UniViewJSBridge.subscribe(
+
+  registerViewMethod(
+    getCurrentPageId(),
     name,
-    ({ type, data }: { type: string; data: unknown }) => {
-      callback(type, data)
+    (
+      { type, data }: { type: string; data: unknown },
+      resolve: Parameters<SubscribeCallbackRes>[2]
+    ) => {
+      callback(type, data, resolve)
     }
   )
 }
@@ -37,31 +48,30 @@ function removeSubscribe(name: string) {
   if (!name) {
     return
   }
-  UniViewJSBridge.unsubscribe(name)
+  unregisterViewMethod(getCurrentPageId(), name)
 }
 
-export function useSubscribe(
-  callback: (type: string, data: unknown) => void,
+export function useSubscribe<Res = any>(
+  callback: SubscribeCallbackRes<Res>,
   name?: string,
   multiple?: boolean
 ) {
   const instance = getCurrentInstance()!
   const vm = instance.proxy!
-  const pageId = multiple || !name ? useCurrentPageId() : 0
   onMounted(() => {
-    addSubscribe(name || normalizeEvent(pageId, vm)!, callback)
+    addSubscribe(name || normalizeEvent(vm)!, callback)
     if (multiple || !name) {
       watch(
         () => (vm as any).id,
         (value, oldValue) => {
-          addSubscribe(normalizeEvent(pageId, vm, value)!, callback)
-          removeSubscribe(oldValue && normalizeEvent(pageId, vm, oldValue)!)
+          addSubscribe(normalizeEvent(vm, value)!, callback)
+          removeSubscribe(oldValue && normalizeEvent(vm, oldValue)!)
         }
       )
     }
   })
   onBeforeUnmount(() => {
-    removeSubscribe(name || normalizeEvent(pageId, vm)!)
+    removeSubscribe(name || normalizeEvent(vm)!)
   })
 }
 

packages/uni-core/src/view/bridge/index.ts

@@ -50,6 +50,11 @@ export function registerViewMethod<Args = any, Res = any>(
   }
 }
 
+export function unregisterViewMethod(pageId: number, name: string) {
+  name = normalizeViewMethodName(pageId, name)
+  delete viewMethods[name]
+}
+
 function onInvokeViewMethod(
   {
     id,

packages/uni-core/src/view/index.ts

@@ -3,6 +3,7 @@ export {
   subscribeViewMethod,
   unsubscribeViewMethod,
   registerViewMethod,
+  unregisterViewMethod,
 } from './bridge'
 export { initView } from './init'
 export { initViewPlugin } from './plugin'