ionic和cordova初探--从安装到运行首个app
好多人说ionic好用,一直要推荐我用,我就不信了,来安装玩一下试试效果。实践出真知!安装过程各种坑,工具太多了,太麻烦了,差点放弃(还好坚持下来呢)。
1.安装node
许多前端工具的安装都依赖于node的包管理器npm,Node官网: https://nodejs.org/
安装完成后在cmd中输入 npm -v
回车。
查看版本号如图:
2.安卓环境
JDK下载地址:http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html
JDK需要配置两个环境变量:(如果已配置就无需再配置)
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默认安装在
C:\Users\Administrator(此目录为本机名)\AppData\Roaming\npm\
目录。
注意AppData是隐藏文件,需要在文件夹选项里面把隐藏文件显示才可以看到(具体的怎么显示隐藏文件夹百度)。
本地安装路径如图所示:
- 修改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这个目录里。`
示意图如下:
【好消息】我的微信公众号正式开通了,关注一下吧!
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
界面无小事(八):RecyclerView增删item
界面无小事(一):RecyclerView+CardView了解一下界面无小事(二):让RecyclerView展示更多不同视图界面无小事(三):用RecyclerView + Toolbar做个文件选择器界面无小事(四):来写个滚动选择器吧!界面无小事(五):自定义TextView界面无小事(六):来做个好看得侧拉菜单!界面无小事(七):使用代码动态增删布局 目录 前言 增删item 自定义增删动画 最后 前言 之前写过一篇代码动态增删布局的, 对比下这次的RecyclerView增删item, 说句实话, 代码动态增删布局基本可以退群了. 增删item 当然首先你可以按照第一篇-界面无小事(一): RecyclerView+CardView了解一下建立基础的RecyclerView. 这次的关键是在适配器代码中加入增删item的操作. 要注意一点, 刷新和原来在ListView的操作是不一样的. 你可以直接看官方文档, 大致有这几个: notifyItemInserted() notifyItemRemoved() notifyItemMoved() notifyItemChang...
- 下一篇
Android标题栏随着滑动显示隐藏
这次实现标题栏随着上滑下滑显示隐藏 实现这个效果需要,Support Design库中的CoordinatorLayout和AppBarLayout进行配合才行。 dependencies { ... implementation 'com.android.support:design:27.1.1' //必须添加 implementation 'com.android.support:cardview-v7:27.1.1' implementation 'com.github.CymChad:BaseRecyclerViewAdapterHelper:2.9.22' } xml布局代码 <?xml version="1.0" encoding="utf-8"?> <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- Windows10,CentOS7,CentOS8安装Nodejs环境
- SpringBoot2整合Thymeleaf,官方推荐html解决方案
- Jdk安装(Linux,MacOS,Windows),包含三大操作系统的最全安装
- Eclipse初始化配置,告别卡顿、闪退、编译时间过长
- SpringBoot2编写第一个Controller,响应你的http请求并返回结果
- CentOS7,8上快速安装Gitea,搭建Git服务器
- SpringBoot2更换Tomcat为Jetty,小型站点的福音
- Docker使用Oracle官方镜像安装(12C,18C,19C)
- Linux系统CentOS6、CentOS7手动修改IP地址
- Docker快速安装Oracle11G,搭建oracle11g学习环境