cordova + Vue 开发 APP 上手指南

什么是 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

其会在当前目录下生成以下项目结构:

image

其中,我们重点关注 www 和 platforms 目录,我们写的 HTML/CSS/JS 代码就放在这个目录下面,现在这个目录下面已经有 cordova 为我们提供的示例项目代码。

platforms 是用来存放我们为相应的系统平台打包的运行源码,它现在是空的,我们依次执行以下命令来添加相应的平台:

cordova platform add android --save

cordova platform add ios --save

cordova platform add browser --save

添加完成之后,我们可以在 platforms 文件夹下面看到 android 和 ios 文件夹。我们可以使用下面这行命令来查看我们已经添加的平台和可以添加的全部平台:

cordova platform

添加完平台之后,我们可以使用 cordova run < platform > 来运行相应平台的代码,作为前端开发者,我们可以首先在浏览器里面跑起来我们的项目:cordova run browser (前提是你前面添加了 browser 平台),默认情况下,它会在 8000 端口打开项目:

image

如果你想查看它在安卓平台下的效果,则需要安装配置 Android SDK 环境,包括 Java JDK 的安装和环境变量配置, Android SDK 的安装和环境变量配置。这个过程可以通过 Android studio 来更高效地安装配置,当然,如果你的项目不涉及调用原生 API 的话,则可以直接下载 SDK Manager 管理工具来下载,进去依次点击 "Android SDK 工具",在下拉菜单中选择 "SDK Tools", 然后在表格中选择相应的平台所需的 SDK 包,建议直接下载 zip,下载完之后,在环境变量中配置(具体过程可以百度,很简单)。

配置完成之后,在刚下载好的 SDK manager 中打开 SDK Manager.exe 文件,在打开的界面中下载相应 API 级别的 SDK (推荐安装 Android 8.0 级别)就可以了,其中 Tools 下面的前三项必须安装,需要注意的是,这些 SDK 都比较大,准备好硬盘空间。

一切环境配置好之后,就可以通过 cordova run android 来调试你的应用在 Android 系统下的表现了。

当然,你想打包出来 apk 可安装文件的话,也可以通过一行命令解决:

cordova build android

打包成功之后的安装包可以在 "platforms → android → app → build → outputs → apk → debug" 下面找到。

以上就是一个简单 APP 的打包过程。

如何打包 Vue 项目

如果我们已经编写好了 Vue 项目,想把 Vue-cli 项目打包成一个 APP,该怎么做呢?很简单,把你的 Vue 项目文件夹移到和 cordova 项目同一级的位置(这不是必须,主要是好管理),如下:

image

放好之后,我们需要修改 Vue 项目的打包配置文件:

config - index.js:

image

build - utils.js

image

其主要目的是将 Vue 项目的打包目录设置我们我们 cordova 项目的 www 项目之下。

完成之后,在 vue 项目目录下运行 npm run build 打包 vue 项目,完成之后,我们会发现 cordova 项目 www 文件夹下出现了我们打包出来的 dist 文件夹和 index.html 入口文件。

我们回到 cordova 项目目录,在其下执行 cordova build <platform name> 就可以打包出 vue 项目了。

以上就是使用 cordova 项目构建 APP 的基本过程,当然使用 cordova 的原因在于我们可以通过添加插件来拥有 Web 开发不曾拥有的原生功能体验,这些,通过学习多多尝试。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,324评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,303评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,192评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,555评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,569评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,566评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,927评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,583评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,827评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,590评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,669评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,365评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,941评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,928评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,159评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,880评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,399评论 2 342

推荐阅读更多精彩内容