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

发布于 5 年前 作者 sinazl 2163 次浏览 最后一次编辑是 5 年前 来自 分享

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的上面

1 回复

相当于

1、vue对应方法中直接使用cordova api 2、先把vue用webpack打包静态资源 3、在vue项目的index.html引入cordova 注意cordova要放在 vue build.js上面。 这样的话cordova里面的方法就是全局变量了

回到顶部