一、初始化vue脚手架

        注:安装完vue环境之后(vue环境配置,网上找)

vue init webpack myvue

1、参数解释:vue init--->初始化vue项目命令,webpack--->利用webpack模式,myvue----->vue项目名称。

2、初始化完成之后,可使用npm run dev在开发模式进行运行。

二、初始化cordova项目

       注:安装cordova环境需网上找相关资料。

cordova create app com.demo app

1、参数解释:cordova create---->为创建命令,app---->当前目录名称,com.demo----->命名空间,app---->项目名称(及最后打包的apk名称)

2、初始化完成之后,进入项目根目录添加安卓平台

cordova platform add android

3、将cordova项目打包成安卓apk安装包(编译安卓app)。

cordova build android

编译安卓系统,如果成功就表示编译完成
        注:如果没编译成功,那么就用检查环境(cordova requirements)命令去检查。

另外:cordova run android是指在安卓真机上运行,前提是前提是电脑连接了安卓手机并且装好驱动和打开usb调试。

三、在vue项目中集成cordova的相机插件,并且完成调用。

说明:vue项目在单独开发的过程中并不需要安装cordova相机的插件,只有在利用cordova进行打包的过程中需要给cordova项目添加相机插件。所以若是在vue项目开发的过程中使用了cordova的某些插件,则需要在打包的过程中添加已使用的插件。

使用cordova相机插件本文主要是参考:w3c cordova相机调用教程

1、根据教程在vue中封装调用相机的接口:

2、在vue文件中进行调用:

利用以上的用法已经实现了调用cordova的相机插件,但是注意:此时在vue项目预览的过程中是无法使用该方法的,需要在打包过程中安装相应插件再进行打包即可使用(打包见下:)。

四、利用cordova打包vue项目

说明:[原理]cordova原始打包web移动项目为apk,其实是将cordova项目中的www目录下的内容进行打包,所以需要vue项目需要生成相应的页面,然后覆盖到www目录下即可。

       [步骤]1、修改vue项目的相应配置为打包做准备;2、覆盖cordova下的www目录;3、安装vue项目中使用到的cordova插件;4、进行打包操作。

1、修改vue项目的相应配置为打包做准备:

  • 将初始化cordova项目www目录下的index.html中的内容覆盖到vue项目的index.html中,如下:

说明:这样做的目的主要就是解决最终的app在手机上的适配问题,一级引入cordova的js文件。

  • 修改main函数中的vue项目初始化顺序,添加deviceready事件监听,当cordova设备准备完成后再new vue

  • 修改config/index.js文件,解决打包中的路径问题。

 至于此处为什么会这样修改,在后续的博客文章中会逐渐解释清楚。

  • 执行vue项目的编译命令npm run build,在配置好的www目录下会生成相应的文件。

2、覆盖cordova下的www目录:

将vue项目中生成的www下的文件覆盖到Cordova项目的www目录下。

若是vue项目和Cordova项目是整合在同一个项目中,则通过配置vue项目的config/index文件的vue编译路径则可自动添加至cordova的www目录下。

3、安装vue项目中使用到的cordova插件

此时在cordova项目中就需要安装已经在vue项目中使用过的插件,例如在本项目中使用的相机功能,则需要安装cordova的相机插件。

##此命令就是给cordova项目添加相机插件。

cordova plugin add cordova-plugin-camera

另外:查看已安装的cordova插件,就可以查看当前cordova项目中已经使用的插件列表。

cordova plugin ls

4、利用cordova命令进行打包操作。

cordova build android

命令执行成功之后,在项目的目录下就可以找到已完成打包的APK文件。

--------------------至此vue+cordova的集成已经完成,包含调用cordova相机插件的方法,以及使用cordova进行项目打包--------

特别感谢:vue和cordova项目整合打包,并实现vue调用android的相机的demo提供的思路和具体方法。

 

Logo

前往低代码交流专区

更多推荐