素材巴巴 > 程序开发 >

Android 关于ionic环境的开发环境搭建

程序开发 2023-09-02 19:11:41

1 开发环境搭建

1.1 任务描述

1.1.1 任务介绍

搭建ionic开发环境,创建ionic项目,能够使用浏览器启动项目,在Android模拟器或者真机中运行应用程序。

1.1.2 任务要求

1.2 工作指导说明

1.2.1 开发环境搭建

所需软件下载链接Node.js官网下载jdk官网下载android sdk tool百度云下载webstorm2017.2.4官网下载webstorm汉化补丁下载webstorm破解补丁下载git官网下载.net framework百度云下载github客户端官网下载

jdk版本最好是1.8.0版本。nodejs我使用的是8.12.0。git、github、.net framework可以先不装。另外网络要求挺高的,如果网线、无线不行的话(工程创建部分一直卡主),可以换手机热点(建议移动、电信的)试试。

建议用管理员运行命令提示符(cmd)

1.2.1.1 Android开发环境搭建

  1. jdk安装
  2. android sdk安装
  3. 启动模拟器

1.2.1.2 Ionic开发环境搭建s

  1. node.js安装(会自动配置系统路径)

要了解Node.js更多的知识,请参考官网
这个博客写的很好,可以玩一下。
https://www.cnblogs.com/yominhi/p/7039795.html

  1. cnpm安装(安装包管理器):
    进入命令提示符(cmd),执行下面的命令:
npm install -g cnpm --registry=https://registry.npm.taobao.org
 

安装完成后,添加系统环境变量。

//在系统环境变量path中添加,I:Program Filesnodejsnode_global
 //nodejs是我安装的目录。node_global是npm install ...执行创建的。
 

检查有没有安装成功可以执行命令

cnpm -v
 

在这里插入图片描述
3. cordova安装

cnpm install -g cordova
 

检查有没有安装成功可以执行命令:

cordova -v
 

要了解cordova更多的知识,请参考

  1. ionic安装(ionic是一个用来开发混合手机应用的,开源的,免费的代码库)
cnpm install -g ionic@latest
 

检查有没有安装成功可以执行命令:

ionic -v
 
  1. git安装
  2. github客户端安装
  3. webstorem安装和破解
    1. webstorm的破解请参考链接
    2. 将WebStorm 2017.2.4lib目录下的resources_en.jar文件复制出来,并更名为resources_cn.jar。
    3. 双击打开resources_cn.jar(注意是打开而不是解压出来),将下载的汉化包zh_CN目录下的所有文件拖到刚才打开的resources_cn.jar文件内的messages目录中,并保存。
    4. 将resources_cn.jar文件复制回.Webstormlib目录。或是直接讲汉化包里面的resources_cn.jar复制到.Webstormlib目录即可.
    5. 汉化完毕,重新打开Webstorm就可以显示中文。

创建、运行ionic工程

学习ionic cli

1.2.1.3 创建工程

ionic start shengyizhuanjia sidemenu --type=angular
 //使用ionic start 项目名称
 //会出现选项,选择blank类型会快点
 

创建工程的过程中需要下载依赖的包,由于npm的服务器在国外,因此经常安装失败。可以使用下面两个命令来创建工程

ionic start shengyizhuanjia sidemenu --type=angular --no-deps
 

工程创建经常失败,原因有可能是sass没安装,安装就好。或者网络问题。
这个是网络不好的报错。
网络问题

如果是什么sass相关的问题,可以试着以下命令进行解决。

npm i node-sass
 或者
 npm i node-sass -D
 

别的问题表示无奈。。。
命令执行成功后,进入项目的根目录,执行命令

cnpm install
 

分成两个步骤创建的工程用webstorm打开,会出现智能感知失效。

如果人品不够好一直失败,可以使用我创建的工程百度云下载

要了解ionic start更多的知识,请参考官网

1.2.1.4 工程的结构

要了解ionic 工程结构更多的知识,请参考官网

1.2.1.5 在浏览器运行

在命令提示符中(cmd)进入项目的根目录,执行下面的命令

ionic serve
 

如果这一步有问题,就往前面找吧,别往下了。
命令执行成功后,会自动打开默认的浏览器(建议使用谷歌浏览器),默认网址:http://localhost:8100/
按F12打开开发者工具,模拟手机设备。

要了解ionic serve更多的知识,请参考官网

1.2.1.6 在模拟器或手机运行

  1. 添加android平台
ionic cordova platform add android
 

要了解ionic cordova platform更多的知识,请参考官网

2.安装gradle

自己去官网下载,http://services.gradle.org/distributions/。如果没安的话,在下一步就会报相应的错误。
 
  1. 编译
ionic cordova build android
 

最终结果会生成一个debug.apk文件,这就是编译的结果,可以直接发到手机或者用模拟器进行安装,用模拟器的话比较方便,直接将apk拖进去即可安装。如果使用手机的话,就用继续在项目根目录下输入,ionic cordova run 命令。

要了解ionic cordova build更多的知识,请参考官网

  1. 运行
ionic cordova emulate android
 

或者

ionic cordova run
 

最好不要用SDK Tools工具创建模拟机,不然ionic cordova run命令直接就调用。SDK Tools工具创建的模拟机太慢太卡,看不懂。逍遥模拟器可以用直接将apk拖进去即可安装,还不错。使用手机的时候,打开开发者模式,然后在命令窗口输入adb devices,如果有显示如下,就是有设备了。

在这里插入图片描述
如果是unknown command device这样的报错,检查一下命令有没有错之外就是SDK的环境有问题了。
另外再列举出一个常见的问题,地址在另外一个博客。https://blog.csdn.net/pan_xi_yi/article/details/83188481

要了解ionic cordova emulate 更多的知识,请参考官网

要了解ionic cordova run 更多的知识,请参考官网

1.2.2 制作App的图标和启动屏幕

在项目的目录找到resources文件夹。在文件夹中都放入icon.png(应用图标,最小192x192px,不带圆角),splash.png(启动屏幕,最小2208x2208px,中间区域1200x1200px)(可以是png、psd、ai)
在cmd中进入项目所在文件夹执行:

ionic cordova resources  
 

执行该命令后,会自动在resources文件夹下创建已添加的平台名称的文件夹,如:android,其中会自动将图片进行缩放、裁剪,生成不同分辨率的图片,并在config.xml中添加相应内容。
也可分开执行:

ionic cordova resources --icon       
 ionic cordova resources --splash
 

注意:执行以上命令时需连接到互联网

要了解更多ionic cordova resources的知识,请参考官网

启动界面配置config.xml

#显示时间
 #禁止自动隐藏
 #禁止自动隐藏
 #禁用淡出效果
 #图像cover屏幕
 #隐藏加载灰圈
 #每次重新启动都显示
 

1.3 产品工作要求

1.4 产品检查要求

创建ionic项目,能够使用浏览器启动项目,也能够在Android手机或者Android模拟器中运行。


标签:

素材巴巴 Copyright © 2013-2021 http://www.sucaibaba.com/. Some Rights Reserved. 备案号:备案中。