ionic框架的学习(入门篇)

来源:互联网 发布:德国哪个公司办网络好 编辑:程序博客网 时间:2024/05/17 22:31
###安装ionic
  *npm install -g cordova ionic
  
#遇到问题,无法安装
npm ERR! Windows_NT 10.0.14393
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "install" "-g" "cordova" "-g"
npm ERR! node v6.9.4
npm ERR! npm  v3.10.10
npm ERR! path C:\Users\MI\AppData\Roaming\npm\node_modules\cordova\node_modules\npm
npm ERR! code ENOENT
npm ERR! errno -4058
npm ERR! syscall access




#解决方法:  
先清除 npm cache  npm cache clean -f
安装n模块 npm install -g n
  
###启动应用程序  
  ionic start myApp tabs
  
###运行应用程序
  cs myApp 
  ionic serve
   
   
###开始例子应用
  $ionic start MyIonicProject tutorial


start 会告诉CLI创建一个新的应用程序。
MyIonicProject 将是您的项目中的目录名称和应用程序名称。
tutorial 将作为您的项目的起始模板。  


###在浏览器种查看应用程序


$ cd MyIonicProject/
$ ionic serve




----------------------------安装Cordova教程----------------------------------
##部署环境的配置:
 
 
 # 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 ,需要进行全局安装。


 ##安装步骤:


   1.Cordova命令行在Node.js上运行,可在 NPM上使用。打开命令提示符或终端,然后键入npm install -g cordova。 
   2.创建项目:cordova create <path>(配置路径)。
   3.创建Cordova项目后,导航到项目目录。要添加平台,请键入cordova platform add <platform name>。
      报错: Cannot find module 'config-chain'
 解决:https://stackoverflow.com/questions/34827684/cannot-find-module-umask
 
    1.npm uninstall -g ionic
         2. npm install -g ionic
         3.npm install -g config-chain
       ###重新运行cordova platform,继续报错
                 Cannot find module 'umask'
                    解决:npm uninstall -g cordova
                          npm install -g cordova@latest
         运行成功


###运行安卓应用程序:
   cordova run android


   报错:
Error: No emulator images (avds) found.
1. Download desired System Image by running: "C:\Users\MI\AppData\Local\Android\sdk\tools\android.bat" sdk
2. Create an AVD by running: "C:\Users\MI\AppData\Local\Android\sdk\tools\android.bat" avd
HINT: For a faster emulator, use an Intel System Image and install the HAXM device driver   


原因:sdk的安卓包没有安装成功


解决:
    1.启动运行 C:\Users\MI\AppData\Local\Android\sdk\tools\android.bat 程序,勾选 sdk platform 文件,下载安装。
    2.等待下载完成后,通过android Studio 程序打开创建的android 平台,启动运行程序
    3.打开 android Studio ,点击启动 按钮,发生报错
   Error running android: This version of Android Studio is incompatible with the Gradle Plugin used. 
Try disabling Instant Run (or updating either the IDE or the Gradle plugin to the latest version
 
解决方法:
Go to Settings/Preferences > Build, Execution, Deployment option > Instant Run and uncheck all the three boxes.


1.在project根目录下的gradle文件添加 
2.classpath ‘com.android.tools.build:gradle:2.0.0’
3.删除project下的build文件 
4.在你运行时,build文件会自动重建的
5.最后clean project -> sync project 此时第一次instant run会比较久.          
 


###在安卓手机上查看
  *插入启动usb调试接口,启动命令程序 ionic cordova run android --device


--生产运行  
###ionic cordova run android --prod --release
# or
ionic cordova build android --prod --release


-------签署Android APk命令
keytool -genkey -v -keystore my-release-key.jks -keyalg RSA -keysize 2048 -validity 10000 -alias my-alias


---签署未签名的APK,请运行JDK中还包含的jarsigner工具
jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore my-release-key.jks android-release-unsigned.apk my-alias


###android安装教程:
https://developer.android.com/studio/publish/app-signing.html#certificates-keystores