Vue cordova混合app开发之Vue调用Cordova插件

cordova可以把html css js写的代码打包成app，还可以让js调用原生的api，Ionic就是基于cordova可以很好的开发混合app，cordova还可以和vue、react、angular完美结合来开发混合app。下面我们看看Vue cordova开发混合app之Vue调用Cordova插件

 

Vue 调用 cordova插件有两种方法：

如果想通过视频教程学习请访问：Vue+Cordova打造跨平台可安装的混合APP视频教程

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的插件）