framework7+vue+cordova移动开发（三）调用摄像头扫一扫

最新推荐文章于 2024-06-10 19:11:09 发布

飞天代码

最新推荐文章于 2024-06-10 19:11:09 发布

阅读量781

点赞数

分类专栏： cordova framework7 文章标签： vue cordova

本文链接：https://blog.csdn.net/weiyongliang_813/article/details/106935830

版权

cordova 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

framework7

4 篇文章 0 订阅

订阅专栏

1.在某个.vue里面添加下面代码

<template>
  <div id="app">
    <p>测试扫一扫</p>
    <!-- 扫一扫按钮 -->
    <button @click="handleClick" >扫一扫</button>
  </div>
</template>

<script>
export default {
  name: 'App',
  el: '#app',
  methods: {
    handleClick: function () {
      // 扫一扫方法
      cordova.plugins.barcodeScanner.scan(
        function (result) {
          alert("We got a barcode\n" +
            "Result: " + result.text + "\n" +
            "Format: " + result.format + "\n" +
            "Cancelled: " + result.cancelled)
        },
        function (error) {
          alert(error)
        }
      )
    }
  }
}
</script>

2、在index.html 的引入cordova.js和cordova_plugins.js

<body>
  <div id="app"></div>
  <% if (process.env.TARGET === 'cordova') { %>
  <script type="text/javascript" src="cordova.js"></script>
  <!-- 扫一扫包的引用 -->
  <script type="text/javascript" src="cordova_plugins.js"></script>
  <% } %>
  <!-- built script files will be auto injected -->
</body>

</html>

3、app.js中加入


if (process.env.TARGET === 'cordova'){
  /* eslint-disable no-new */
  document.addEventListener('deviceready', function () {
    // Init App
    new Vue({
      el: '#app',
      panel: {
        swipe: 'left',
        leftBreakpoint: 768,
        rightBreakpoint: 1024,
      },
      render: (h) => h(App),
      // Register App Component
      components: {
        app: App,
        statusbarOverlay:false
      },
    });
    window.navigator.splashscreen.hide()
  }, false);
}else{
  new Vue({
    el: '#app',
    panel: {
      swipe: 'left',
      leftBreakpoint: 768,
      rightBreakpoint: 1024,
    },
    render: (h) => h(App),
    // Register App Component
    components: {
      app: App,
      statusbarOverlay:false
    },
  });
}

4、添加相应的插件
cordova plugin add phonegap-plugin-barcodescanner --save

然后自然就是打包测试了。

飞天代码

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
framework7+vue+cordova移动开发（三）调用摄像头扫一扫

1.在某个.vue里面添加下面代码<template> <div id="app"> <p>测试扫一扫</p>  <button @click="handleClick" >扫一扫</button> </div></template><script>export default { name: 'App', el
复制链接

扫一扫

专栏目录