ionic与Cordova的学习(补充)
罗伟兆
2023-12-01
ionic与Cordova的学习:
###安装ionic 和Cordoval的应用程序:
$ npm install -g ionic cordova
###使用应用程序
$ cd MyIonicProject/
$ ionic serve
###开始新的ionic应用程序
ionic start MyIonicProject tutorial(项目的起始模板)
$ cd myApp
$ ionic platform add android
$ ionic build android
$ ionic emulate android
###部署环境的配置:
# ionic环境和react native环境
## 使用Ionic开发需要安装的基本工具
- Node
- Git
- JAVA JDK
- Android SDK
- python
- Visual Studio 2015(选择安装) 如果在运行react native时出现需要c++环境表示需要安装此文件
- Ionic cordova
### 安装之前要做的事
- 把所不相关的软件都设置为非开机启动,特别是国产杀毒软件,卫士之类软件。
- 然后重新启动系统
- 安装过程和使用过程中如果有防火墙提示,都点击允许访问。如果有权限提示,都点击是或者确定。
- node的版本 4.4.4之上 (4.6.1推荐)
- 所有安装都不能有中文名称
## 安装Ionic开发需要的基本工具
### Node
- [下载地址](https://nodejs.org/en/download/)
### Git
- [下载地址](https://git-scm.com/download)
- ng-cordova插件需要使用
### JDK
- [下载地址](http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html)
- Java Development Kit
- 这是做java语言运行开发所依赖的工具,就像js语言运行需要浏览器一样
- 环境变量: javascript
- 环境变量配置:
+ JAVA_HOME ,变量值配置为:jdk安装路径(c:/xxx/jdk1.8.0.25)
+ CLASSPATH,变量值配置为:
.;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar;
*注意最前面有个点*
+ PATH,变量值追加: ;%JAVA_HOME%\bin;
- 输入javac较验
- 或输入java -version
没有成功;运行 %java_home% 查看文件的路径是否配对,在重新检查配置是否正确。
### Android SDK
- Android SDK是Android平台上进行软件开发所需要的开发包
- 这里我们通过安装Android Studio的方式来安装Android SDK
+ Android Studio 是Android开发的IDE(集成开发环境)
* 至少是2.0 或者更版本
- 我们不是要使用这个IDE,而是要使用它所集成的Android SDK,如果手动下载安装SDK很麻烦。
- 安卓官网被墙[android sdk 中文网站](http://www.androiddevtools.cn/)
- 注意:安装路径不要有中文也不要用空格
- 环境变量:
+ ANDROID_HOME:变量值配置为sdk安装路径(C:\Users\用户名\AppData\Local\Android\sdk)
+ PATH:变量值追加:
%ANDROID_HOME%\platform-tools
%ANDROID_HOME%\tools
- 检测
cmd命令行中输入adb
adb devices
### cordova
- 也是一种混合开发的工具w
- 通过npm 安装 cordova ,需要进行全局安装。
+ `npm install -g cordova`
![cordova安装.png](ReadeImgs/cordova安装.png)
### ionic
- 是基于cordova的混合开发工具,是对cordova的封装
- 通过npm 安装 Ionic,需要进行全局安装
+ `npm install -g ionic`
![ionic安装.png](ReadeImgs/ionic安装.png)
### Viusal Studio 2015
- 主要是为了使用该工具所提供的C++环境
- 这是个终极大Boss
- 安装所需时间30分钟到2小时不等,甚至更长(取决于电脑性能)。
******
以上是Ionic开发移动App所依赖的环境
******
## 使用ReactNative开发所需要的环境
- Node
- Python
- JDK
- Android SDK
- visual studio 2015
- 模拟器(可选)
### Node
### Python
- [下载地址](https://www.python.org/downloads/)
### JDK
### Android SDK
### 模拟器(可选,大纲之外)
### 快速开始
- ionic start myApp tabs
+ 初始化一个项目,tabs可以不写,也可以是/black/sidemenu
- ionic platform add android
+ 添加一个andorid平台,其实是下载android源码
+ 添加一个ios平台 `ionic platform add ios`
- ionic build android
+ 将项目代码编译成 android 安装包
如果 下载文件下载不下来,就把
gradle-2.2.1-all.zip 放到这个目录
C:\Users\isc\.gradle\wrapper\dists\gradle-2.2.1-all\2m8005s69iu8v0oiejfej094b
- build 时多尝试几次
###运行应用程序:
ionic run android --device
###启动应用程序
ionic run android --prod --release
# or
ionic build android --prod --release
###签署Android APK密钥
keytool -genkey -v -keystore my-release-key.jks -keyalg RSA -keysize 2048 -validity 10000 -alias my-alias
###运行jarsigner工具:
jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore my-release-key.jks android-release-unsigned.apk alias_name
zipalign -v 4 android-release-unsigned.apk HelloWorld.apk
###签署运行apksigner
apksigner verify HelloWorld.apk
安装教程:
http://www.dwenzhao.cn/profession/handhold/studiocordova.html
##使用ionic generator自动生成器,生成目录文件;
*创建页面 :ionic g page [PageName] 注意:在根目录下运行目录即可
*创建组件 ionic g component [ComponentName]
*创建指令:ionic g directive [DirectiveName],可以在应用程序的任何元素上使用修饰符属性
*创建服务提供 ionic g provider [ProviderName] 创建服务,提供负责处理的程序数据,本地存从,SQLite等
*创建管道 ionic g pipe [PipeName]