ionic环境搭建

Kaede 发布于2019-08-05 15:44 / 3005人阅读

摘要：下载完配置环境变量打开安卓的安卓目录如图，我画圈的两个目录，需要加入到里面安装官网下载官方只需注册即可免费使用，使用下面链接注册即可。检查是否安装成功，正确显示出版本号则说明安装成功。

1. 环境依赖关系叙述

移动端混合开发的一个明显优势就是，一套代码两套部署，开发一套项目代码，可分别打成Android的包和ios的包。无论是混合开发还是原生开发，都是会需要原生的平台。我们先以Android平台为例，首先肯定需要AndroidSDK,Android环境缘起于java，所以必须先安装JDk,这是平台的环境.混合开发顾名思义需要前端和原生两块环境内容。混合开发平台，我们选择的是cordova,那么它依赖于node.js环境，并且需要node.js的npm模块来帮它下载插件。创建项目还需调试运行，那么就会需要Android模拟器。由于原生的Android模拟器启动过于慢，而且由于网络限制，google的cpu渲染加速器环境也难以下载。我们这里使用的是一个国外的好用且免费的第三方模拟器Genymotion。东西是免费的，但是需要注册和登陆。
一共需要搭建的环境也就这么几个JDK，AndroidSDK,node.js,cordova, Genymotion。

开发环境：

node.js

cordova6.0.0

ionic

测试运行环境：

JDK

AndroidSDK

Genymotion

2.安装说明 2.1 JDK

安装教程很多，记住安装时下载1.8版本
菜鸟教程：http://www.runoob.com/java/ja...

2.2 AndroidSDK

androidSDK由于国内限网，推荐一个国内的一个下载网站：http://www.androiddevtools.cn/
下载后根据提示安装，推荐下载的包就不要取消。系统一般会帮你默认勾选安卓最新版本Android9.0，但是Android9.0会出现模拟器启动不了的问题，坑很多，建议安装9.0以下的，我选的Android6.0，勾选下图的选项即可。

下载完配置Android环境变量
打开安卓的安卓目录如图，我画圈的两个目录，需要加入到path里面
D:Program Filesandroidplatform-tools; D:Program Filesandroidtools;

2.3Genymotion 安装

官网下载

官方只需注册即可免费使用，使用下面链接注册即可。

下载：https://www.genymotion.com/do...

下载后按照提示安装即可，打开软件时登录选择个人登录即可。

下载安卓镜像

打开后如图，点击add。

找自己需要的版本下载即可

2.4安装nodejs

官网下载nodejs免安装版

https://nodejs.org/en/download/

选择windows免安装版64位

解压到要安装的目录

添加环境变量

计算机(右键)-->属性(左键)-->高级系统设置(左键)-->环境变量(左键)

检查是否配置成功

node -v
npm -v

正常显示出版本号则说明安装成功

更换npm镜像源

首先来说为什么要更换镜像源，由于npm的镜像源是国外的，我们使用npm工具安装软件环境时，由于网速问题会导致很多难以解决的问题，而且下载巨慢，故将镜像源更换为淘宝的镜像源。

执行下面命令更换软件源

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

查看是否更换成功

cnpm -v

不报错且出来一段信息则说明更换成功。

参考学习

菜鸟教程：http://www.runoob.com/nodejs/...

w3school:https://www.w3cschool.cn/node...

npm基本使用：https://www.w3cschool.cn/node...

2.5安装cordova平台

官网

https://cordova.apache.org/

使用npm安装平台

cnpm install -g cordova@6.0.0

上面安装指定版本的cordova，我们这里安装cordova6.0.0,建议不要安装7版本和8版本，后面创建项目时会出现很多问题。

cordova -v

检查是否安装成功，正确显示出版本号则说明安装成功。

项目相关命令

#1.创建项目
cordova create MyApp
cd ./MyApp
#2.添加平台
cordova platform add browser #添加浏览器平台
cordova platform add android #安卓平台
cordova platform add ios #ios平台
#注意添加相关平台需要拥有相关平台的环境
#3.编译打包
cordova build android #打成android平台的包 .apk
cordova build ios #打成ios平台的包
#4.运行到androidSDK自带的模拟器
cordova emulate android
#5.运行到第三方模拟器或真机
cordova run android

参考学习

w3school:https://www.w3cschool.cn/cord...

2.6angularjs环境搭建

官网

https://www.angular.cn/guide/...

安装项目脚手架

npm install -g @angular/cli

