前言

ionic V3是基于cordova和angular的混合开发平台，目前最新版V4

ionic v2/v3差别不大 v1没有基于angular v4可支持angular vue等

ionic v3官网文档地址 https://ionicframework.com/docs/v3/

安装环境

1. nodejs v10.16.3

安装下载地址https://nodejs.org/dist/选择LTS版本下载安装

校验打开CMD执行npm -version 和 node -version

2. ionic

安装 cmd执行 npm i -g [email protected]

校验 cmd执行 ionic -version

3.cordova

安装 cmd执行 npm i -g [email protected]

校验 cmd执行 cordova -version

4.nrm 切换npm仓库地址工具

安装 npm i -g nrm

使用 nrm ls 查看可切换仓库名

nrm use 仓库名使用指定仓库名仓库,比如taobao

添加2.245上的npm私服地址

添加 nrm add 2.245 http://192.168.2.245:8083/repository/npm-group

切换 nrm use 2.245

查看 nrm config get registry

5,node-sass

项目安装依赖时会安装node-sass，它的binding. node文件经常404或下载失败

所以配置系统环境变量

SASS_BINARY_PATH: D:\work\win32-x64-64_binding.node

指定binding. node文件（提供的node文件适用于windows64位nodejsv10.16.3）

提供的node文件下载地址ionic下的node文件

6，android环境

下载ionic目录中的gradle，sdk，jdk

6.1，jdk配置

jdk 解压jdk1.8.0_144.zip到自定义目录下

配置系统环境变量

变量名：JAVA_HOME

变量值：自定义目录\jdk1.8.0_91 // 要根据自己的实际路径配置

变量名：CLASSPATH

变量值：.;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar; //记得前面有个"."

变量名：Path

变量值：%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin;

6.2，SDK

解压android_sdk到自定目录

配置环境变量

在系统变量新建：ANDROID_HOME，对应变量值为：（sdk安装路径根目录）

path中添加%ANDROID_HOME%\tools 和 %ANDROID_HOME%\platform-tools

校验 cmd执行adb devices检测连接到电脑的手机(手机需要打开USB调试)

以管理员身份运行sdk目录中的sdk manager

取消所有勾选，重新勾选tools所有，build-tools28.0.3，安卓28中勾选platform28

点下边下载，弹框全部选同意，开始下载

6.3,gradle构建工具

解压gradle到指定目录，配置系统环境变量

GRADLE_HOME=解压的gradle根目录

path中添加%GRADLE_HOME%\bin

检测gradle -version

6.4，adb 简单使用

adb tcpip 5555 连接数据线状态下开启无线模式(手机重启需要开启)

adb connect 手机ip:5555 连接指定ip的无线模式下的手机终端

adb shell 进入手机shell，如果提示close 则使用adb reconnect重连

多个设备的情况下，所有命令必须加 -s 设备名

adb install **.apk 安装app

7，ios环境

必须MAC系统，安装Xcode 7 or higher

8.开发常用命令

官方地址 https://ionicframework.com/docs/v3/cli/commands.html

8.1.创建项目 ionic start 项目名

参数 --type ionic1 创建ionic v1项目

--type ionic-angular 创建ionic v3项目

示例选项有: tabs 一个具有简单选项卡式界面的启动项目

blank 一个空白项目

sidemenu 一个菜单侧边项目

super 一个完整示例

conference 演示realworld应用程序的项目

tutorial 包含引导的示例

aws aws手机启动示例

其他选项根据命令行提示来

? Install the free Ionic Appflow SDK and connect your app? (Y/n) 选择n

创建好进入项目根目录执行 ionic serve 浏览器浏览

8.2.运行已有/新项目到设备

1.使用nrm use taobao切换npm仓库

2.项目目录执行npm i 安装依赖，可重复执行保证依赖成功安装

3.添加平台ionic cordova platform add [email protected]

已存在平台，删除平台后重新添加

8.3.浏览器运行

ionic serve 可在浏览器8100端口运行浏览项目，涉及插件调用没处理的需要在真实设备运行

8.4.平台管理

ionic cordova platform remove android/ios 删除

ionic cordova platform add [email protected]/[email protected] 添加，版本不同生成的平台目录结构可能不同

查看项目根目录是否有platforms目录，下边有android或ios等目录

添加[email protected]后将xml/network_security_config.xml覆盖掉项目resource/android/xml中的

8.5.运行到android

adb devices 检测设备有没有连接上

