ionic-基于web的跨平台移动开发

2018-12-30 本文已影响0人阿文灬

ionic

ionic是一个专注于用WEB开发技术，基于HTML5创建类似于手机平台原生应用的一个开发框架。绑定了AngularJS和Sass。这个框架的目的是从web的角度开发手机应用，基于PhoneGap的编译平台，可以实现编译成各个平台的应用程序。

ionic应用程序主要通过Ionic命令行实用程序（“CLI”）创建和开发，并使用Cordova构建/部署为本机应用程序。

个人评价

优点:

入门简单。基于WEB开发技术，只需要会h5、js、css
市面上有大量支持WEB版本的框架或WEB独有的框架。例如高德地图、echarts、微信支付等。
开发成本低速度快。支持跨平台，Android与iOS都能用，如果app在这两个系统都需要，则可以节省一半人力。即使除去这个，我也觉得在开发效率上ionic也快很多，特别是调试时间上。原生开发要安装特有开发工具、安装模拟器，他们启动时间长，对电脑性能要求高。而ionic开发不需要，运行时可在浏览器上预览效果，而且写完代码保存后几乎实时更新页面，这个是不是大大提高了效率。这个过程跟Vue开发几乎一样，但是速度比Vue要快。

缺点:

部分手机功能无法实现：例如苹果的远程推送、调取数字键盘、ARKit、coreML等。
界面稳定性没原生好，弹出键盘时，页面会有轻微卡顿。

展望:
Flutter，这个只是看过一些文章，没有开发体验过。

安装

安装node，然后使用Node和NPM设置，安装Ionic和Cordova CLI。

$ npm install -g ionic cordova

第一个Ionic应用程序

使用init命令初始化。如果要在./docs子目录中编写文档，则可使用下面命令：

// 创建第一个app。模式除了 blank 还有其他种类（tabs等）
$ ionic start helloWorld blank

// 运行app，可在浏览器中预览
$ cd helloWorld
$ ionic serve

001.png

iOS部署

要求。
- Xcode 7或更高版本 // iOS原生的应用的唯一开发工具
- iOS 9
- 免费的Apple ID或付费的Apple Developer帐户 // Xcode打包必须要有账号登录
添加platform
!> 执行添加platform时，可能需要进行授权。sudo chown -v -R -L mac-username .

$ sudo chown -v -R -L mac-username . // 视权限情况执行
$ sudo ionic cordova platform add ios

iOS 打包
建议百度一下。

Android部署

要求。
- Java JDK
- Android SDK
安装Java JDK
Java JDK下载、安装、配置环境变量详解
安装Android SDK
百度吧
添加 android platform

ionic cordova platform add android

打包

ionic cordova build android                     debug包
ionic cordova build android --release           release包，需要签名验证
ionic cordova build android --release --prod    release包，需要签名验证,对资源进行深度压缩

002.png

生成签名密钥

使用工具, 签名：
-genkey表示构建签名文件
-v 显示在dos窗口中
-alias表示签名包的别名
-validity 签名有效期(天)
姓名:填上，用你名字拼音全拼
城市:随便填，不填也行
国家: 随便填，不填也行
密码口令：敲的时候不动，是因为保护隐私，别当做你电脑死机！

$ keytool -genkey -v -keystore demo.keystore -alias demo.keystore -keyalg RSA -validity 20000

自动给 apk 文件签名

新建 release-signing.properties

storeFile=demo.keystore
keyAlias=demo.keystore
storePassword=123456
keyPassword=123456

然后把 release-signing.properties和demo.keystore文件拷贝到platform/android目录下执行以下命令，即可打包成签名 apk

ionic cordova build android --release  或
ionic cordova build android --release --prod