cordov vue项目中调用手机原生api

cordova不仅可以把vue项目打包成app,还可以让vue借助cordova调用手机原生的api 比如拍照 比如图片上传 比如定位 比如扫描二维码 比如支付等等

Vue Cordova教程-Vue+Cordova打造跨平台可安装的混合APP视频教程: https://www.itying.com/goods-937.html

1、使用vue-cordova 插件 (不推荐使用)

https://github.com/kartsims/vue-cordova

1、vue项目安装npm install --save vue-cordova

2、在main.js引入插件并use插件 import VueCordova from ‘vue-cordova’

Vue.use(VueCordova)

3、调用插件 注意在对应的组件需要引入 var Vue = require(‘vue’);

Vue.cordova.camera.getPicture((imageURI) => {
                 window.alert('Photo URI : ' + imageURI)
            }, (message) => {
                 window.alert('FAILED : ' + message)
            }, {
                 quality: 50,
                destinationType: Vue.cordova.camera.DestinationType.FILE_URI
            })

4、注意需要在vue项目 index.html引入 cordova.js

 <script src="cordova.js"></script>

2、index.html 引入cordova.js 并定义全局变量让vue组件里面直接使用cordova插件。 (推荐的使用方法)

1、在vue index.html引入cordova.js (注意顺序 cordova.js放在build.js上面)

2、直接可以在组件里面使用cordova的api (注意cordova里面要安装api的插件)

注意cordova.js放在vue build.js的上面

posted @   星辰之力  阅读(3906)  评论(0编辑  收藏  举报
编辑推荐:
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
阅读排行:
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 提示词工程——AI应用必不可少的技术
· Open-Sora 2.0 重磅开源!
· 周边上新:园子的第一款马克杯温暖上架
历史上的今天:
2018-03-29 音视频开发指南
2018-03-29 Android Studio3.0 Error:Execution failed for task ':app:javaPreCompileDebug' 错误
2017-03-29 Android TextWatcher应用实例
2016-03-29 在Windows的CMD中如何设置支持UTF8编码?
点击右上角即可分享
微信分享提示