refactor: useSubscribe

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

 import {
   watch,
   onMounted,
-  onBeforeMount,
+  onBeforeUnmount,
   getCurrentInstance,
   ComponentPublicInstance,
 } from 'vue'
 
-function normalizeEvent(componentId: string, vm: ComponentPublicInstance) {
-  return (
-    vm.$page.id +
-    '-' +
-    vm.$options.name!.replace(/VUni([A-Z])/, '$1').toLowerCase() +
-    '-' +
-    componentId
-  )
-}
-
-function addSubscribe(
-  componentId: string,
+function normalizeEvent(
+  pageId: number,
   vm: ComponentPublicInstance,
-  callback: Function
+  id?: string
 ) {
+  if (!id) {
+    id = (vm as any).id
+  }
+  if (!id) {
+    return
+  }
+  return pageId + '.' + vm.$options.name!.toLowerCase() + '.' + id
+}
+
+function addSubscribe(name: string, callback: Function) {
+  if (!name) {
+    return
+  }
   UniViewJSBridge.subscribe(
-    normalizeEvent(componentId, vm),
+    name,
     ({ type, data }: { type: string; data: unknown }) => {
       callback(type, data)
     }
   )
 }
 
-function removeSubscribe(componentId: string, vm: ComponentPublicInstance) {
-  UniViewJSBridge.unsubscribe(normalizeEvent(componentId, vm))
+function removeSubscribe(name: string) {
+  if (!name) {
+    return
+  }
+  UniViewJSBridge.unsubscribe(name)
 }
 
-export function useSubscribe(callback: (type: string, data: unknown) => void) {
-  const instance = getCurrentInstance()!.proxy!
+export function useSubscribe(
+  callback: (type: string, data: unknown) => void,
+  name?: string
+) {
+  const instance = getCurrentInstance()!
+  const vm = instance.proxy!
+  const pageId = name ? 0 : vm.$root!.$page.id
   onMounted(() => {
-    addSubscribe((instance as any).id, instance, callback)
-    watch(
-      () => (instance as any).id,
-      (value, oldValue) => {
-        addSubscribe(value, instance, callback)
-        removeSubscribe(oldValue, instance)
-      }
-    )
+    addSubscribe(name || normalizeEvent(pageId, vm)!, callback)
+    if (!name) {
+      watch(
+        () => (instance as any).id,
+        (value, oldValue) => {
+          addSubscribe(normalizeEvent(pageId, vm, value)!, callback)
+          removeSubscribe(normalizeEvent(pageId, vm, oldValue)!)
+        }
+      )
+    }
   })
-  onBeforeMount(() => {
-    removeSubscribe((instance as any).id, instance)
+  onBeforeUnmount(() => {
+    removeSubscribe(name || normalizeEvent(pageId, vm)!)
   })
 }

packages/uni-h5/dist/uni-h5.esm.js

@@ -604,7 +604,7 @@ var safeAreaInsets = {
   onChange,
   offChange
 };
-var D__DCloud_local_git_uniAppNext_node_modules_safeAreaInsets_out = safeAreaInsets;
+var out = safeAreaInsets;
 function getWindowOffset() {
   const style = document.documentElement.style;
   const top = parseInt(style.getPropertyValue("--window-top"));
@@ -612,10 +612,10 @@ function getWindowOffset() {
   const left = parseInt(style.getPropertyValue("--window-left"));
   const right = parseInt(style.getPropertyValue("--window-right"));
   return {
-    top: top ? top + D__DCloud_local_git_uniAppNext_node_modules_safeAreaInsets_out.top : 0,
-    bottom: bottom ? bottom + D__DCloud_local_git_uniAppNext_node_modules_safeAreaInsets_out.bottom : 0,
-    left: left ? left + D__DCloud_local_git_uniAppNext_node_modules_safeAreaInsets_out.left : 0,
-    right: right ? right + D__DCloud_local_git_uniAppNext_node_modules_safeAreaInsets_out.right : 0
+    top: top ? top + out.top : 0,
+    bottom: bottom ? bottom + out.bottom : 0,
+    left: left ? left + out.left : 0,
+    right: right ? right + out.right : 0
   };
 }
 const isClickEvent = (val) => val.type === "click";
@@ -1097,7 +1097,7 @@ function normalizePageMeta(pageMeta) {
       let offset = rpx2px(refreshOptions.offset);
       const {type} = navigationBar;
       if (type !== "transparent" && type !== "none") {
-        offset += NAVBAR_HEIGHT + D__DCloud_local_git_uniAppNext_node_modules_safeAreaInsets_out.top;
+        offset += NAVBAR_HEIGHT + out.top;
       }
       refreshOptions.offset = offset;
       refreshOptions.height = rpx2px(refreshOptions.height);
@@ -1363,9 +1363,9 @@ function wrapperComponentSetup(comp, {init: init2, setup, after}) {
   comp.setup = (props2, ctx) => {
     const instance2 = getCurrentInstance();
     init2(instance2.proxy);
-    setup(instance2);
+    const query = setup(instance2);
     if (oldSetup) {
-      return oldSetup(props2, ctx);
+      return oldSetup(query, ctx);
     }
   };
   after && after(comp);
@@ -1382,6 +1382,7 @@ function setupPage(comp) {
   return setupComponent(comp, {
     init: initPage,
     setup(instance2) {
+      instance2.root = instance2;
       const route = usePageRoute();
       if (route.meta.isTabBar) {
         instance2.__isActive = true;
@@ -1410,6 +1411,7 @@ function setupPage(comp) {
           onHide && invokeArrayFns$1(onHide);
         }
       });
+      return route.query;
     }
   });
 }
@@ -1436,6 +1438,7 @@ function setupApp(comp) {
           }
         });
       });
+      return route.query;
     },
     after(comp2) {
       comp2.mpType = "app";
@@ -3729,8 +3732,8 @@ function getBaseSystemInfo() {
   };
 }
 function operateVideoPlayer(videoId, vm, type, data) {
-  const pageId = vm.$page.id;
-  UniServiceJSBridge.publishHandler(pageId + "-video-" + videoId, {
+  const pageId = vm.$root.$page.id;
+  UniServiceJSBridge.publishHandler("video." + videoId, {
     videoId,
     type,
     data
@@ -9892,28 +9895,44 @@ var index$1 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-function normalizeEvent(componentId, vm) {
-  return vm.$page.id + "-" + vm.$options.name.replace(/VUni([A-Z])/, "$1").toLowerCase() + "-" + componentId;
+function normalizeEvent(pageId, vm, id2) {
+  if (!id2) {
+    id2 = vm.id;
+  }
+  if (!id2) {
+    return;
+  }
+  return pageId + "." + vm.$options.name.toLowerCase() + "." + id2;
 }
-function addSubscribe(componentId, vm, callback) {
-  UniViewJSBridge.subscribe(normalizeEvent(componentId, vm), ({type, data}) => {
+function addSubscribe(name, callback) {
+  if (!name) {
+    return;
+  }
+  UniViewJSBridge.subscribe(name, ({type, data}) => {
     callback(type, data);
   });
 }
-function removeSubscribe(componentId, vm) {
-  UniViewJSBridge.unsubscribe(normalizeEvent(componentId, vm));
+function removeSubscribe(name) {
+  if (!name) {
+    return;
+  }
+  UniViewJSBridge.unsubscribe(name);
 }
-function useSubscribe(callback) {
-  const instance2 = getCurrentInstance().proxy;
+function useSubscribe(callback, name) {
+  const instance2 = getCurrentInstance();
+  const vm = instance2.proxy;
+  const pageId = name ? 0 : vm.$root.$page.id;
   onMounted(() => {
-    addSubscribe(instance2.id, instance2, callback);
-    watch(() => instance2.id, (value, oldValue) => {
-      addSubscribe(value, instance2, callback);
-      removeSubscribe(oldValue, instance2);
-    });
+    addSubscribe(name || normalizeEvent(pageId, vm), callback);
+    if (!name) {
+      watch(() => instance2.id, (value, oldValue) => {
+        addSubscribe(normalizeEvent(pageId, vm, value), callback);
+        removeSubscribe(normalizeEvent(pageId, vm, oldValue));
+      });
+    }
   });
-  onBeforeMount(() => {
-    removeSubscribe(instance2.id, instance2);
+  onBeforeUnmount(() => {
+    removeSubscribe(name || normalizeEvent(pageId, vm));
   });
 }
 const passiveOptions = passive(false);
@@ -10086,11 +10105,6 @@ const _sfc_main$3 = {
       this.updateProgress();
     },
     buffered(buffered) {
-      if (buffered !== 0) {
-        this.$trigger("progress", {}, {
-          buffered
-        });
-      }
     }
   },
   setup() {
@@ -10848,7 +10862,7 @@ const getSystemInfoSync = defineSyncApi("getSystemInfoSync", () => {
   const windowWidth = getWindowWidth(screenWidth);
   let windowHeight = window.innerHeight;
   const language = navigator.language;
-  const statusBarHeight = D__DCloud_local_git_uniAppNext_node_modules_safeAreaInsets_out.top;
+  const statusBarHeight = out.top;
   let osname;
   let osversion;
   let model;
@@ -10961,12 +10975,12 @@ const getSystemInfoSync = defineSyncApi("getSystemInfoSync", () => {
   const system = `${osname} ${osversion}`;
   const platform = osname.toLocaleLowerCase();
   const safeArea = {
-    left: D__DCloud_local_git_uniAppNext_node_modules_safeAreaInsets_out.left,
-    right: windowWidth - D__DCloud_local_git_uniAppNext_node_modules_safeAreaInsets_out.right,
-    top: D__DCloud_local_git_uniAppNext_node_modules_safeAreaInsets_out.top,
-    bottom: windowHeight - D__DCloud_local_git_uniAppNext_node_modules_safeAreaInsets_out.bottom,
-    width: windowWidth - D__DCloud_local_git_uniAppNext_node_modules_safeAreaInsets_out.left - D__DCloud_local_git_uniAppNext_node_modules_safeAreaInsets_out.right,
-    height: windowHeight - D__DCloud_local_git_uniAppNext_node_modules_safeAreaInsets_out.top - D__DCloud_local_git_uniAppNext_node_modules_safeAreaInsets_out.bottom
+    left: out.left,
+    right: windowWidth - out.right,
+    top: out.top,
+    bottom: windowHeight - out.bottom,
+    width: windowWidth - out.left - out.right,
+    height: windowHeight - out.top - out.bottom
   };
   const {top: windowTop, bottom: windowBottom} = getWindowOffset();
   windowHeight -= windowTop;
@@ -10986,10 +11000,10 @@ const getSystemInfoSync = defineSyncApi("getSystemInfoSync", () => {
     model,
     safeArea,
     safeAreaInsets: {
-      top: D__DCloud_local_git_uniAppNext_node_modules_safeAreaInsets_out.top,
-      right: D__DCloud_local_git_uniAppNext_node_modules_safeAreaInsets_out.right,
-      bottom: D__DCloud_local_git_uniAppNext_node_modules_safeAreaInsets_out.bottom,
-      left: D__DCloud_local_git_uniAppNext_node_modules_safeAreaInsets_out.left
+      top: out.top,
+      right: out.right,
+      bottom: out.bottom,
+      left: out.left
     }
   };
 });
@@ -12375,11 +12389,11 @@ const hideLoading = defineAsyncApi(API_HIDE_LOADING, () => {
 const showActionSheet = defineAsyncApi(API_SHOW_ACTION_SHEET, () => {
 }, ShowActionSheetProtocol, ShowActionSheetOptions);
 const startPullDownRefresh = defineAsyncApi(API_START_PULL_DOWN_REFRESH, (_args, {resolve}) => {
-  UniServiceJSBridge.publishHandler("startPullDownRefresh", {}, getCurrentPageId());
+  UniServiceJSBridge.publishHandler(API_START_PULL_DOWN_REFRESH, {}, getCurrentPageId());
   resolve();
 });
 const stopPullDownRefresh = defineAsyncApi(API_STOP_PULL_DOWN_REFRESH, (_args, {resolve}) => {
-  UniServiceJSBridge.publishHandler("stopPullDownRefresh", {}, getCurrentPageId());
+  UniServiceJSBridge.publishHandler(API_STOP_PULL_DOWN_REFRESH, {}, getCurrentPageId());
   resolve();
 });
 let tabBar;
@@ -13362,31 +13376,31 @@ function usePageRefresh(refreshRef) {
   let refreshControllerElem;
   let refreshControllerElemStyle;
   let refreshInnerElemStyle;
+  useSubscribe(() => {
+    if (!state) {
+      state = REFRESHING;
+      addClass();
+      setTimeout(() => {
+        refreshing();
+      }, 50);
+    }
+  }, id2 + "." + API_START_PULL_DOWN_REFRESH);
+  useSubscribe(() => {
+    if (state === REFRESHING) {
+      removeClass();
+      state = RESTORING;
+      addClass();
+      restoring(() => {
+        removeClass();
+        state = distance = offset = null;
+      });
+    }
+  }, id2 + "." + API_STOP_PULL_DOWN_REFRESH);
   onMounted(() => {
     refreshContainerElem = refreshRef.value.$el;
     refreshControllerElem = refreshContainerElem.querySelector(".uni-page-refresh");
     refreshControllerElemStyle = refreshControllerElem.style;
     refreshInnerElemStyle = refreshControllerElem.querySelector(".uni-page-refresh-inner").style;
-    UniViewJSBridge.subscribe(id2 + ".startPullDownRefresh", () => {
-      if (!state) {
-        state = REFRESHING;
-        addClass();
-        setTimeout(() => {
-          refreshing();
-        }, 50);
-      }
-    });
-    UniViewJSBridge.subscribe(id2 + ".stopPullDownRefresh", () => {
-      if (state === REFRESHING) {
-        removeClass();
-        state = RESTORING;
-        addClass();
-        restoring(() => {
-          removeClass();
-          state = distance = offset = null;
-        });
-      }
-    });
   });
   let touchId;
   let startY;

packages/uni-h5/src/framework/components/page/page-refresh/index.ts

 import { onMounted, Ref } from 'vue'
 import { invokeHook } from '@dcloudio/uni-core'
+import {
+  API_START_PULL_DOWN_REFRESH,
+  API_STOP_PULL_DOWN_REFRESH,
+} from '@dcloudio/uni-api'
+import { useSubscribe } from '@dcloudio/uni-components'
 import { usePageMeta } from '../../../plugin/provide'
 
 function processDeltaY(
@@ -33,6 +38,27 @@ export function usePageRefresh(refreshRef: Ref) {
   let refreshControllerElem: HTMLDivElement
   let refreshControllerElemStyle: CSSStyleDeclaration
   let refreshInnerElemStyle: CSSStyleDeclaration
+  useSubscribe(() => {
+    if (!state) {
+      state = REFRESHING
+      addClass()
+      setTimeout(() => {
+        refreshing()
+      }, 50)
+    }
+  }, id + '.' + API_START_PULL_DOWN_REFRESH)
+  useSubscribe(() => {
+    if (state === REFRESHING) {
+      removeClass()
+      state = RESTORING
+      addClass()
+
+      restoring(() => {
+        removeClass()
+        state = distance = offset = null
+      })
+    }
+  }, id + '.' + API_STOP_PULL_DOWN_REFRESH)
   onMounted(() => {
     refreshContainerElem = refreshRef.value.$el
     refreshControllerElem = refreshContainerElem.querySelector(
@@ -42,29 +68,6 @@ export function usePageRefresh(refreshRef: Ref) {
     refreshInnerElemStyle = (refreshControllerElem.querySelector(
       '.uni-page-refresh-inner'
     ) as HTMLDivElement).style
-    // uni.startPullDownRefresh
-    UniViewJSBridge.subscribe(id + '.startPullDownRefresh', () => {
-      if (!state) {
-        state = REFRESHING
-        addClass()
-        setTimeout(() => {
-          refreshing()
-        }, 50)
-      }
-    })
-    // uni.stopPullDownRefresh
-    UniViewJSBridge.subscribe(id + '.stopPullDownRefresh', () => {
-      if (state === REFRESHING) {
-        removeClass()
-        state = RESTORING
-        addClass()
-
-        restoring(() => {
-          removeClass()
-          state = distance = offset = null
-        })
-      }
-    })
   })
   let touchId: number | null
   let startY: number

packages/uni-h5/src/framework/plugin/setup.ts

-import { invokeArrayFns } from '@vue/shared'
+import { extend, invokeArrayFns } from '@vue/shared'
 import {
   ComponentInternalInstance,
   ComponentPublicInstance,
@@ -19,7 +19,7 @@ import { initPage } from './page'
 
 interface SetupComponentOptions {
   init: (vm: ComponentPublicInstance) => void
-  setup: (instance: ComponentInternalInstance) => void
+  setup: (instance: ComponentInternalInstance) => Record<string, any>
   after?: (comp: DefineComponent) => void
 }
 
@@ -50,9 +50,9 @@ function wrapperComponentSetup(
   comp.setup = (props, ctx) => {
     const instance = getCurrentInstance()!
     init(instance.proxy!)
-    setup(instance)
+    const query = setup(instance)
     if (oldSetup) {
-      return oldSetup(props, ctx)
+      return oldSetup(query, ctx)
     }
   }
   after && after(comp)
@@ -71,6 +71,7 @@ export function setupPage(comp: any) {
   return setupComponent(comp, {
     init: initPage,
     setup(instance) {
+      instance.root = instance // 组件root指向页面
       const route = usePageRoute()
       if (route.meta.isTabBar) {
         //初始化时，状态肯定是激活
@@ -100,6 +101,7 @@ export function setupPage(comp: any) {
           onHide && invokeArrayFns(onHide)
         }
       })
+      return route.query
     },
   })
 }
@@ -128,6 +130,7 @@ export function setupApp(comp: any) {
           }
         })
       })
+      return route.query
     },
     after(comp) {
       comp.mpType = 'app'

packages/uni-h5/src/service/api/context/operateVideoPlayer.ts

@@ -6,9 +6,9 @@ export function operateVideoPlayer(
   type: string,
   data?: unknown
 ) {
-  const pageId = vm.$page.id
+  const pageId = vm.$root!.$page.id
   UniServiceJSBridge.publishHandler(
-    pageId + '-video-' + videoId,
+    'video.' + videoId,
     {
       videoId,
       type,

packages/uni-h5/src/service/api/ui/startPullDownRefresh.ts

@@ -9,7 +9,7 @@ export const startPullDownRefresh = defineAsyncApi<API_TYPE_START_PULL_DOWN_REFR
   API_START_PULL_DOWN_REFRESH,
   (_args, { resolve }) => {
     UniServiceJSBridge.publishHandler(
-      'startPullDownRefresh',
+      API_START_PULL_DOWN_REFRESH,
       {},
       getCurrentPageId()
     )

packages/uni-h5/src/service/api/ui/stopPullDownRefresh.ts

@@ -9,7 +9,7 @@ export const stopPullDownRefresh = defineAsyncApi<API_TYPE_STOP_PULL_DOWN_REFRES
   API_STOP_PULL_DOWN_REFRESH,
   (_args, { resolve }) => {
     UniServiceJSBridge.publishHandler(
-      'stopPullDownRefresh',
+      API_STOP_PULL_DOWN_REFRESH,
       {},
       getCurrentPageId()
     )

packages/uni-mp-vue/build.json

@@ -9,5 +9,8 @@
         "replacement": "@dcloudio/uni-mp-vue/lib/vue.runtime.esm.js"
       }
     ]
+  },
+  "replacements": {
+    "__PLATFORM__": "\"mp-weixin\""
   }
 }

packages/uni-mp-vue/dist/vue.runtime.esm.js

-import { isFunction, isString, isSymbol, extend, isMap, isObject, toRawType, def, isArray, isPromise, toHandlerKey, remove, EMPTY_OBJ, camelize, capitalize, normalizeClass, normalizeStyle, isOn, NOOP, isGloballyWhitelisted, isIntegerKey, hasOwn, hasChanged, NO, invokeArrayFns as invokeArrayFns$1, makeMap, isSet, toNumber, hyphenate, isReservedProp, EMPTY_ARR, toTypeString } from '@vue/shared';
+import { isFunction, isSymbol, extend, isMap, isObject, toRawType, def, isArray, isString, isPromise, toHandlerKey, remove, EMPTY_OBJ, camelize, capitalize, normalizeClass, normalizeStyle, isOn, NOOP, isGloballyWhitelisted, isIntegerKey, hasOwn, hasChanged, NO, invokeArrayFns as invokeArrayFns$1, makeMap, isSet, toNumber, hyphenate, isReservedProp, EMPTY_ARR, toTypeString } from '@vue/shared';
 export { camelize } from '@vue/shared';
 import { injectHook as injectHook$1 } from 'vue';
 
@@ -36,41 +36,6 @@ function callHook(name, args) {
     return hooks && invokeArrayFns(hooks, args);
 }
 
-function getCurrentPage() {
-    const pages = getCurrentPages();
-    const len = pages.length;
-    if (len) {
-        return pages[len - 1];
-    }
-}
-function getCurrentPageVm() {
-    const page = getCurrentPage();
-    if (page) {
-        return page.$vm;
-    }
-}
-function invokeHook(vm, name, args) {
-    if (isString(vm)) {
-        args = name;
-        name = vm;
-        vm = getCurrentPageVm();
-    }
-    else if (typeof vm === 'number') {
-        const page = getCurrentPages().find((page) => page.$page.id === vm);
-        if (page) {
-            vm = page.$vm;
-        }
-        else {
-            vm = getCurrentPageVm();
-        }
-    }
-    if (!vm) {
-        return;
-    }
-    const hooks = vm.$[name];
-    return hooks && invokeArrayFns(hooks, args);
-}
-
 function errorHandler(err, instance, info) {
     if (!instance) {
         throw err;
@@ -79,12 +44,9 @@ function errorHandler(err, instance, info) {
     if (!app || !app.$vm) {
         throw err;
     }
-    if (__PLATFORM__ !== 'h5' && __PLATFORM__ !== 'app') {
+    {
         app.$vm.$callHook('onError', err, info);
     }
-    else {
-        invokeHook(app.$vm, 'onError', err);
-    }
 }
 
 function initApp(app) {
@@ -93,7 +55,7 @@ function initApp(app) {
         appConfig.errorHandler = errorHandler;
     }
     const globalProperties = appConfig.globalProperties;
-    if (__PLATFORM__ !== 'h5' && __PLATFORM__ !== 'app') {
+    {
         // 小程序，待重构，不再挂靠全局
         globalProperties.$hasHook = hasHook;
         globalProperties.$callHook = callHook;