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

简介: 好多人说ionic好用,一直要推荐我用,我就不信了,来安装玩一下试试效果。实践出真知!安装过程各种坑,工具太多了,太麻烦了,差点放弃(还好坚持下来呢)。1.安装node许多前端工具的安装都依赖于node的包管理器npm,Node官网: https://nodejs.org/安装完成后在cmd中输入 npm -v 回车。

好多人说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\Administrator(此目录为本机名)\AppData\Roaming\npm\目录。
    注意AppData是隐藏文件,需要在文件夹选项里面把隐藏文件显示才可以看到(具体的怎么显示隐藏文件夹百度)。

本地安装路径如图所示:


ionic 和 cordova默认安装路径
  • 修改PATH环境变量,在末尾加上 C:\Users\Administrator(此目录为本机名)\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这个目录里。`

示意图如下:


运行在浏览器
运行在安卓模拟器

【好消息】我的微信公众号正式开通了,关注一下吧!
关注一下我的公众号吧
相关文章
|
5月前
|
缓存 监控 Android开发
App Trace 快速安装解析(开发者视角)
App Trace 是一款应用性能监控工具,可追踪启动时间、方法耗时及卡顿等指标,助力开发调试与性能优化。支持 Android 和 iOS 平台,提供依赖引入、初始化配置和自动化脚本等快速安装方案,同时包含采样率、本地缓存等高级配置选项。集成后可通过日志检查与测试事件验证功能,注意在发布版本中使用 no-op 版本以减少性能影响,并确保隐私合规。
|
4月前
|
存储 人工智能 Android开发
为什么微信发送的APP安装不了,.apk转化为.apk.1
微信发送的APP文件常被改为.apk.1格式导致无法安装,推荐使用夸克或QQ浏览器解决。
349 14
|
5月前
|
监控 测试技术 Android开发
App Trace技术解析:传参安装、一键拉起与快速安装
本文从开发者视角解析App Trace技术的关键功能与实现方法,涵盖传参安装、一键拉起和快速安装技术。详细介绍了Android和iOS平台的具体实现代码与配置要点,探讨了参数丢失、跨平台一致性及iOS限制等技术挑战的解决方案,并提供了测试策略、监控指标和性能优化的最佳实践建议,帮助开发者提升用户获取效率与体验。
|
4月前
|
存储 Android开发 数据安全/隐私保护
Thanox安卓系统增加工具下载,管理、阻止、限制后台每个APP运行情况
Thanox是一款Android系统管理工具,专注于权限、后台启动及运行管理。支持应用冻结、系统优化、UI自定义和模块管理,基于Xposed框架开发,安全可靠且开源免费,兼容Android 6.0及以上版本。
408 4
|
5月前
|
存储 前端开发 JavaScript
仿真银行app下载安装, 银行卡虚拟余额制作app,用html+css+js实现逼真娱乐工具
这是一个简单的银行账户模拟器项目,用于学习前端开发基础。用户可进行存款、取款操作,所有数据存储于浏览器内存中
|
9月前
|
机器学习/深度学习 存储 人工智能
MNN-LLM App:在手机上离线运行大模型,阿里巴巴开源基于 MNN-LLM 框架开发的手机 AI 助手应用
MNN-LLM App 是阿里巴巴基于 MNN-LLM 框架开发的 Android 应用,支持多模态交互、多种主流模型选择、离线运行及性能优化。
7208 80
MNN-LLM App:在手机上离线运行大模型,阿里巴巴开源基于 MNN-LLM 框架开发的手机 AI 助手应用
|
4月前
|
存储 移动开发 监控
App Trace功能实战:一键拉起、快速安装与免提写邀请码的应用实践
App Trace系统通过一键拉起、快速安装和免提写邀请码三大功能,显著提升用户转化率、安装成功率和邀请注册率。结合深度技术实现与优化,助力公司用户增长,成为移动端核心基础设施。
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
2374 3
|
Android开发
ionic3项目实战教程 - 第13讲 ionic3社交分享(QQ分享和微信分享)
ionic3项目实战教程 - 第13讲 ionic3社交分享(QQ分享和微信分享) 图片发自简书App 这一讲主要包含以下几个部分: 1.在微信开放平台创建应用获得wechatappid; 2.
1542 0
|
Android开发 iOS开发
ionic3项目实战教程 - 第12讲 ionic3制作icon和splash
这一讲主要包含以下几个部分: 1.设计icon; 2.设计splash; 3.生成各个平台各个尺寸的icon和splash; 1.设计icon 来,打开你的PS,新建-文件,像素为1024*1024,背景透明,确定; .
1290 0
下一篇
oss云网关配置