Ionic 开发环境搭建

最新推荐文章于 2021-02-16 00:40:52 发布

weixin_34265814

最新推荐文章于 2021-02-16 00:40:52 发布

阅读量161

点赞数

文章标签：移动开发 javascript java ViewUI

原文链接：https://my.oschina.net/u/133911/blog/2049648

版权

2019独角兽企业重金招聘Python工程师标准>>>

Ionic 开发环境搭建

1.ionic 是啥

ionic 是一个开源的Hybird App 开发框架，通过它就可以直接使用html、css和javascript编写跨平台的移动app了，目前支持 android、ios、windows phone。
ionic 在底层使用了 Cordova 进行构建，通过Cordova js代码可以与原生代码(Android 的 java，iOS 的 Objective-C 等)互相通信，并且通过Cordova提供了很多插件来让js访问原生的设备功能，如摄像头、麦克风等。
ionic 官网

2.android 环境搭建

android 开发环境是在windows上搭建的
ionic需要使用node.js的包管理器npm进行安装，所以先安装下node.js。

安装node.js

在node.js官网上 https://nodejs.org/ 下载最新版本的node.js。
安装完后输入node -v 查看是否安装成功。

如果安装过旧版本的node.js，直接在官网上下载最新版的安装到相同目录即可。

安装cnpm

因为npm的源在国外，所以速度非常慢，经常会因为网络原因导致安装失败。没有代理的同学可以安装taobao提供的cnpm，速度快很多。

npm install -g cnpm –registry=https://registry.npm.taobao.org

安装成功后，把命令里的 npm 换成 cnpm 即可。

安装ionic

打开CMD控制台时记得右键选使用管理员模式。

npm install ionic -g

安装完之后输入 ionic -v 查看ionic 版本。

这里写图片描述

输入 ionic info 可以查看ionic信息。

这里写图片描述

安装Cordova

npm install -g cordova

输入 cordova -v 查看是否安装成功。

这里写图片描述

第一个APP

ionic自带了很多demo，先下载一个看看。

ionic start cutePuppyPics –v2

启动

漫长的等待之后终于安装成功了，切换到项目目录，然后启动服务，服务成功启动后ionic会自动在浏览器打开页面。

cd cutePuppyPics/
ionic serve

这里写图片描述

安装 JAVA和ANDROID SDK

现在还只能在浏览器中预览，要把demo编译成手机能安装的APP还需要再安装JAVA和ANDROID SDK。

安装JAVA

根据操作系统版本在 java官网下载sdk。
在系统->环境变量中新建 JAVA_HOME ，然后把 %JAVA_HOME% 添加到 path 中。
在命令行输入 java -v 查看是否安装成功。

安装 android studio

下载包含Android Sdk的版本，Android Studio。
在系统->环境变量中新建 ANDROID_HOME ，然后把 %ANDROID_HOME%，%ANDROID_HOME%\platform-tools，%ANDROID_HOME%\gradle\gradle-4.4，%ANDROID_HOME%\gradle\gradle-4.4\bin添加到 path 中。
在命令行中输入 adb 查看 Android Sdk 是否安装成功。
执行如下语句，将所有lencese都通过。android-studio\tools\bin\sdkmanager --licenses
mac环境下，需要执行chmod +x gradle,最好是Android Studio路径下面gradle。一定要进入到bin路径下面执行这句话，否则完全路径的话，因为中间有空格，需要转义操作。