05月02, 2018
0 comments

ionic构建app简明指南

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)，下载地址：

https://nodejs.org/en/

建议直接装在默认路径, 方便其他程序直接调用(如 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的) sdk-setting sdk-setting1 sdk-setting2

下载下来解压,配置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提供的原生插件全部要求真机或者模拟器调试, 否则会报错.

  1. 首先连接手机, 安装手机驱动, 使用360手机助手或自带的管理软件确认能够读写手机应用数据, 手机和电脑需在统一网络下;
  2. 执行 ionic cordova run android -lcs -l: 手机热更新, 更改代码实时刷新应用(底子就是原生的壳,wenView链接本机服务器, 因此要同网络); -c: 打印项目log信息到终端; -s 打印开发服务器log到终端;
  3. 手机保持解锁状态. 当看到 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

  1. (首次操作, 之后不用)初次执行 build 会报错, 大意是没有安装证书什么的, 其实ios文件夹已经生成了;

  2. (首次操作, 之后不用)使用XCode打开platform/ios/xxx.xcodeproj, 点击根目录, 查看Signing 选择term(注册开发者账号又是另外一回事...) 安装选择生产证书, 描述性文件..;

  3. 再次执行 build 提示编译成功;

  4. 打开XCode cgb 查看签名信息, 下面是是否允许屏幕旋转(貌似没有卵用);

  5. 如需设置URL_SCHEME cgb2 最下方新增一条, cgb3 cgb4;

  6. 执行Product > clean 清理文件;

  7. 执行 Product > archive 构建App, !!构建之前确认选择Generic iOS Device, 最好就不要连手机了;

  8. 出现弹窗(窗口关闭可在 window > organizer重新打开) cgb5 依次点击 export > save for enterprise deployment > 选择企业发布证书 > export one app for all compatible devices

  9. 接下来如果是第一次生成应用需要 勾选左下角 include manifest for over-the-air installation, 创建一个plist文件供用户识别下载, 之后不需要勾选, 将生成的ipa文件覆盖服务器上原有的ipa即可;)

记录坑

  1. 生产版本请求接口如果是https协议的则域名必须具有有效证书, 否则请求无反应

本文链接：http://guchongxi.com/post/ionic.html

-- EOF --

作者 顾重 发表于 2018-05-02 23:00:00 ，最后修改于 2018-05-02 22:18:51

Comments

评论加载中...

注：如果长时间无法加载，请针对 disq.us | disquscdn.com | disqus.com 启用代理。