ionic和cordova初探--从安装到运行首个app

好多人说ionic好用,一直要推荐我用,我就不信了,来安装玩一下试试效果。实践出真知!安装过程各种坑,工具太多了,太麻烦了,差点放弃(还好坚持下来呢)。

1.安装node

许多前端工具的安装都依赖于node的包管理器npm,Node官网: https://nodejs.org/ 安装完成后在cmd中输入 npm -v 回车。 查看版本号如图:

查看版本号

2.安卓环境

PATH:%JAVA_HOME%\bin
CLASSPATH:.;%JAVA_HOME%\lib\tools.jar (一定不要忘了前面的点) 

配置完成后,cmd中输入java -version 查看版本号。

3.安装安卓的SDK

  • 打开Android Studio,File --> Settings --> 搜索sdk,找到对应的sdk进行安装即可。
  • 需要在Path环境变量中添加两个值。分别是 Android SDK中tools目录的路径和platform-tools的路径。 例如:
D:\android-sdk\tools;
D:\android-sdk\platform-tools;

4. 安装ionic和cordova

  • 安装命令
命令行输入 `npm install -g cordova ionic`

安装示意图:

安装示意图

如果安装不了,可以试试国内镜像安装,首先安装cnpm,执行npm install -g cnpm --registry=https://registry.npm.taobao.org命令安装。然后执行命令cnpm install -g cordova ionic安装ionic和cordova

  • 查看是否安装成功:
查看ionic版本 `ionic -v`
查看cordova版本 `cordova -v`

查看ionic版本

查看cordova版本

  • ionic 和 cordova默认安装在 C:\Users\hello(此目录为本机名)\AppData\Roaming\npm\目录。 注意AppData是隐藏文件,需要在文件夹选项里面把隐藏文件显示才可以看到(具体的怎么显示隐藏文件夹百度)。

本地安装路径如图所示:

ionic 和 cordova默认安装路径

  • 修改PATH环境变量,在末尾加上 C:\Users\hello(此目录为本机名)\AppData\Roaming\npm\;

5. 使用ionic命令行创建新项目

  • 打开cmd执行'ionic start'
  • 然后输入一个项目名,回车
  • 然后按下tab键选择一个默认的模板,按回车。比如我这里选择的是blank模板。
  • 然后看到有一行提示 ? Integrate your new app with Cordova to target native iOS and Android? (y/N) 意思是是否要把 iOS 和Android集成到刚刚用Cordova 创建的app中 ,我这里选择y 表示确定。然后就会自动安装缺失的或者更新某些工具版本。
  • 然后就会看到一个提示? Install the free Ionic Pro SDK and connect your app? 我这里选择的y,表示确认。
  • 然后需要输入邮箱登陆。

然后是输入密码

后面还有步骤,太麻烦了,我这里就不列举了,我已经放弃使用ionic创建安卓项目了,可以直接看下文。

6. 使用cordova创建安卓项目(建议直接跳过第5步,使用第6步)

(1)打开一个存放项目的目录,打开命令行,输入cordova create 目录 报名 App名称,然后回车。例如cordova create first_sample com.lzw.sample SampleApp
(2)打开刚创建的first_sample目录,打开命令行,输入命令cordova platforms add android,表示添加安卓支持。

如果是要支持ios平台,可以输入cordova platforms add ios

如果是要支持web网页,可以输入cordova platforms add browser

如果不知道有哪些平台可以选择,可以使用命令 cordova platforms list 查看已经安装的平台和可以支持的平台。

(3)在特定平台执行程序
  • 1.在浏览器打开,进入工程根目录,输入cordova run browser,然后浏览器自动访问http://localhost:8000/
  • 2.在安卓上编译Cordova APP
1.输入`cordova requirements`命令检查是否满足构建平台的要求。如有报错请按错误提示去安装相应的工具。
2.执行`cordova build android`命令, 编译安卓项目
3.执行`cordova run android`命令,就会自动打开模拟器,在模拟器运行安卓项目了,如果执行`cordova run`,默认是在浏览器运行。
默认是debug版本,打包出来的apk在 你创建的项目根目录\platforms\android\app\build\outputs\apk\debug目录下。
默认启动页是`www/index.html`这个页面。逻辑编写在`www/js这个目录里。`

示意图如下:

运行在浏览器

运行在安卓模拟器

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏张戈的专栏

Linux服务器的进程查看命令详解

Linux 服务器正常启动后,提供服务时会调用程序,占用进程。这时候我们如何查看系统中有哪些进程在被调用呢?我们可以通过以下命令来查看。 一、ps 命令 ps ...

3.8K9
来自专栏Flutter入门到实战

React Native初探--从安装运行首个app到填坑指南

好多人说rn好用,一直要推荐我用,我就不信了,来安装玩一下试试效果。实践出真知!安装过程各种坑,工具太多了,太麻烦了,差点放弃(还好坚持下来呢)。

1813
来自专栏Seebug漏洞平台

GitLab 任意文件读取漏洞 (CVE-2016-9086) 和任意用户 token 泄露漏洞

Author:dawu,LG(知道创宇404安全实验室) Data:2016-10-09 0x00 漏洞概述 1.漏洞简介 GitLab 是一个利用Ruby o...

4387
来自专栏网站漏洞修补

网站漏洞修补网站文件任意查看漏洞详情与利用

在对网站程序代码的安全检测当中,网站文件任意查看漏洞在整个网站安全报告中属于比较高危的网站漏洞,一般网站里都会含有这种漏洞,尤其平台,商城,交互类的网站较多一些...

1426
来自专栏云计算教程系列

如何在CentOS 7上设置Node.js生产应用程序

Node.js是一个开源的Javascript运行时环境,用于轻松构建服务器端和网络应用程序。该平台在Linux,OS X,FreeBSD和Windows上运行...

1320
来自专栏ppjun专栏

【转】 Android是怎么样启动应用程序的,从点击启动图标到显示视图到底做了什么操作

转载自 https://juejin.im/post/5b0d0a0cf265da091f105858

1086
来自专栏Angular&服务

mac安装nvm

如果没有.bash_profile文件需要自行touch .bash_profile哦

1163
来自专栏技术博文

LNMP源码编译安装(centos7+nginx1.9+mysql5.6+php7)

1.准备工作: 1)把所有的软件安装在/Data/apps/,源码包放在/Data/tgz/,数据放在/Data/data,日志文件放在/Data/logs,项...

4316
来自专栏应用案例

Linux常用软件安装总结

首先说xshell一个好用的功能,如果你同时要管理几台一样的服务器组成的集群,一台一台操作很麻烦,可以使用xshell菜单栏——工具——勾选发送键输入到所有会话...

3528
来自专栏程序小工

【Linux】系统学习Crontab定时任务

crontab 是一个用于设置周期性执行任务的工具。目前服务器端的运行环境大多数为 Linux,在日常的运营和维护中会有很多需要定期执行的操作,其中有些操作是可...

1812

扫码关注云+社区

领取腾讯云代金券