ionic cordova run android -lc

-lc 热部署项目到已连接设备(多个设备需要指定-s 设备名)

8.6.运行到ios

ionic corodva prepare ios 准备代码到platforms下的指定平台目录

在mac使用Xcode打开platforms/ios项目

具体查看https://ionicframework.com/docs/v3/intro/deploying/

9.打包

1.可以基于nodejs编写js脚本配合package.json的scripts中配置命令执行脚本和命令

nodejs 脚本可复制/删除/替换/操作源码文件配置文件等

比如：大部分项目中配置

"scripts": {

"builddebug": "node build/build.js build debug && ionic cordova build android --prod && node build/build.js exapk debug",

"buildrelease": "node build/build.js build release && ionic cordova build android --prod --release && node build/build.js exapk release",

分解:

node build/build.js build debug 执行build/build.js命令传参build 和debug

ionic cordova build android --prod 打包安装的命令

node build/build.js exapk debug 执行build/build.js命令传参exapk和debug

使用直接 npm run buildrelease 就会打包正式版并且重命名打包出来的apk文件，并复制到build目录，具体可看build.js脚本，自己写的,可参考

2.android

ionic cordova build android --prod --release 不借助js脚本执行成功后需要在平台对应目录下去找打包出来的apk

android打包签名

sdk环境包含的keytool生成签名文件

参考: https://www.jianshu.com/p/8b759b0a5c30 或搜索android keytool使用

常用

//生成

keytool -genkey -keyalg RSA -keystore netbox.jks

//查看密钥库所有别名

keytool -list -keystore netbox.jks

//删除别名

//keytool -delete -alias 别名 -keystore netbox.jks

//增加别名

keytool -genkeypair -alias 别名 -keystore netbox.jks

项目根目录创建 build.json

参考cordova签名配置 https://cordova.apache.org/docs/en/latest/guide/platforms/android/index.html#signing-an-app

3.ios

使用xcode打开platforms/ios项目后，完全按照ios项目使用Xcode打包发布即可

5.插件使用

管理

ionic cordova plugin add 插件id@版本

ionic cordova plugin remove 插件id

插件有依赖关系，删除的时候有可能提示先删除依赖者

10.问题记录

1. no such file or directory, scandir '*\node_modules\node-sass\vendor'

+ 因为没有成功安装bind文件

+ 解决

+ SET SASS_BINARY_PATH=%cd%/build/win32-x64-64_binding.node && npm rebuild node-sass

+ 查看node-modeles下的node-sass有了vendor/win32-x64-64目录

+ 将build中的win32-x64-64_binding.node复制到vendor/win32-x64-64目录，改名binding.node

2. -lc 运行到手机的app加载报错ERR_ClEARTEXT_NOT_PERMITTED

+ 因为手机系统9.0的安全限制

+ 解决

+ 将xml/network_security_config.xml覆盖掉项目resource/android/xml中的

3.组件加载不进来，执行命令ionic cordova prepare android

4.安装依赖出现cordova-res装不上去的，可以先在package.json dev依赖中删掉cordova-res

5.ionic cordova resource 503错误不能用了

因为新版本@ionic/cli使用了cordova-res

解决

不用升级ionic cli 直接在项目安装cordova-res

执行npm i cordova-res出现错误，按照下边的步骤解决

cordova-res依赖sharp sharp使用到libvips libvips需要使用node-gyp现场编译源码安装

一，libvips从github下载问题

info sharp Downloading https://github.com/lovell/sharp-libvips/releases/download/v8.9.1/libvips-8.9.1-win32-x64.tar.gz

ERR! sharp getaddrinfo ENOENT github-production-release-asset-2e65be.s3.amazonaws.com github-production-release-asset-2e65be.s3.amazonaws.com:443

解决:

1.使用 npm config get chache查看node缓存目录

默认在C:\Users\用户名\AppData\Roaming\npm-cache\_libvips

2.手动下载https://github.com/lovell/sharp-libvips/releases/download/v8.9.1/libvips-8.9.1-win32-x64.tar.gz

3.放在node缓存目录下的_libvips中

二，node-gyp.js问题

1.npm install -g node-gyp

2.npm config set node_gyp "node 您的npm安装目录\node_modules\node-gyp\bin\node-gyp.js"

三，node-gyp在win10上使用提示找不到visual studio什么的

执行npm i -g windows-build-tools

会重启多次

再次安装

执行cordova-res -help

IONIC3开发环境整理

前言