使用dsbridge实现Android端及Javascript端扫码并返回结果

最新推荐文章于 2024-08-30 14:24:10 发布

没有咸鱼的梦想

最新推荐文章于 2024-08-30 14:24:10 发布

阅读量1.5k

点赞数

分类专栏： Android Vue JavaScript 文章标签： android webview vue

本文链接：https://blog.csdn.net/nineteenthdog/article/details/107765307

版权

Vue 同时被 3 个专栏收录

12 篇文章 2 订阅

订阅专栏

JavaScript

4 篇文章 0 订阅

订阅专栏

Android

2 篇文章 0 订阅

订阅专栏

参考链接： 1. dsbridge使用说明 2. zxing使用说明

需求

在Android的APP中使用webview加载vue项目，项目中需要调用手机摄像头实现扫码并根据扫码的结果跳转到另一页面

步骤

1.添加 JitPack repository 到gradle脚本中

在这里插入图片描述

allprojects {
  repositories {
   ...
   maven { url 'https://jitpack.io' }
  }
}

2.添加依赖
在这里插入图片描述

dependencies {
    implementation 'com.github.wendux:DSBridge-Android:x5-3.0-SNAPSHOT'
}

3.Android中调用

    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        DWebView.setWebContentsDebuggingEnabled(true);
        setContentView(R.layout.activity_main);
        view = (DWebView) findViewById(R.id.mainView);
        this.viewSettings(view);
        view.addJavascriptObject(new QrCodeJsApi() {
            @Override
            @JavascriptInterface
            public String readQrCode(Object msg) {
                startQrCode();// 使用zxing扫码
                return "";
            }
		}
	}
	
	    // 开始扫码
    private void startQrCode() {
        Log.d(TAG, "开始扫码");
        // 申请相机权限
        if (ActivityCompat.checkSelfPermission(this, Manifest.permission.CAMERA) != PackageManager.PERMISSION_GRANTED) {
            // 申请权限
            ActivityCompat.requestPermissions(MainActivity.this, new String[]{Manifest.permission.CAMERA}, Constant.REQ_PERM_CAMERA);
            return;
        }
        // 申请文件读写权限（部分朋友遇到相册选图需要读写权限的情况，这里一并写一下）
        if (ActivityCompat.checkSelfPermission(this, Manifest.permission.READ_EXTERNAL_STORAGE) != PackageManager.PERMISSION_GRANTED) {
            // 申请权限
            ActivityCompat.requestPermissions(MainActivity.this, new String[]{Manifest.permission.READ_EXTERNAL_STORAGE}, Constant.REQ_PERM_EXTERNAL_STORAGE);
            return;
        }
        // 二维码扫码
        Intent intent = new Intent(MainActivity.this, CaptureActivity.class);
        startActivityForResult(intent, Constant.REQ_QR_CODE);
    }

4.Vue中调用
首先npm执行npm i dsbridge安装dsbridge

<script>
var dsBridge = require("dsbridge");

export default {
  created() {
    dsBridge.register("setQrCode", (res) => {
      this.scanResult(res);
      return res;
    });
  },
  methods: {
   scanner() {
      // 同步调用
      var synRes = dsBridge.call("readQrCode", "readQrCode");
      // 异步调用
      // dsBridge.call("readQrCode", "readQrCode", (res) => {
      //   let result = res.resultStr;
      //   this.scanResult(result);
      //   console.log(res);
      // });
    },
    // 扫码成功后的操作
    scanResult(result) {
// result就是扫描的结果，在这边对扫码结果进行处理
//      this.$axios
//        .get(process.env.API_HOST + "qrCode/selectNodeByCode", {
//          params: { qrCode: result },
//        })
//        .then((res) => {
//        });

 }
 }
</script>