feat(App): IntersectionObserver

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

@@ -10,79 +10,79 @@ const __uniRoutes = instanceContext.__uniRoutes;
 var serviceContext = (function (vue) {
   'use strict';
 
-  /*
-   * base64-arraybuffer
-   * https://github.com/niklasvh/base64-arraybuffer
-   *
-   * Copyright (c) 2012 Niklas von Hertzen
-   * Licensed under the MIT license.
-   */
-
-  var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
-
-  // Use a lookup table to find the index.
-  var lookup = /*#__PURE__*/ (function () {
-    const lookup = new Uint8Array(256);
-    for (var i = 0; i < chars.length; i++) {
-      lookup[chars.charCodeAt(i)] = i;
-    }
-    return lookup
-  })();
-
-  function encode$3(arraybuffer) {
-    var bytes = new Uint8Array(arraybuffer),
-      i,
-      len = bytes.length,
-      base64 = '';
-
-    for (i = 0; i < len; i += 3) {
-      base64 += chars[bytes[i] >> 2];
-      base64 += chars[((bytes[i] & 3) << 4) | (bytes[i + 1] >> 4)];
-      base64 += chars[((bytes[i + 1] & 15) << 2) | (bytes[i + 2] >> 6)];
-      base64 += chars[bytes[i + 2] & 63];
-    }
-
-    if (len % 3 === 2) {
-      base64 = base64.substring(0, base64.length - 1) + '=';
-    } else if (len % 3 === 1) {
-      base64 = base64.substring(0, base64.length - 2) + '==';
-    }
-
-    return base64
-  }
-
-  function decode$1(base64) {
-    var bufferLength = base64.length * 0.75,
-      len = base64.length,
-      i,
-      p = 0,
-      encoded1,
-      encoded2,
-      encoded3,
-      encoded4;
-
-    if (base64[base64.length - 1] === '=') {
-      bufferLength--;
-      if (base64[base64.length - 2] === '=') {
-        bufferLength--;
-      }
-    }
-
-    var arraybuffer = new ArrayBuffer(bufferLength),
-      bytes = new Uint8Array(arraybuffer);
-
-    for (i = 0; i < len; i += 4) {
-      encoded1 = lookup[base64.charCodeAt(i)];
-      encoded2 = lookup[base64.charCodeAt(i + 1)];
-      encoded3 = lookup[base64.charCodeAt(i + 2)];
-      encoded4 = lookup[base64.charCodeAt(i + 3)];
-
-      bytes[p++] = (encoded1 << 2) | (encoded2 >> 4);
-      bytes[p++] = ((encoded2 & 15) << 4) | (encoded3 >> 2);
-      bytes[p++] = ((encoded3 & 3) << 6) | (encoded4 & 63);
-    }
-
-    return arraybuffer
+  /*
+   * base64-arraybuffer
+   * https://github.com/niklasvh/base64-arraybuffer
+   *
+   * Copyright (c) 2012 Niklas von Hertzen
+   * Licensed under the MIT license.
+   */
+
+  var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
+
+  // Use a lookup table to find the index.
+  var lookup = /*#__PURE__*/ (function () {
+    const lookup = new Uint8Array(256);
+    for (var i = 0; i < chars.length; i++) {
+      lookup[chars.charCodeAt(i)] = i;
+    }
+    return lookup
+  })();
+
+  function encode$3(arraybuffer) {
+    var bytes = new Uint8Array(arraybuffer),
+      i,
+      len = bytes.length,
+      base64 = '';
+
+    for (i = 0; i < len; i += 3) {
+      base64 += chars[bytes[i] >> 2];
+      base64 += chars[((bytes[i] & 3) << 4) | (bytes[i + 1] >> 4)];
+      base64 += chars[((bytes[i + 1] & 15) << 2) | (bytes[i + 2] >> 6)];
+      base64 += chars[bytes[i + 2] & 63];
+    }
+
+    if (len % 3 === 2) {
+      base64 = base64.substring(0, base64.length - 1) + '=';
+    } else if (len % 3 === 1) {
+      base64 = base64.substring(0, base64.length - 2) + '==';
+    }
+
+    return base64
+  }
+
+  function decode$1(base64) {
+    var bufferLength = base64.length * 0.75,
+      len = base64.length,
+      i,
+      p = 0,
+      encoded1,
+      encoded2,
+      encoded3,
+      encoded4;
+
+    if (base64[base64.length - 1] === '=') {
+      bufferLength--;
+      if (base64[base64.length - 2] === '=') {
+        bufferLength--;
+      }
+    }
+
+    var arraybuffer = new ArrayBuffer(bufferLength),
+      bytes = new Uint8Array(arraybuffer);
+
+    for (i = 0; i < len; i += 4) {
+      encoded1 = lookup[base64.charCodeAt(i)];
+      encoded2 = lookup[base64.charCodeAt(i + 1)];
+      encoded3 = lookup[base64.charCodeAt(i + 2)];
+      encoded4 = lookup[base64.charCodeAt(i + 3)];
+
+      bytes[p++] = (encoded1 << 2) | (encoded2 >> 4);
+      bytes[p++] = ((encoded2 & 15) << 4) | (encoded3 >> 2);
+      bytes[p++] = ((encoded3 & 3) << 6) | (encoded4 & 63);
+    }
+
+    return arraybuffer
   }
 
   /**
@@ -2222,8 +2222,28 @@ var serviceContext = (function (vue) {
       }, pageId, operateMapCallback);
   }
 
-  function addIntersectionObserver(args, pageId) { }
-  function removeIntersectionObserver(args, pageId) { }
+  function getEventName(reqId) {
+      const EVENT_NAME = 'IntersectionObserver';
+      return `${EVENT_NAME}.${reqId}`;
+  }
+  function addIntersectionObserver({ reqId, component, options, callback }, _pageId) {
+      const eventName = getEventName(reqId);
+      UniServiceJSBridge.invokeViewMethod('addIntersectionObserver', {
+          reqId,
+          component: component.$el.nodeId,
+          options,
+          eventName,
+      }, _pageId);
+      UniServiceJSBridge.subscribe(eventName, callback);
+  }
+  function removeIntersectionObserver({ reqId, component }, _pageId) {
+      UniServiceJSBridge.invokeViewMethod('removeIntersectionObserver', {
+          reqId,
+          component: component.$el.nodeId,
+      }, _pageId);
+      UniServiceJSBridge.unsubscribe(getEventName(reqId));
+  }
+
   function addMediaQueryObserver(args, pageId) { }
   function removeMediaQueryObserver(args, pageId) { }
   const TEMP_PATH$1 = '';
@@ -6135,10 +6155,10 @@ var serviceContext = (function (vue) {
       resolve();
   }));
 
-  const onBluetoothDeviceFound = defineOnApi(API_ON_BLUETOOTH_DEVICE_FOUND, warpPlusEvent(() => plus.bluetooth.onBluetoothDeviceFound, API_ON_BLUETOOTH_DEVICE_FOUND));
-  const onBluetoothAdapterStateChange = defineOnApi(API_ON_BLUETOOTH_ADAPTER_STATE_CHANGE, warpPlusEvent(() => plus.bluetooth.onBluetoothAdapterStateChange, API_ON_BLUETOOTH_ADAPTER_STATE_CHANGE));
-  const onBLEConnectionStateChange = defineOnApi(API_ON_BLE_CONNECTION_STATE_CHANGE, warpPlusEvent(() => plus.bluetooth.onBLEConnectionStateChange, API_ON_BLE_CONNECTION_STATE_CHANGE));
-  const onBLECharacteristicValueChange = defineOnApi(API_ON_BLE_CHARACTERISTIC_VALUE_CHANGE, warpPlusEvent(() => plus.bluetooth.onBLECharacteristicValueChange, API_ON_BLE_CHARACTERISTIC_VALUE_CHANGE));
+  const onBluetoothDeviceFound = defineOnApi(API_ON_BLUETOOTH_DEVICE_FOUND, warpPlusEvent(() => plus.bluetooth.onBluetoothDeviceFound.bind(plus.bluetooth), API_ON_BLUETOOTH_DEVICE_FOUND));
+  const onBluetoothAdapterStateChange = defineOnApi(API_ON_BLUETOOTH_ADAPTER_STATE_CHANGE, warpPlusEvent(() => plus.bluetooth.onBluetoothAdapterStateChange.bind(plus.bluetooth), API_ON_BLUETOOTH_ADAPTER_STATE_CHANGE));
+  const onBLEConnectionStateChange = defineOnApi(API_ON_BLE_CONNECTION_STATE_CHANGE, warpPlusEvent(() => plus.bluetooth.onBLEConnectionStateChange.bind(plus.bluetooth), API_ON_BLE_CONNECTION_STATE_CHANGE));
+  const onBLECharacteristicValueChange = defineOnApi(API_ON_BLE_CHARACTERISTIC_VALUE_CHANGE, warpPlusEvent(() => plus.bluetooth.onBLECharacteristicValueChange.bind(plus.bluetooth), API_ON_BLE_CHARACTERISTIC_VALUE_CHANGE));
   const openBluetoothAdapter = defineAsyncApi('openBluetoothAdapter', warpPlusMethod(() => plus.bluetooth.openBluetoothAdapter.bind(plus.bluetooth)));
   const closeBluetoothAdapter = defineAsyncApi('closeBluetoothAdapter', warpPlusMethod(() => plus.bluetooth.closeBluetoothAdapter.bind(plus.bluetooth)));
   const getBluetoothAdapterState = defineAsyncApi('getBluetoothAdapterState', warpPlusMethod(() => plus.bluetooth.getBluetoothAdapterState));

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

 import {
-  AddIntersectionObserverArgs,
   AddMediaQueryObserverArgs,
-  RemoveIntersectionObserverArgs,
   RemoveMediaQueryObserverArgs,
 } from '@dcloudio/uni-api'
 
@@ -11,14 +9,11 @@ export { getRealPath } from './getRealPath'
 export { operateVideoPlayer } from '../service/api/context/operateVideoPlayer'
 export { operateMap } from '../service/api/context/operateMap'
 
-export function addIntersectionObserver(
-  args: AddIntersectionObserverArgs,
-  pageId: number
-) {}
-export function removeIntersectionObserver(
-  args: RemoveIntersectionObserverArgs,
-  pageId: number
-) {}
+export {
+  addIntersectionObserver,
+  removeIntersectionObserver,
+} from '../service/api/ui/intersectionObserver'
+
 export function addMediaQueryObserver(
   args: AddMediaQueryObserverArgs,
   pageId: number

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

+import {
+  AddIntersectionObserverArgs,
+  RemoveIntersectionObserverArgs,
+} from '@dcloudio/uni-api'
+
+function getEventName(reqId: number) {
+  const EVENT_NAME = 'IntersectionObserver'
+  return `${EVENT_NAME}.${reqId}`
+}
+
+export function addIntersectionObserver(
+  { reqId, component, options, callback }: AddIntersectionObserverArgs,
+  _pageId: number
+) {
+  const eventName = getEventName(reqId)
+  UniServiceJSBridge.invokeViewMethod(
+    'addIntersectionObserver',
+    {
+      reqId,
+      component: component.$el.nodeId,
+      options,
+      eventName,
+    },
+    _pageId
+  )
+  UniServiceJSBridge.subscribe(eventName, callback)
+}
+
+export function removeIntersectionObserver(
+  { reqId, component }: RemoveIntersectionObserverArgs,
+  _pageId: number
+) {
+  UniServiceJSBridge.invokeViewMethod(
+    'removeIntersectionObserver',
+    {
+      reqId,
+      component: component.$el.nodeId,
+    },
+    _pageId
+  )
+  UniServiceJSBridge.unsubscribe(getEventName(reqId))
+}

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

+import { extend } from '@vue/shared'
 import {
   API_LOAD_FONT_FACE,
   API_PAGE_SCROLL_TO,
@@ -10,6 +11,10 @@ import {
 } from '@dcloudio/uni-core'
 import { ComponentPublicInstance } from 'vue'
 import { requestComponentInfo } from '../../../../uni-h5/src/platform'
+import {
+  addIntersectionObserver,
+  removeIntersectionObserver,
+} from '../../../../uni-h5/src/platform'
 
 import { loadFontFace } from './dom/font'
 import { onPageReady, pageScrollTo } from './dom/page'
@@ -32,6 +37,18 @@ export function initViewMethods() {
       requestComponentInfo(pageVm, args.reqs, publish)
     }
   )
+  registerViewMethod(pageId, 'addIntersectionObserver', (args) => {
+    addIntersectionObserver(
+      extend({}, args, {
+        callback(res: any) {
+          UniViewJSBridge.publishHandler(args.eventName, res)
+        },
+      })
+    )
+  })
+  registerViewMethod(pageId, 'removeIntersectionObserver', (args) => {
+    removeIntersectionObserver(args)
+  })
   registerViewMethod(pageId, API_PAGE_SCROLL_TO, pageScrollTo)
   registerViewMethod(pageId, API_LOAD_FONT_FACE, loadFontFace)
 }

packages/uni-h5/src/platform/dom.ts

@@ -10,6 +10,10 @@ declare global {
 }
 
 export function findElem(vm: ComponentPublicInstance) {
+  if (__APP_VIEW__) {
+    // App 端，传入的是 nodeId
+    return (window as any).__$__(vm).$
+  }
   return vm.$el
 }
 

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

@@ -7,7 +7,7 @@ import { findElem } from '../../../platform/dom'
 
 export function addIntersectionObserver(
   { reqId, component, options, callback }: AddIntersectionObserverArgs,
-  _pageId: number
+  _pageId?: number
 ) {
   const $el = findElem(component)
   ;($el.__io || ($el.__io = {}))[reqId] = requestComponentObserver(
@@ -19,7 +19,7 @@ export function addIntersectionObserver(
 
 export function removeIntersectionObserver(
   { reqId, component }: RemoveIntersectionObserverArgs,
-  _pageId: number
+  _pageId?: number
 ) {
   const $el = findElem(component)
   const intersectionObserver = $el.__io && $el.__io[reqId]