feat: uni.offCompassChange

lib/apis.js

@@ -77,6 +77,7 @@ const device = [
   'startAccelerometer',
   'stopAccelerometer',
   'onCompassChange',
+  'offCompassChange',
   'startCompass',
   'stopCompass',
   'onGyroscopeChange',

src/core/service/api/device/compass.js

-import {
-  invoke
-} from 'uni-core/service/bridge'
-
-import {
-  onMethod,
-  invokeMethod
-} from '../../platform'
-
-const callbacks = []
-
-onMethod('onCompassChange', function (res) {
-  callbacks.forEach(callbackId => {
-    invoke(callbackId, res)
-  })
-})
-
-let isEnable = false
-/**
- * 监听加速度
- * @param {*} callbackId
- */
-export function onCompassChange (callbackId) {
-  // TODO 当没有 start 时，添加 on 需要主动 start?
-  callbacks.push(callbackId)
-  if (!isEnable) {
-    startCompass()
-  }
-}
-
-export function startCompass ({
-  interval // TODO
-} = {}) {
-  if (isEnable) {
-    return
-  }
-  isEnable = true
-  return invokeMethod('enableCompass', {
-    enable: true
-  })
-}
-
-export function stopCompass () {
-  isEnable = false
-  return invokeMethod('enableCompass', {
-    enable: false
-  })
-}

src/platforms/app-plus/service/api/device/compass.js

@@ -3,53 +3,59 @@ import {
 } from '../constants'
 
 import {
-  getLastWebview
-} from '../util'
-
-import {
-  publish
+  invoke
 } from '../../bridge'
 
-let watchOrientationId = false
-let isWatchOrientation = false
+let listener
 
-const clearWatchOrientation = () => {
-  if (watchOrientationId) {
-    plus.orientation.clearWatch(watchOrientationId)
-    watchOrientationId = false
-  }
-}
+const callbackIds = []
 
-export function enableCompass ({
-  enable
-}) {
-  if (enable) {
-    clearWatchOrientation()
-    watchOrientationId = plus.orientation.watchOrientation((o) => {
-      publish('onCompassChange', {
-        direction: o.magneticHeading,
-        errMsg: 'enableCompass:ok'
+export function startCompass (options, callbackId) {
+  listener = listener || plus.orientation.watchOrientation((res) => {
+    callbackIds.forEach(callbackId => {
+      invoke(callbackId, {
+        direction: res.magneticHeading
       })
-    }, (e) => {
-      publish('onCompassChange', {
-        errMsg: 'enableCompass:fail'
-      })
-    }, {
-      frequency: DEVICE_FREQUENCY
     })
-    if (!isWatchOrientation) {
-      isWatchOrientation = true
-      const webview = getLastWebview()
-      if (webview) {
-        webview.addEventListener('close', () => {
-          plus.orientation.clearWatch(watchOrientationId)
-        })
-      }
+  }, err => {
+    listener = null
+    invoke(callbackId, {
+      errMsg: `startCompass:fail ${err.message}`
+    })
+  }, {
+    frequency: DEVICE_FREQUENCY
+  })
+  setTimeout(() => {
+    invoke(callbackId, {
+      errMsg: 'startCompass:ok'
+    })
+  }, DEVICE_FREQUENCY)
+}
+
+export function stopCompass () {
+  if (listener) {
+    plus.orientation.clearWatch(listener)
+    listener = null
+  }
+  return {}
+}
+
+export function onCompassChange (callbackId) {
+  if (!callbackIds.length) {
+    startCompass()
+  }
+  callbackIds.push(callbackId)
+}
+
+export function offCompassChange (callbackId) {
+  // 暂不支持移除所有监听
+  if (callbackId) {
+    const index = callbackIds.indexOf(callbackId)
+    if (index >= 0) {
+      callbackIds.splice(index, 1)
     }
-  } else {
-    clearWatchOrientation()
   }
-  return {
-    errMsg: 'enableCompass:ok'
+  if (!callbackIds.length) {
+    stopCompass()
   }
 }

src/platforms/h5/service/api/device/compass.js

-const callbacks = []
-var listener
-/**
- * 监听罗盘数据
- * @param {*} callbackId
- */
-export function onCompassChange (callbackId) {
-  callbacks.push(callbackId)
-  if (!listener) {
-    startCompass()
-  }
-}
-/**
- * 开始监听罗盘数据
- */
-export function startCompass () {
+let listener
+
+const callbackIds = []
+
+export function startCompass (options, callbackId) {
   const {
     invokeCallbackHandler: invoke
   } = UniServiceJSBridge
-  if (window.DeviceOrientationEvent) {
+  if (!window.DeviceOrientationEvent) {
+    return {
+      errMsg: 'startCompass:fail'
+    }
+  }
+  function addEventListener () {
     listener = function (event) {
-      var direction = 360 - event.alpha
-      callbacks.forEach(callbackId => {
+      const direction = 360 - event.alpha
+      callbackIds.forEach(callbackId => {
         invoke(callbackId, {
-          errMsg: 'onCompassChange:ok',
           direction: direction || 0
         })
       })
     }
     window.addEventListener('deviceorientation', listener, false)
-    return {}
-  } else {
-    throw new Error('device nonsupport deviceorientation')
   }
+  if (!listener) {
+    if (DeviceOrientationEvent.requestPermission) {
+      DeviceOrientationEvent.requestPermission().then((res) => {
+        if (res === 'granted') {
+          addEventListener()
+          invoke(callbackId, {
+            errMsg: 'startCompass:ok'
+          })
+        } else {
+          invoke(callbackId, {
+            errMsg: `startCompass:fail ${res}`
+          })
+        }
+      }).catch(error => {
+        invoke(callbackId, {
+          errMsg: `startCompass:fail ${error}`
+        })
+      })
+      return
+    }
+    addEventListener()
+  }
+  return {}
 }
-/**
- * 停止监听罗盘数据
- */
+
 export function stopCompass () {
   if (listener) {
     window.removeEventListener('deviceorientation', listener, false)
@@ -43,3 +54,23 @@ export function stopCompass () {
   }
   return {}
 }
+
+export function onCompassChange (callbackId) {
+  if (!callbackIds.length) {
+    startCompass()
+  }
+  callbackIds.push(callbackId)
+}
+
+export function offCompassChange (callbackId) {
+  // 暂不支持移除所有监听
+  if (callbackId) {
+    const index = callbackIds.indexOf(callbackId)
+    if (index >= 0) {
+      callbackIds.splice(index, 1)
+    }
+  }
+  if (!callbackIds.length) {
+    stopCompass()
+  }
+}

src/platforms/h5/view/components/map/index.vue

 <template>
   <uni-map
     :id="id"
-    v-on="$listeners"
+    v-on="$listeners"
   >
     <div
       ref="map"
-      style="width: 100%; height: 100%; position: relative; overflow: hidden;"
+      style="width: 100%; height: 100%; position: relative; overflow: hidden;"
     />
     <div style="position: absolute; top: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none;">
       <slot />
@@ -350,14 +350,14 @@ export default {
             })
           })
           break
-        case 'moveToLocation':
-          {
-            const { latitude, longitude } = data
-            var locationPosition = (latitude && longitude) ? new maps.LatLng(latitude, longitude) : this._locationPosition
-            if (locationPosition) {
-              this._map.setCenter(locationPosition)
-              callback({})
-            }
+        case 'moveToLocation':
+          {
+            const { latitude, longitude } = data
+            var locationPosition = (latitude && longitude) ? new maps.LatLng(latitude, longitude) : this._locationPosition
+            if (locationPosition) {
+              this._map.setCenter(locationPosition)
+              callback({})
+            }
           }
           break
         case 'translateMarker':
@@ -820,9 +820,10 @@ export default {
           })
           this._location = location
           refreshLocation()
-          uni.onCompassChange(function (res) {
+          this.__onCompassChange = function (res) {
             location.setRotation(res.direction)
-          })
+          }
+          uni.onCompassChange(this.__onCompassChange)
         },
         fail: e => {
           console.error(e)
@@ -857,7 +858,7 @@ export default {
         location.setMap(null)
         this._location = null
         this._locationPosition = null
-        uni.stopCompass()
+        uni.offCompassChange(this.__onCompassChange)
       }
     },
     fitBounds (points, cb) {