feat(app): mediaQueryObserver

packages/uni-app-plus/dist/uni-app-service.es.js

@@ -2229,12 +2229,12 @@ var serviceContext = (function (vue) {
       }, pageId, operateMapCallback);
   }
 
-  function getEventName(reqId) {
+  function getEventName$1(reqId) {
       const EVENT_NAME = 'IntersectionObserver';
       return `${EVENT_NAME}.${reqId}`;
   }
   function addIntersectionObserver({ reqId, component, options, callback }, _pageId) {
-      const eventName = getEventName(reqId);
+      const eventName = getEventName$1(reqId);
       UniServiceJSBridge.invokeViewMethod('addIntersectionObserver', {
           reqId,
           component: component.$el.nodeId,
@@ -2248,11 +2248,32 @@ var serviceContext = (function (vue) {
           reqId,
           component: component.$el.nodeId,
       }, _pageId);
+      UniServiceJSBridge.unsubscribe(getEventName$1(reqId));
+  }
+
+  function getEventName(reqId) {
+      const EVENT_NAME = 'MediaQueryObserver';
+      return `${EVENT_NAME}.${reqId}`;
+  }
+  function addMediaQueryObserver({ reqId, component, options, callback }, _pageId) {
+      const eventName = getEventName(reqId);
+      UniServiceJSBridge.invokeViewMethod('addMediaQueryObserver', {
+          reqId,
+          component: component.$el.nodeId,
+          options,
+          eventName,
+      }, _pageId);
+      UniServiceJSBridge.subscribe(eventName, callback);
+  }
+  function removeMediaQueryObserver({ reqId, component }, _pageId) {
+      UniServiceJSBridge.invokeViewMethod('removeMediaQueryObserver', {
+          reqId,
+          component: component.$el.nodeId,
+          // reqEnd: true
+      }, _pageId);
       UniServiceJSBridge.unsubscribe(getEventName(reqId));
   }
 
-  function addMediaQueryObserver(args, pageId) { }
-  function removeMediaQueryObserver(args, pageId) { }
   const TEMP_PATH$1 = '';
 
   const API_UPX2PX = 'upx2px';

packages/uni-app-plus/src/platform/index.ts

-import {
-  AddMediaQueryObserverArgs,
-  RemoveMediaQueryObserverArgs,
-} from '@dcloudio/uni-api'
-
 export { getBaseSystemInfo } from '../service/api/base/getBaseSystemInfo'
 export { requestComponentInfo } from '../service/api/ui/requestComponentInfo'
 export { getRealPath } from './getRealPath'
@@ -14,14 +9,11 @@ export {
   removeIntersectionObserver,
 } from '../service/api/ui/intersectionObserver'
 
-export function addMediaQueryObserver(
-  args: AddMediaQueryObserverArgs,
-  pageId: number
-) {}
-export function removeMediaQueryObserver(
-  args: RemoveMediaQueryObserverArgs,
-  pageId: number
-) {}
+export {
+  addMediaQueryObserver,
+  removeMediaQueryObserver,
+} from '../service/api/ui/mediaQueryObserver'
+
 export function saveImage(
   base64: string,
   dirname: string,

packages/uni-app-plus/src/service/api/ui/mediaQueryObserver.ts

+import {
+  AddMediaQueryObserverArgs,
+  RemoveMediaQueryObserverArgs,
+} from '@dcloudio/uni-api'
+
+function getEventName(reqId: number) {
+  const EVENT_NAME = 'MediaQueryObserver'
+  return `${EVENT_NAME}.${reqId}`
+}
+
+export function addMediaQueryObserver(
+  { reqId, component, options, callback }: AddMediaQueryObserverArgs,
+  _pageId: number
+) {
+  const eventName = getEventName(reqId)
+  UniServiceJSBridge.invokeViewMethod(
+    'addMediaQueryObserver',
+    {
+      reqId,
+      component: component.$el.nodeId,
+      options,
+      eventName,
+    },
+    _pageId
+  )
+  UniServiceJSBridge.subscribe(eventName, callback)
+}
+
+export function removeMediaQueryObserver(
+  { reqId, component }: RemoveMediaQueryObserverArgs,
+  _pageId: number
+) {
+  UniServiceJSBridge.invokeViewMethod(
+    'removeMediaQueryObserver',
+    {
+      reqId,
+      component: component.$el.nodeId,
+    },
+    _pageId
+  )
+  UniServiceJSBridge.unsubscribe(getEventName(reqId))
+}

packages/uni-app-plus/src/view/framework/viewMethods.ts

@@ -14,6 +14,8 @@ import { requestComponentInfo } from '../../../../uni-h5/src/platform'
 import {
   addIntersectionObserver,
   removeIntersectionObserver,
+  addMediaQueryObserver,
+  removeMediaQueryObserver,
 } from '../../../../uni-h5/src/platform'
 
 import { loadFontFace } from './dom/font'
@@ -49,6 +51,18 @@ export function initViewMethods() {
   registerViewMethod(pageId, 'removeIntersectionObserver', (args) => {
     removeIntersectionObserver(args)
   })
+  registerViewMethod(pageId, 'addMediaQueryObserver', (args) => {
+    addMediaQueryObserver(
+      extend({}, args, {
+        callback(res: any) {
+          UniViewJSBridge.publishHandler(args.eventName, res)
+        },
+      })
+    )
+  })
+  registerViewMethod(pageId, 'removeMediaQueryObserver', (args) => {
+    removeMediaQueryObserver(args)
+  })
   registerViewMethod(pageId, API_PAGE_SCROLL_TO, pageScrollTo)
   registerViewMethod(pageId, API_LOAD_FONT_FACE, loadFontFace)
 }

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

@@ -45,7 +45,7 @@ function humpToLine(name: string) {
 // 请求媒体查询对象
 export function addMediaQueryObserver(
   { reqId, component, options, callback }: AddMediaQueryObserverArgs,
-  _pageId: number
+  _pageId?: number
 ) {
   // 创建一个媒体查询对象
   const mediaQueryObserver = (mediaQueryObservers[reqId] = window.matchMedia(
@@ -61,7 +61,7 @@ export function addMediaQueryObserver(
 // 销毁媒体查询对象
 export function removeMediaQueryObserver(
   { reqId, component }: RemoveMediaQueryObserverArgs,
-  _pageId: number
+  _pageId?: number
 ) {
   const listener = listeners[reqId]
   const mediaQueryObserver = mediaQueryObservers[reqId]

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

@@ -4044,7 +4044,7 @@ function createVueApp(rootComponent, rootProps = null) {
 function withModifiers() { }
 function createVNode$1() { }
 
-function applyOptions(options, instance, publicThis) {
+function initHooks(options, instance, publicThis) {
     options.mpType || publicThis.$mpType;
     // 为了组件也可以监听部分生命周期，故不再判断mpType，统一添加on开头的生命周期
     Object.keys(options).forEach((name) => {
@@ -4057,6 +4057,10 @@ function applyOptions(options, instance, publicThis) {
     });
 }
 
+function applyOptions(options, instance, publicThis) {
+    initHooks(options, instance, publicThis);
+}
+
 function set(target, key, val) {
     return (target[key] = val);
 }