我爱编程

Cordova中以Angular4式语法读取设备传感器数据

2017-08-07  本文已影响0人  环零弦

Cordova中以Angular4式语法读取设备传感器数据

背景介绍

如果你零基础调研Cordova,可能直接出现的是Cordova中文官网以及ionic中文官网,Cordova中文官网没细看,Ionic中文官网用户体验良好,而且已经良心地封装好一个例子比较全、且可以用的apk包及源码。

下载apk包顺利安装后发现不是特别全,比如陀螺仪传感器就没有,再搜Cordova英文官网和Ionic中文官网指向的Cordova插件英文官网,无论全不全,都存在一个致命的问题——全平台都是使用的AngularJS语法,与我们项目使用的Angular4语法是不兼容起码是不统一的。

好在从Cordova插件英文官网上顶部发现连接:

New! Check out Ionic Native. It's like ngCordova but for ES6 and TypeScript.

良心组织。

里面介绍了使用Angular4语法来写Ionic应用(Ionic默认下面就是Cordova)

找到适应的插件仓库,分别找到:

代码介绍

app.module.ts

import { Gyroscope } from '@ionic-native/gyroscope';
import { DeviceMotion } from '@ionic-native/device-motion';
import { DeviceOrientation } from '@ionic-native/device-orientation';
...
providers: [
    Gyroscope,
    DeviceMotion,
    DeviceOrientation
]

car.ts

import { Gyroscope, GyroscopeOrientation, GyroscopeOptions } from '@ionic-native/gyroscope';
import { DeviceMotion, DeviceMotionAccelerationData } from '@ionic-native/device-motion';
import { DeviceOrientation, DeviceOrientationCompassHeading } from '@ionic-native/device-orientation';
...
constructor(public navCtrl: NavController, private platform: Platform, private gyroscope: Gyroscope, private deviceMotion: DeviceMotion, private deviceOrientation: DeviceOrientation) {
let options: GyroscopeOptions = {
  frequency: 1
};
setInterval(() => {
  this.gyroscope.getCurrent(options)
    .then((orientation: GyroscopeOrientation) => {
      this.xx = "orien-x:" + orientation.x;
      this.yy = "orien-y:" + orientation.y;
      this.zz = "orien-z:" + orientation.z;
      this.tt = "orien-tstmp:" + orientation.timestamp;
      // console.log(orientation.x, orientation.y, orientation.z, orientation.timestamp);
    })
    .catch();

  this.deviceMotion.getCurrentAcceleration().then(
    (acceleration: DeviceMotionAccelerationData) => {
      this.aa = "acc-x:" + acceleration.x;
      this.bb = "acc-y:" + acceleration.y;
      this.cc = "acc-z:" + acceleration.z;
      this.dd = "acc-tstmp:" + acceleration.timestamp
    },
    (error: any) => console.log(error)
  );

  this.deviceOrientation.getCurrentHeading().then(
    (data: DeviceOrientationCompassHeading) => {
      this.mm = "trueH:" + data.trueHeading;
      this.nn = "magH:" + data.magneticHeading;
      this.pp = "HA:" + data.headingAccuracy;
      this.qq = "tsmp:" + data.timestamp
    },
    (error: any) => console.log(error)
  );


  this.gyroscope.watch()
    .subscribe((orientation: GyroscopeOrientation) => {
      console.log(orientation.x, orientation.y, orientation.z, orientation.timestamp);
    });
  this.deviceMotion.watchAcceleration().subscribe((acceleration: DeviceMotionAccelerationData) => {
    console.log(acceleration);
  });
}, 200);

}

拓展阅读

上一篇下一篇

猜你喜欢

热点阅读