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]
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 类似资料: