如何搭建Ionic环境以及打包成安卓apk

经过几天的钻研,终于把Ionic的一份demo成功打包成apk,心里还是有点小激动。写篇文章分享一下。
1.Ionic是什么?Ionic的生态系统基于Angular和Cordova,前者是web应用框架,后者是构建和打包原生应用的工具。Ionic是将HTML,CSS,JS,Angular,Cordova等技术进行整合,成为一个非常强大的移动端应用开发平台。

2.如何搭建环境?
    如果你现在要使用Ionic来架构应用,你应用要有以下几个步骤。
  1>安装node.js。可以访问[nodejs官网](http://nodejs.org)下载对应平台的安装包。如果你已经安装了node,请把它升级为最新版本。安装完成后,可以在OS X的终端后者windows的命令提示符中运行下面的代码来验证是否安装成功。
$ node -v
如果出现版本号说明安装成功。(忽略$符号,以下同理)
  2>安装Ionic和Cordova。使用一条命令就能安装Ionic和Cordova。执行之前请确保你已经安装了git: 
$ npm install -g cordova ionic
这条命令需要一点时间,请耐心等待。安装完成后,运行下面的命令来确认已经安装成功:
$ cordova -v 
$ ionic -v 
同样,这里出现版本号说明安装成功。注意:这里需要配置node的环境变量,如果你不清楚环境变量如何配置,百度一下啦!

3.是时候创建一个应用了。
Ionic提供了一个简单的start命令,几秒就可以创建一个新项目,在你想要创建项目的文件夹下运行如下代码就可以轻松创建:
$ ionic start demo
$ cd demo
程序可能会问你是否创建一个Ionic账户,暂时可以无视它。ok创建成功后,你可以在你的文件下面看到demo文件夹,进入文件夹,你可以看到一串目录。这是Ionic的默认模板。
重点介绍以下www目录,这里进去我们可以看到css,js,lib,image,index,template等文件或者文件夹,这里前端人士应该很熟悉啦,这里就是你这个应用所有的前端代码,在这里面编写你的代码吧!
Ionic有个很牛叉的地方,当你输入如下代码后,你可以在浏览器中预览应用,当你在编写代码的时候,只需要保存,页面就好自动刷新,而不需要你手动刷新页面,这个angular又更进一步啦!很神奇有木有...
$ ionic serve
执行的时候会提醒你选择地址,多数情况下选择localhost即可。程序会自动打开电脑中的默认浏览器并访问8100端口。你也可以直接在浏览器中输入localhost:8100。这里建议使用Chrome或者Safari。IOS的WebView使用的是Safari,Android使用的是Android浏览器(跟Chrome的相似度极高)。所以很明显看到用这两个浏览器模拟的好处,嘿嘿!

4.如何编译并发布应用?当你已经顺利完成你的应用代码部分的时候,你现在所需要的就是将你的应用打包并且发布了。
第一步:创建一个独一无二的图标。图标的设计无非有以下几点:简单,让人印象深刻,不受尺寸限制,颜色不要太复杂。创建好你的图标之后,请以png/psd/AI格式保存在resource/android/icon.png和resource/android/icon.png。然后使用如下命令,就可以生成不同尺寸的图标:
$ ionic resources -icon
第二步:创建启动页面图片。启动画面的源文件至少需要2208px×2208px,创建完成后,保存为
resource/android/splash.png和resource/android/splash.png。
然后使用如下命令就可以生成不同尺寸的启动画面图片:
$ ionic resources --splash
第三步:编译Android应用(这里以安卓应用为例)。
    1>配置应用的签名。使用如下命令来配置你的签名(keystore):
$ keytool -genkey -v -keystore know_your_brew.keystore -alias know_your_brew -keyalg RSA -keysize 2048 -validity 10000
注意:请使用你应用的名字来替代know_your_brew.这个命令可以生成一个新文件,在本示例中为know_your_brew.keystore。
在应用的整个生命周期中将重复使用同一个keystore,请保存好它。
    2>使用Cordova编译应用。使用build命令编译一个应用的发布版本:
$ cordova build --release android
这个命令会生成一个新的apk文件。此时还未签名。
    3>签名应用文件。现在我们要用之前创建的keystore文件来签名生成的未签名版本的应用。使用如下命令来签名:
$ jarsigner -verbose -sigalg SHALwithRSA -digestalg SHAL -keystore know_your_brew.keystore unsigned_name.apk know_your_brew
注意:这里请使用keystore生成文件名来替换know_your_brew示例名称,同时用真实的应用文件名替换掉unsigned_name.apk。
这个过程需要一点时间,期间会提示输入keystore的密码。命令会修改apk文件并对其进行签名。

5.好了,你的apk已经生成,将它发到你的手机上就可以下载安装了,如果要将它发布到应用商店,那就去应用商店注册开发者账户吧!这里就不再讲述了。

总结,成功的使用Ionic创建了一个移动应用,成就感满满的!作为一个前端工程师,以前都没想过前端也能做移动应用,现在实现起来才深深的体会到前端的曼妙。期待不久的将来,能制作一款Ionic app上线,让那群搞安卓的惊掉下巴!同时,这几天也遇到了很多问题,发现了很多自身需要提高的地方,在以后的工作中,还是不能掉以轻心,要持续学习前沿知识,扩充自己!提高自己!
  • 11
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要将H5应用程序打包APK文件,可以使用Ionic的命令行工具进行打包。以下是一些步骤: 1. 安装Ionic命令行工具和Cordova插件。可以使用以下命令安装: ``` npm install -g ionic cordova ``` 2. 在Ionic应用程序的根目录下运行以下命令: ``` ionic cordova platform add android ``` 这将为Android平台添加Cordova插件。 3. 运行以下命令来构建应用程序: ``` ionic cordova build android --prod --release ``` 这将构建生产版本的应用程序,并在`platforms/android/app/build/outputs/apk/release/`目录下生签名的APK文件。 4. 在开发人员控制台中注册并获取用于签名APK文件的密钥库和别名。 5. 在`platforms/android/app/build.gradle`文件中,添加以下签名配置: ``` android { ... signingConfigs { release { keyAlias 'alias_name' keyPassword 'password' storeFile file('path/to/keystore') storePassword 'password' } } buildTypes { release { ... signingConfig signingConfigs.release } } } ``` 将`alias_name`替换为密钥库中的别名名称,将`password`替换为密钥库和别名的密码,将`path/to/keystore`替换为密钥库的文件路径。 6. 运行以下命令来生已签名的APK文件: ``` ionic cordova build android --prod --release ``` 这将生已签名的APK文件在`platforms/android/app/build/outputs/apk/release/`目录下。 注意,使用Ionic打包H5应用程序可能会导致应用程序的性能和功能方面的限制,因为移动设备的功能和浏览器不同。因此,您可能需要在构建应用程序之前测试和优化它。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值