Vue基于Cordova调用扫一扫

Vue基于Cordova调用扫一扫

Vue使用Cordova打包的app如何调用扫一扫功能?在这里简单描述一下过程

Vue层面代码

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

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <!--感谢作者:待花谢花开提供如何引入Cordova的方法-->
  <!--作者:待花谢花开-->
  <!--链接:https://www.jianshu.com/p/25d797b983cd-->
  <meta http-equiv="Content-Security-Policy"
        content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
  <meta name="format-detection" content="telephone=no">
  <meta name="msapplication-tap-highlight" content="no">
  <meta name="viewport"
        content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
  <!--來源:简书-->
  <!--简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。-->
  <title>vuetest</title>
  <!-- 引入cordova.js -->
  <script type="text/javascript" src="cordova.js"></script>
  <!-- 扫一扫包的引用 -->
  <script type="text/javascript" src="cordova_plugins.js"></script>

</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>

在这里插入图片描述

3.src>main.js添加以下代码

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
document.addEventListener('deviceready', function () {
  new Vue({
    el: '#app',
    router,
    components: { App },
    template: '<App/>'
  })
  window.navigator.splashscreen.hide()
}, false)

在这里插入图片描述

4.控制台打 npm run build 生成 dist 把dist的文件全部复制到Cordova项目的www文件夹下并把www文件夹的全部替换。
在这里插入图片描述
替换后的截图
在这里插入图片描述

Cordova层面代码

1.新创建一个Cordova项目
2.控制台分别执行下面指令

//添加扫一扫插件
cordova plugin add phonegap-plugin-barcodescanner --save
//添加android平台的编译
cordova platform add android
//生成debug的apk
cordova build android

PS:插件添加成功后在config.xml会有下面标志
在这里插入图片描述

PS:成功build出apk的标志
成功build出apk的标志

课程概述: 本课程是一个小型的vue周边技术+以php为基础的+微信接口开发的小型项目。本项目以微信码关注公众号实现 网站自动登陆这一功能为载体,将会讲解如下主要核心知识点: 前端你将学习到: 一、vue-cli4进行前端项目的创建 二、如何使用vuex进行登陆信息的管理与同步 三、如何使用axios进行接口请求的封装与拦截 四、在脚手架里使用Element-UI 五、学习组件化编程的思想 六、如何解决接口前后端分离引起的跨域问题以及在跨域下使用cookie凭证进行会话维护 后端你讲学习到: 一、如何申请微信公众号测试账号,如何进行相关参数的配置,如何进行微信相关接口的开发 二、如何使用微信接口开发,如获取临时二维码,获取用户基础信息,监听公众号关注以及描事件 三、如何使用redis对数据进行缓存 四、如何使用php原生代码进行接口的开发 五、如何使用laralvel 7.x 框架进行接口的开发 六、学习到laravel 中核心概念的使用方法,如什么是依赖注入,如何使用服务容器解决依赖注入、服务提供者、中间件的使用,如何处理请求数据,如何进行用户认证,以及如何使用Eloquent ORM进行数据库操作 七、开发过程中遇到的问题,如何进行排查 八、git远端仓库的建立与配置,如何在配置多仓库下的公钥,服务器端部署公钥的配置,如何进行代码部署,本地与服务器代码的开发实时同步 九、如何使用composer帮助我们进行第三方依赖包的安装 本课程的设计思路随笔: 从业务层面上来讲,码关注公众号,实现网站端自动登陆是一个非常实用的功能,可以为微信公众号引流。 技术层面上来说,使用前后端分离进行制作,可以将前端以及后端的知识都涵盖到。对于前端的路由,信息维护,脚手架的搭建,ui组件的使用,接口的请求与封装都能够讲解到。 对于后端,本课程对php原生代码以及工作中使用频率比较高的同时也很优雅的laravel框架都会进行讲解,分别予以代码的实现。让同学们能够看到原生开发与框架开发的区别,原生开发使得基础比较弱的同学能够慢慢上手,也知道此功能实现的核心要点,在进行原生代码开发后,再进行框架开发,会有个循序渐进的过程,同时在框架里面我们会降到主流框架都会用到的一些核心思想,比如依赖注入,服务容器,中间件等等,同时对于想学习laravel框架的同学,学习过这个案例后,再去看文档就知道该如何去看,如何去学了。 对于整个代码的管理与部署,我们也会引入git仓库进行项目代码管理,如何在服务器进行网站环境的搭建与代码部署等等实用技巧。 相信本课程会给大家带来十足的收获,大家加油。
©️2020 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页