Cordova与Vue结合使用

1.Cordova与Vue结合使用，调用安卓基层功能

    在完成我的上一篇文章所述的操作以后，我们就可以来完成以下的操作。

1.1 .在Cordova中创建Vue项目

命令行创建完Cordova 项目后，cd 项目名，使用vue-cli 创建Vue项目。 创建完毕的项目目录如右图。其中的Vue文件就是我们的H5项目

       1.2 .项目中调用安卓功能

         在Cordova中调用基础工程比较轻松，它把基础的插件都集成在一块。

         首先添加我们需要的插件。这里以相机为例子。在CordovaProject目录下，命令行输入

cordova plugin add cordova-plugin-camera

         我们把相机功能放在HELLOWORD的组件里，HTML结构

                                              JS代码如下

cameraTakePicture() {
      console.log("1")
   navigator.camera.getPicture(onSuccess, onFail, { 
      quality: 50,
      destinationType: Camera.DestinationType.DATA_URL
   })

   function onSuccess(imageData) {
      var image = document.getElementById('myImage')
      image.src = "data:image/jpeg;base64," + imageData
   }

   function onFail(message) {
      alert('Failed because: ' + message)
   }
}

   如此调用一个安卓的基础相机功能就完成了。接下来我们要的就是将它打包出来并放在安卓机器上实现。但在这之前，我们需要修改一下webpack的打包生成目录，使它生成的H5项目文件放置在www目录文件下，减少工程步骤。进入到vue目录config文件下，进入index.js,将build模块修改一下，如下

  build: {
    // Template for index.html
    index: path.resolve(__dirname, '../../www/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../../www'),
    assetsSubDirectory: 'static',
    assetsPublicPath: './',
.
.
.
.
}

命令行进入vue项目，命令行npm run build，我们会发现打包后的文件出现在www下。完成这个以后。我们就可以进行打包APK

打包APK流程在下一章。