这里只是为了给ionic创建项目提供环境，但是要使用ionic开发就必须学会angularjs。

2.7ionic安装配置

官网

https://ionicframework.com/do...

安装

-g是全局的意思，latest是最新版的意思。

cnpm install -g ionic@latest

项目相关命令

#1创建项目
ionic start myNewProject tabs #tabs是项目模板的一种，ionic平台自身会提供几种项目模板
#进入到项目
cd ./myNewProject
#2.添加平台
ionic cordova platform add android #平台同上一样可选
#3.打包
ionic cordova build android
#4.运行
ionic serve #运行在浏览器
ionic cordova run android #运行到android,ios

可能会出现的问题

创建项目时，会问你是否使用ionic4创建项目，选择n即可，也可创建尝试下，但运行性项目到android模拟器显示空白。

参考学习

菜鸟教程：http://www.runoob.com/ionic/i...

中文文档：http://www.ionic.wang/js_doc-...

参考学习

w3school:https://www.w3cschool.cn/cuhk...

3.可能会遇到的问题

node.js 使用免安装版能避免许多未知错误。

cordova安装6.0.0不要安装7.0或8.0的，后面出现的错误会很多。

cordova添加android平台，会多次失败，由于资源在国外会失败多次，插件下载完成就可以成功。

安卓模拟器需要cpu加速器，不然会一直黑屏，所以选用了第三方模拟器。

谷歌真机调试chrome://inspect。

android9.0不能用使用。

专线服务私有云环境搭建环境搭建、搭建开发环境全环境搭建

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/58728.html

Ionic+Cordova WebApp Android打包及环境搭建

摘要：写一下这两天打包的总结，希望帮人省下一些搜索的时间。环境配置下载地址配置环境和环境配置步骤基本一样，测试打开，输入，返回版本号即为成功。把图标等文件用该命令上传自己的项目到服务器，上传完成后会有一个项目编号。写一下这两天打包app的总结，希望帮人省下一些搜索的时间。一.准备工作：需要安装：Nodejs、AndroidSDK、Apache-ant、Jdk，Ionic、Cordova...

icyfire 2019-08-20 13:47 评论0 收藏0
ionic的开发环境搭建

摘要：创建一个指向安装根文件的环境变量，比如根据你自己的安装地址，设置完该路径后，就要将的目录添加到环境变量中。安装使用命令同样如果下载速度慢的话可以使用淘宝镜像所以可以使用把和一起安装。大致的开发步骤：安装node.js –安装Apache Cordova -安装Java JDK – 安装Apache Ant - 安装android SDK – 安装cordova和ionic – 安装...

Blackjun 2019-08-20 15:57 评论0 收藏0
ionic4+vue+cordova开发混合应用

摘要：摘要是可以让我们使用开发即使来移动应用的框架。如果你熟悉可以直接使用开发，但如果你熟悉使用或并且也想使用，可以使用版本，本文就以来说明这两者如何结合使用。除此之外还引入和来对把我们代码打包成安卓或应用。。摘要 ionic是可以让我们使用web开发即使来移动应用的框架。ionic4之前，ionic只能和angular搭配使用，ionic4后把ionic抽离成四个版本，@ionic/co...

Yujiaao 2019-08-23 17:00 评论0 收藏0
使用Docker创建Ionic2 PWA开发环境 1

摘要：它使用作为其开发语言。关于为了避免环境搭建污染我的，我选择将我的开发环境限制在一个容器中，同时避免了自制软件和不可逆的本地安装程序。我们将使用来构建一个新的镜像创建一个新的。下一篇文章将详细介绍如何用搭建真正用于生产环境的项目。我想创建一个简单的渐进式Web应用程序（PWA），在移动设备上运行，接收用户数据并将其保存到后台。我选择了Ionic 2（忽略了它创建本地应用程序的能力），...

cod7ce 2019-06-28 17:53 评论0 收藏0
使用Docker创建Ionic2 PWA开发环境 1

摘要：它使用作为其开发语言。关于为了避免环境搭建污染我的，我选择将我的开发环境限制在一个容器中，同时避免了自制软件和不可逆的本地安装程序。我们将使用来构建一个新的镜像创建一个新的。下一篇文章将详细介绍如何用搭建真正用于生产环境的项目。我想创建一个简单的渐进式Web应用程序（PWA），在移动设备上运行，接收用户数据并将其保存到后台。我选择了Ionic 2（忽略了它创建本地应用程序的能力），...

Anchorer 2019-08-22 14:04 评论0 收藏0