Weex-Android 摇一摇功能

短命女 2022-05-13 15:00 300阅读 0赞

# Weex-Android 摇一摇功能 #

**需求：**  
Weex+Vue开发混合App。项目需求中，有一个页面，需要用到摇一摇功能，来进行业务交互。由于Weex 三方插件资料比较少，这边没有找到Weex调用移动端的摇一摇weex插件，所以直接就使用Weex内置组件来和原生进行交互了。

## 开发思路 ##

需要对Android和iOS分别进行原生开发，然后通过Weex的内置组件globalEvent来监听持久性事件。  
Weex globalEvent官方文档 [Weex globalEvent][]  
好了，不多说了，直接上代码。

# Android代码 #

第一步：新建一个Java class。名字为：ShakePhoneUtils.java

package com.weex.app.extend;
    
    import android.content.Context;
    import android.hardware.Sensor;
    import android.hardware.SensorEvent;
    import android.hardware.SensorEventListener;
    import android.hardware.SensorManager;
    import android.os.Vibrator;
    
    /**
     * Created by shixiongwei on 2018/10/24.
     */
    
    public class ShakePhoneUtils implements SensorEventListener {
        private SensorManager mSensorManager = null;
        private OnShakeListener mOnShakeListener = null;
        private static final int SENSOR_VALUE = 17;//灵敏度  可调
        static final int UPDATE_INTERVAL = 200;//检测的时间间隔  可调
        long mLastUpdateTime;//上一次检测的时间
        private Vibrator vibrator; //震动 （记住初始化）
    
        public ShakePhoneUtils(Context context, SensorManager sensorManager){
            mSensorManager = (SensorManager) context.getSystemService(Context.SENSOR_SERVICE);
            vibrator = (Vibrator) context.getSystemService(Context.VIBRATOR_SERVICE);
        }
    
        public void setOnShakeListener( OnShakeListener onShakeListener ){
            mOnShakeListener = onShakeListener;
        }
    
        public void onResume(){
    
            mSensorManager.registerListener(this,
                    mSensorManager.getDefaultSensor(Sensor.TYPE_ACCELEROMETER),
                    SensorManager.SENSOR_DELAY_NORMAL);
        }
    
        public void onPause(){
            mSensorManager.unregisterListener(this);
        }
    
        @Override
        public void onAccuracyChanged(Sensor sensor, int accuracy) {
    
        }
    
    
        @Override
        public void onSensorChanged(SensorEvent event) {
            long currentTime = System.currentTimeMillis();
            long diffTime = currentTime - mLastUpdateTime;
            if (diffTime < UPDATE_INTERVAL) {
                return;//如果时间间隔小于 UPDATE_INTERVAL 不处理
            }
            mLastUpdateTime = currentTime;
    
            int sensorType = event.sensor.getType();
            //values[0]:X轴，values[1]：Y轴，values[2]：Z轴
            float[] values = event.values;
            if (sensorType == Sensor.TYPE_ACCELEROMETER){
                //这里可以调节摇一摇的灵敏度
                if ((Math.abs(values[0]) > SENSOR_VALUE || Math.abs(values[1]) > SENSOR_VALUE || Math.abs(values[2]) > SENSOR_VALUE)){
                    System.out.println("sensor value == " + " " + values[ 0 ] + " " + values[ 1 ] + " " +  values[ 2 ] );
                    if( null != mOnShakeListener ){
                        vibrator.vibrate(200);//震动效果
                        mOnShakeListener.onShake( );
                    }
                }
            }
        }
    
        public interface OnShakeListener{
            public void onShake();
        }
    }

第二步：新增权限  
在文件：AndroidManifest.xml 中新增下面两条

<uses-permission android:name="android.permission.VIBRATE"/>
    <uses-permission android:name="android.hardware.sensor.accelerometer"/>

第三步：在AbsWeexActivity.java中，添加以下代码。

3-1）定义变量

private ShakePhoneUtils sxShakeUtils; //摇一摇
      private SensorManager mSensorManager;

3-2）在create方法中实现

protected void createWeexInstance() {
        destoryWeexInstance();
        mInstance = new WXSDKInstance(this);
        mInstance.registerRenderListener(this);
        //摇一摇 
        sxShakeUtils = new ShakePhoneUtils(this,this.mSensorManager);
        sxShakeUtils.setOnShakeListener(new ShakePhoneUtils.OnShakeListener() {
          @Override
          public void onShake() {
            if (mInstance != null){
              Map<String,Object> params = new HashMap<>();
              params.put("shake","shakeandroid");
              mInstance.fireGlobalEventCallback("shakephone",params);
            }
          }
        });
    
      }

3-3）在 onPause和onResume 方法中，处理。

@Override
      public void onResume() {
        super.onResume();
        if (mInstance != null) {
          mInstance.onActivityResume();
        }
        //摇一摇
        if(sxShakeUtils != null){
          sxShakeUtils.onResume();
        }
      }
    
      @Override
      public void onPause() {
        super.onPause();
        if (mInstance != null) {
          mInstance.onActivityPause();
        }
        //摇一摇
        if(sxShakeUtils != null){
          sxShakeUtils.onPause();
        }
      }

# Weex项目中，vue相关代码 #

在相对应的业务代码.vue文件中。比如：books.vue  
使用Weex的内置组件，globalEvent,如果没看懂代码，可以参考官方资料。

1)定义变量

var sxglobalEvent = weex.requireModule('globalEvent');

2）methods: \{\}中的函数，addListtenerShakePhone，添加全局监听事件。并在监听中，处理监听到的时间处理。比如，我这边，监听到摇一摇，就调用shakephone()方法。至于shakephone()方法体中，就是我们处理的业务代码了。比如摇一摇签到，摇一摇获取定位等。

[Weex globalEvent官方文档](http://weex.apache.org/cn/references/modules/globalevent.html)

API 注册全局事件  
addEventListener(String eventName, String callback)

参数说明：  
eventName \{string\}：需要监听的事件名称。  
callback \{Function\}：触发事件后的回调函数。

addListtenerShakePhone(){
              sxglobalEvent.addEventListener('shakephone',e => {
                    this.shakephone()
                })
          },

3）在钩子方法中，调用注册方法

mounted() {
        this.addListtenerShakePhone()
      },

4）在destroyed()\{\}中，移除监听。不然页面跳转后，其他页面如果有该事件监听，会导致失效。

destroyed() {
            sxglobalEvent.removeEventListener('shakephone');
      }

好了，代码就是以上一些代码。

我这边参考链接如下：  
[Weex globalEvent官方文档][Weex globalEvent]

[Androidstudio实现手机摇一摇功能][Androidstudio]

[Android 摇一摇太灵敏的解决方法][Android]

[android实现摇一摇事件监听][android]

[Weex globalEvent]: http://weex.apache.org/cn/references/modules/globalevent.html
[Androidstudio]: https://blog.csdn.net/qq_36423978/article/details/68962514
[Android]: https://blog.csdn.net/fuchaosz/article/details/51744078?utm_source=blogxgwz4
[android]: https://blog.csdn.net/lzq520210/article/details/53559313