您现在的位置:首页 >> 前端 >> 内容

ionic框架的学习

时间:2017/7/7 13:41:21 点击:

  核心提示:ionic框架的学习###安装ionic*npm install -g cordova ionic#遇到问题,无法安装npm ERR! Windows_NT 10.0.14393npm ERR! ar...

ionic框架的学习

###安装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

### Git

- ng-cordova插件需要使用

### JDK

- 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_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 (配置路径)。

3.创建Cordova项目后,导航到项目目录。要添加平台,请键入cordova platform add 。

报错: 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

Tags:IO ON NI IC 
作者:网络 来源:qq_3226204