安装cordova流程
什么是 cordova
cordova 是由 Apache 基金会支持的,使用 HTML5 + CSS3 + JS 来构建多平台 APP 程序的开发框架。其支持调用手机系统(Android、IOS、Windows phone)原生 API,它可以将你写的 Web 程序包裹进原生的 APP 壳中,也就是我们常说的 Hybrid APP (混合应用)。本文是一个前端开发者如何从 0 开始结合 Vue 来构建一个简单的 APP.
第一步,安装 cordova
安装 cordova
cordova 提供一个可以全局安装的脚手架工具,我们使用 npm 来安装,你的电脑还没有 npm 的话,需要先安装 node,node 本身自带 npm 包管理器,安装好 node 之后,我们打开命令行程序,输入以下命令,全局安装 cordova:
npm install -g cordova
下载完之后,输入 cordova -v 查看是否成功安装,出现相应的版本号则成功安装。
创建cordova项目
安装好之后,我们在新建的项目目录来新建一个 cordova 应用,在命令行输入以下命令新建:
cordova create learn-cordova
创建完成后,进入项目文件夹,安装cordova的一些插件
下载安卓环境:
cordova platform add android
检查构建APP的条件
cordova requirements
条件不完全满足无法构建APP
恭喜你,准备工作基本完成了!
构建APP,第一次打包时间会比较长,请耐心等待,时间真的很长,可能会让你以为命令行卡住了 ^ ~ ^
cordova build android
可能你的第一次打包会直接失败,这是因为没有安装 安卓SDK,这一点很重要。
至于如何安装安卓环境,请自行搜索。
下面介绍一些cordova的常用命令
项目的Cordova基本命令
初始化文件夹
cordova create cordova-app com.lxlazy.www.app cordovaApp
进入项目
cd cordova-app
添加平台 以及对应的安卓版本,需要下载对应的SDK
cordova platform add android@6.3.0
检查依赖
cordova requirements
真机调试
cordova run
添加插件
cordova plugin add XXXX
查看安装的插件
cordova plugins
卸载插件
cordova plugin remove XXXX
编译 打包成 apk文件
cordova build android
一些常见问题记录
- 需要打包的HTML,css,js文件 应该放在项目的www文件中,打包前将www文件夹清空,将vue项目打包后生成的dist文件夹中的内容复制到www文件夹中,然后执行
cordova build android
- 首屏白屏问题
在vue项目目录下config文件夹中找到index.js打开把build下的assetsPublicPath: '/'改成assetsPublicPath: ‘./’
…