Weex

weex☞扫码(开灯)

2018-12-03  本文已影响45人  小学生的博客

项目需要增加扫码功能

最终效果如图 scan.png

weex playground中已经实现了扫码功能,
weex项目增加的Android依赖中同样也可以看到,

compile 'com.journeyapps:zxing-android-embedded:3.4.0'

weex集成的是 zxing-android-embedded 第三方库
所以不需再做其他引入配置,直接使用

该如何使用,其实简单,就是原生封装module,前端进行调用。(这个参考了其他大佬的代码)
Android端增加ScanModule

import com.google.zxing.integration.android.IntentIntegrator;
import com.nes.app.manufacturer.WXPageActivity;
import com.taobao.weex.annotation.JSMethod;
import com.taobao.weex.bridge.JSCallback;
import com.taobao.weex.common.WXModule;

public class ScanModule extends WXModule {
    @JSMethod(uiThread = true)
    public void scanCode(JSCallback callback) {
        WXPageActivity act=(WXPageActivity)mWXSDKInstance.getContext();
        act.setOnScanFinishCallback(callback);

        IntentIntegrator integrator = new IntentIntegrator(act);
        integrator.initiateScan();
    }
}

在WXPageActivity中添加方法

    //声明一个 jscallback 来接收扫描的结果
    private JSCallback onScanFinishCallback = null;

    //新增一个set方法
    public void setOnScanFinishCallback(JSCallback callback) {
        this.onScanFinishCallback = callback;
    }
   .....
  // Put up our own UI for how to handle the decoded contents.
    private void handleDecodeInternally(String code) {

        if (!TextUtils.isEmpty(code)) {
            Uri uri = Uri.parse(code);
            if (uri.getQueryParameterNames().contains("bundle")) {
               ...
            } else if (uri.getQueryParameterNames().contains("_wx_devtool")) {
              ...
            } else if (code.contains("_wx_debug")) {
              ...
            } else {
                //新增自定义处理代码
                if (this.onScanFinishCallback != null) {
                    Map data2 = new HashMap();
                    data2.put("result", true);
                    data2.put("data", code);
                    this.onScanFinishCallback.invokeAndKeepAlive(data2);
                }else {
                    Toast.makeText(this, code, Toast.LENGTH_SHORT).show();
                    Intent intent = new Intent(Constants.ACTION_OPEN_URL);
                    intent.setPackage(getPackageName());
                    intent.setData(Uri.parse(code));
                    startActivity(intent);
                }
            }
        }
    }

最后在WXApplication中注册自己的module

 WXSDKEngine.registerModule("scan", ScanModule.class);

前端就可以调用啦

const scan = weex.requireModule('scan')
...         //在方法中直接使用就行了
            scan.scanCode(res => {
                   ...
                })

后面是如何实现开灯效果,说来也不算难,就是自定义布局嘛。直接修改上面的scanModule

    public void scanCode(JSCallback callback) {
        WXPageActivity act=(WXPageActivity)mWXSDKInstance.getContext();
        act.setOnScanFinishCallback(callback);

//        IntentIntegrator integrator = new IntentIntegrator(act);
//        integrator.initiateScan();

        IntentIntegrator intentIntegrator = new IntentIntegrator(act);
        intentIntegrator
                .setDesiredBarcodeFormats(IntentIntegrator.ALL_CODE_TYPES)
                .setPrompt("将二维码/条码放入框内,即可自动扫描")//写那句提示的话
                .setOrientationLocked(false)//扫描方向固定
                .setCaptureActivity(ScanActivity.class) // 设置自定义的activity
                .initiateScan(); // 初始化扫描
    }

创建ScanActivity (记得在AndroidManifest.xml中添加该class)

public class ScanActivity extends AppCompatActivity implements View.OnClickListener {
    DecoratedBarcodeView dbvCustom;
    Button switchLight;
    TextView switchText;
    private CaptureManager captureManager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.acitivity_scan);

        switchLight = findViewById(R.id.switch_light);
        switchText = findViewById(R.id.switch_text);
        dbvCustom = findViewById(R.id.dbv_custom);

        dbvCustom.setOnClickListener(this);
        switchLight.setOnClickListener(this);
        // 如果没有闪光灯功能,就去掉相关按钮
        if (!hasFlash()) {
            switchLight.setVisibility(View.GONE);
            switchText.setVisibility(View.GONE);
        }

        captureManager = new CaptureManager(this, dbvCustom);
        captureManager.initializeFromIntent(getIntent(), savedInstanceState);
        captureManager.decode();
    }

    @Override
    protected void onPause() {
        super.onPause();
        captureManager.onPause();
    }

    @Override
    protected void onResume() {
        super.onResume();
        captureManager.onResume();
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
        captureManager.onDestroy();
    }

    @Override
    public void onSaveInstanceState(Bundle outState, PersistableBundle outPersistentState) {
        super.onSaveInstanceState(outState, outPersistentState);
        captureManager.onSaveInstanceState(outState);
    }

    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        return dbvCustom.onKeyDown(keyCode, event) || super.onKeyDown(keyCode, event);
    }

    // 判断是否有闪光灯功能
    private boolean hasFlash() {
        return getApplicationContext().getPackageManager()
                .hasSystemFeature(PackageManager.FEATURE_CAMERA_FLASH);
    }

    private Boolean isOn = false;
    @Override
    public void onClick(View view) {
        switch (view.getId()) {
            case R.id.switch_light:
                if (!isOn) {
                    this.isOn = true;
                    this.switchText.setText("关闭");
                    dbvCustom.setTorchOn(); // 打开手电筒
                } else {
                    this.isOn = false;
                    this.switchText.setText("打开");
                    dbvCustom.setTorchOff(); // 关闭手电筒
                }
                break;
        }
    }
}

布局中增加一个开关灯的按钮,一个文字提示

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context=".ScanActivity">

    <com.journeyapps.barcodescanner.DecoratedBarcodeView
        android:id="@+id/dbv_custom"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:zxing_framing_rect_height="200dp"
        app:zxing_framing_rect_width="200dp"
        app:zxing_preview_scaling_strategy="fitXY"
        app:zxing_use_texture_view="true">

        <Button
            android:id="@+id/switch_light"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_gravity="center"
            android:layout_marginBottom="45dp"
            android:layout_marginTop="200dp"
            android:background="@drawable/switch_track"></Button>

        <TextView
            android:id="@+id/switch_text"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_gravity="center"
            android:gravity="center"
            android:layout_marginBottom="45dp"
            android:textColor="#ffffff"
            android:layout_marginTop="240dp"
            android:textSize="16sp"
            android:text="打开" />
    </com.journeyapps.barcodescanner.DecoratedBarcodeView>
</FrameLayout>

ok,简易的扫码开关灯已经实现。这块基本上都是原生的东东。

上一篇下一篇

猜你喜欢

热点阅读