Ionic 是一个优秀的前端移动框架,本篇博客将介绍 Ionic 从环境搭建一直到 Android 正式发布以及 IOS 企业发布, 不包括TS, NG等编码相关内容.
编写时系统信息(项目生成后执行 ionic info
即可):
windows
global packages:
@ionic/cli-utils : 1.4.0
Cordova CLI : 7.0.1
Ionic CLI : 3.4.0
local packages:
@ionic/app-scripts : 1.3.7
@ionic/cli-plugin-cordova : 1.4.0
@ionic/cli-plugin-ionic-angular : 1.3.1
Cordova Platforms : android 6.2.3
Ionic Framework : ionic-angular 3.3.0
System:
Node : v6.9.2
OS : Windows 7
Xcode : not installed
ios-deploy : not installed
ios-sim : not installed
npm : 3.10.9
MAC(VM虚拟机)
cli packages:
@ionic/cli-plugin-cordova : 1.6.2
@ionic/cli-plugin-ionic-angular : 1.4.1
@ionic/cli-utils : 1.7.0
ionic (Ionic CLI) : 3.7.0
global packages:
Cordova CLI : 7.0.1
local packages:
@ionic/app-scripts : 2.1.3
Cordova Platforms : android 6.2.3 ios 4.4.0
Ionic Framework : ionic-angular 3.6.0
System:
Node : v6.11.0
OS : macOS Sierra
Xcode : Xcode 8.3.3 Build version 8E3004b
ios-deploy : 1.9.1
ios-sim : 6.0.0
npm : 3.10.10
环境搭建
安装 Node.js
Node.js
建议安装最新长期支持版本 (LTS, Long Term Support)
,下载地址:
建议直接装在默认路径, 方便其他程序直接调用(如 webStorm
, sublime
等)
安装完后请打开系统命令行工具, 输入以下命令看一下版本号:
Microsoft Windows [版本 6.1.7601]
版权所有 (c) 2009 Microsoft Corporation。保留所有权利。
E:\Git repository\GiantZero-x.github.io>node -v
v6.9.2
E:\Git repository\GiantZero-x.github.io>npm -v
3.10.9
还有一点需要注意的,因为国内的网络环境原因,在下载 npm
包的时候经常会遇到无法正常下载的情况。国内淘宝推出了 npm
镜像,这是一个完整的 npmjs.org 镜像,同步频率为15分钟一次,保证与官方服务同步。使用方法如下:
输入以下命令,切换到淘宝镜像源:
npm install -g cnpm --registry=http://registry.npm.taobao.org
!! 注意, 使用 cnpm
安装 ionic 项目会导致使用懒加载的页面出现错误,因此 ionic 项目强烈建议使用 npm
安装依赖
安装 Ionic
输入以下命令安装 Ionic 以及 Cordova :
npm i ionic cordova -g
说明:
i
: install 操作符 安装指定包或根据当前目录中 package.json 安装依赖
ionic, cordova
: 包名, 多个包使用空格隔开
-g
: global 配置项 表示将安装在全局
需要注意的是,如果之前安装过 Ionic 2 的 beta 版本,需要先卸载掉:
npm un ionic -g
说明:
un
: uninstall 操作符 卸载指定包
然后重新安装, 安装完成后输入以下命令看一下版本号:
E:\Git repository\GiantZero-x.github.io>ionic -version
3.4.0
E:\Git repository\GiantZero-x.github.io>cordova --version
7.0.1
安装 JDK
为了编译到 Android 平台,还需要安装 JDK.
注意请安装最新版本的 JDK,下载地址:
http://www.oracle.com/technetwork/java/javase/downloads/index.html
下载8u111或8u112以上版本。安装时建议安装到默认目录下。然后设置系统变量:
名称:JAVA_HOME
, 值(根据你的安装路径改): C:\Program Files\Java\jdk1.8.0_131
!!路径结尾不要加; 不要加; 不要加; 可能会引发某些错误
在Path中添加 %JAVA_HOME%\bin
, 注意与之前的值用;隔开
安装完后输入以下命令看一下版本:
E:\Git repository\GiantZero-x.github.io>java -version
java version "1.8.0_131"
Java(TM) SE Runtime Environment (build 1.8.0_131-b11)
Java HotSpot(TM) 64-Bit Server VM (build 25.131-b11, mixed mode)
E:\Git repository\GiantZero-x.github.io>javac -version
javac 1.8.0_131
javac 出不来的可能就是 JAVA_HOME
值结尾加了;
安装 SDK
Android SDK 的安装就麻烦一点,因为国内的网络环境……
这里还是分享一下: https://pan.baidu.com/s/1bp8d0Xh?qq-pf-to=pcqq.c2c
后来又发现了一些坑,好像是某些版本的api包没有安装, 那么下载下来自己对照看一下(用了androidStudio管理,自带的sdkManage也是ok的)
下载下来解压,配置API级别就可以了
还需要设置一下系统变量:
名称:ANDROID_HOME
,值(根据你的SDK路径改):F:\android-sdk-windows
路径结尾不要加; 不要加; 不要加; 可能会引发某些错误
安装 Gradle
Gradle是以Groovy语言为基础,面向Java应用为主。基于DSL(领域特定语言)语法的自动化构建工具(其实我也不知道在说什么..)。
ionic 构建 android 是会自动下载, 不过一般都没有好结果..因此在这里坑了好久.
这里将 gladle
使用的是 gradle-3.3-all
链接先不放了自行寻找吧.
!!注意保留.zip的文件, 后面可能会有用.
下载到本地后新增在环境变量 GRADLE_HOME
值为你的解压文件夹地址, 像是F:\gradle-3.3
编辑 PATH
变量, 新增路径 %GRADLE_HOME%\bin
虽然这里添加了路径但是有时候构建时还是会报错, 一般是无法解压glaxxx-x-x.zip to glaxxx-x-x. 这是因为ionic 自己去下来了个不完整的 gladle-3.3.all.zip 文件, 我们需要帮他一把:
在这个路径下: C:\Users\[个人文件夹]\.gradle\wrapper\dists\gradle-3.3-all
会有若干个文件夹, 命名通常是这样 55gk2rcmfc6p2dg9u9ohc3hw9
找到最新创建的那个, 将里面的 gladle-3.3.all.zip
文件删掉, 替换成我们自己下载的那个然后在构建应该就好了.
安装 VMWare
想要构建ios但是有没有苹果设备的同学不妨试试虚拟MAC系统进行调试, 网上教程很多我就不多说了.
虚拟机配置:
产品: VMware® Workstation 12 Pro
版本: 12.1.1 build-3770994
许可证: 已许可, 批量, 永不过期
内存: 预留内存 => 8192MB, 额外内存 => 调整所有..(选第一个)
优先级: 默认进程优先级 => 高, 正常
MAC主机配置:
内存: 6 GB
处理器: 2*1 仅勾选虚拟化intel VT....
硬盘(SATA): 40 GB
硬盘 2(SATA): 40 GB
网络适配器: NAT
USB控制器: 存在
显示器: 1 个监视器
选项/高级: 高, 默认, 无, √, ×, ×, √, ×
MAC系统配置
系统: OS X El Capitan
版本: 10.11.1
-----这个版本不行, 不能安装XCode8以上, 需在AppStore升级-----
系统: macOS Sierra
版本: 10.12.6
处理器: 2 * 2.59GHz
同样装上 nodeJs
后在全局安装 ionic cordova
, 需要 sudo
提权
sudo npm i ionic cordova -g
之后想办法将项目移入虚拟机中, 我是使用SVN管理代码, 这样就可以在 MAC 下打包 ios 了.
起步
创建项目
使用 ionic-cli 脚手架工具进行项目构建.
打开命令行,首先 cd 到项目目录,使用 start 命令来创建一个新App:
ionic start myNewProject tabs
start 命令会创建一个以其后参数为名称的项目 最后的参数表示创建一个 tabs
模版的项目
命令执行后 ionic 会去其官方仓库下载模版, 之后会自动执行 npm install
安装依赖, 若是依赖安装失败请自行爬梯;
若是本地具有 git 客户端 则会自动关联 git 账号并且提交更改, 等待推送至远端仓库; 如果没有设置 git 全局账号则会报错并退出, 可追加参数 --no-git
若不需要关联官方云仓库可追加 --no-link
在浏览器中运行
现在 cd
到项目目录,使用 ionic serve
命令在浏览器中运行项目,
接下来 CLI 会编译项目,输出类似下面的内容:
$ ionic serve
[INFO] Starting app-scripts server: --port 8100 --p 8100 --livereload-port 35729
--r 35729 --address 0.0.0.0 - Ctrl+C to cancel
[09:25:30] watch started ...
[09:25:30] build dev started ...
[09:25:30] clean started ...
[09:25:30] clean finished in 26 ms
[09:25:30] copy started ...
[09:25:30] transpile started ...
[09:25:35] transpile finished in 5.10 s
[09:25:35] preprocess started ...
[09:25:35] deeplinks started ...
[09:25:35] deeplinks finished in 112 ms
[09:25:35] preprocess finished in 128 ms
[09:25:35] webpack started ...
[09:25:36] copy finished in 5.87 s
[09:25:44] webpack finished in 8.70 s
[09:25:44] sass started ...
[09:25:45] sass finished in 1.25 s
[09:25:45] postprocess started ...
[09:25:45] postprocess finished in 4 ms
[09:25:45] lint started ...
[09:25:45] build dev finished in 15.27 s
[09:25:45] watch ready in 15.59 s
[09:25:45] dev server running: http://localhost:8100/
[INFO] Development server running
Local: http://localhost:8100
[09:25:48] lint finished in 2.56 s
接着默认浏览器会启动并打开一个地址为 http://localhost:8100
的窗口,端口号根据当前PC的实际情况可能会有变化,如果 8100 被占用了会使用 8101 等, -p 8120
可指定端口, 然后就可以看到运行效果了.
项目结构
现在来看一下一个 Ionic App 的结构。这是一个标准的项目结构。
!!表示不需要版本管理, 在项目中执行npm i
, ionic cordova prepare
, 会自动生成
项目主目录
myIonicApp
├─hooks
├─node_modules!! Node依赖目录
├─platforms!! 打包后的原生开发目录
├─plugins!! Ionic原生插件
├─resources 应用图标及启动页图片
├─src 源文件目录
│ ├─app angular主控制器
│ ├─assets 资源目录
│ ├─directives 自定指令目录
│ ├─pages 页面
│ ├─pipes 自定管道目录
│ ├─provider 自定服务目录
│ ├─theme 自定全局样式目录
│ ├─index.html 应用入口
│ ├─manifest.json 混合配置
│ └─service-worker.js 服务配置文件
├─www!! 实时编译目录
├─.editorconfig 编辑配置
├─config.xml 应用配置
├─ionic.config.json Ionic配置
├─package.json Node配置
├─README.md README 文件
├─tsconfig.json TypeScript配置
└─tslint.json TypeScript语法校验配置
编译打包
android
ionic 支持 ios 和 android 两个平台,默认的 ionic 项目并没有添加这两个平台,需要我们手动添加。
ionic platform add android
执行完毕后,在开发目录下的platform目录会多一个android的目录。
真机调试
cordova提供的原生插件全部要求真机或者模拟器调试, 否则会报错.
- 首先连接手机, 安装手机驱动, 使用360手机助手或自带的管理软件确认能够读写手机应用数据, 手机和电脑需在统一网络下;
- 执行
ionic cordova run android -lcs
-l: 手机热更新, 更改代码实时刷新应用(底子就是原生的壳,wenView链接本机服务器, 因此要同网络); -c: 打印项目log信息到终端; -s 打印开发服务器log到终端; - 手机保持解锁状态. 当看到 LAUNCH SUCCESS代表手机已经装好应用正在启动了.
在线打包
如果没有本地 JDK
, SDK
, Gladle
环境没有配置也没有关系, 可以使用 ionic 在线服务 进行打包(必须搭好梯子, 否则无法上传!).
首先注册 ionic 的账号并且新建一个项目, 之后回到本地, 先在本地登录账号:
ionic login
之后进行项目关联, 上下键选择要关联的项目:
ionic link
登录和关联操作只要执行一次就行, 以后想要打包直接执行:
ionic upload
成功上传代码至远端仓库后执行:
ionic package build android --prod
说明:
--prod
: 表示使用生产配置并用通用签名进行打包
通知远端仓库进行打包操作, 现在就可以进入 个人主页, 进入项目, 选择 Package 就可以看到有一条记录
一般命令执行完成后15秒左右就可以打包完成, 状态为 SUCCESS
点击最后的 DOWNLOAD
即可下载 apk
到本地, 传到手机上安装就可以看到效果了~
前一段时间应该是打包工具升级导致在线打包总是提示 Failed 提示:
ANDROID_HOME=/opt/android-sdk
JAVA_HOME=/usr/lib/jvm/java-8-oracle
Error: Could not find gradle wrapper within Android SDK. Might need to update your Android SDK.
Looked here: /opt/android-sdk/tools/templates/gradle/wrapper
这是因为没有指定 Android 版本, 打开项目中 config.xml
文件, 在 <widget>
标签内部最后追加 <engine name="android" spec="^6.2.3" />
重新上传打包即可.
或者执行 cordova platform update android@6.2.3 --save
本地打包
不论是本地还是在线打包, 如果没有配置签名则一律为 debug 版本的安装包, 下面参照 官方文档 说一下APK的签名文件的生成
生成签名使用JDK自带的keytool命令行工具
keytool -genkey -v -keystore MY-RELEASE-KEY.keystore -alias MY_ALIAS_NAME -keyalg RSA -keysize 2048 -validity 10000
_MY-RELEASE-KEY.keystore 是最终生成的文件名,MY_ALIAS_NAME是后面上传填表单时需要用到的alias,10000代表签名有效期是10000天._
运行之后需要填写必要的信息和口令.
之后会生成一个xxx.keystore的签名文件
在platforms\android目录新建名为release-signing.properties的文件,文件内容如下
// 文件路径, 可使用相对路径
storeFile=E:/XXXX.keystore
// 签名别名
keyAlias=XXX
// 库口令
Password=123456
// 签名口令
Password=123456
在windows下storeFile文件路径应使用Unix下的目录分隔符/。
使用 ionic cordova build --release android
编译即可,在 \platforms\android\build\outputs\apk
出现 android-release.apk
文件即是已签名的安装包。
ios
以下操作最好在mac环境下执行
ionic platform add ios
ionic cordova build ios
(首次操作, 之后不用)初次执行
build
会报错, 大意是没有安装证书什么的, 其实ios文件夹已经生成了;(首次操作, 之后不用)使用XCode打开platform/ios/xxx.xcodeproj, 点击根目录, 查看Signing 选择term(注册开发者账号又是另外一回事...) 安装选择生产证书, 描述性文件..;
再次执行
build
提示编译成功;打开XCode
查看签名信息, 下面是是否允许屏幕旋转(貌似没有卵用);
如需设置URL_SCHEME
最下方新增一条,
;
执行
Product > clean
清理文件;执行
Product > archive
构建App, !!构建之前确认选择Generic iOS Device, 最好就不要连手机了;出现弹窗(窗口关闭可在 window > organizer重新打开)
依次点击
export > save for enterprise deployment > 选择企业发布证书 > export one app for all compatible devices
接下来如果是第一次生成应用需要 勾选左下角 include manifest for over-the-air installation, 创建一个plist文件供用户识别下载, 之后不需要勾选, 将生成的ipa文件覆盖服务器上原有的ipa即可;)
记录坑
- 生产版本请求接口如果是https协议的则域名必须具有有效证书, 否则请求无反应
Comments
注:如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理。