现在移动技术越来越成熟,移动应用越来越普及,但是开发一款原生App需要花费大量的时间和经费。而H5技术(HTML、CSS、JavaScript)能简化开发难度和成本,可嵌入移动App中使用,成为许多App不可或缺的一部分。
下面介绍如何自己制作一个H5 App。
首先,我们需要准备的工具:文本编辑器、web服务器、Ionic、Cordova 和Git
一、项目结构
创建项目目录,下面的路径是为Ionic的结构:
```
myApp/
├── hooks/
├── platforms/
├── plugins/
├── www/
└── config.xml
```
二、初始化一个Ionic项目
在上面的目录下初始化Ionic项目,需要先安装Ionic的命令行工具,安装Node.js之后使用Node.js的包管理工具npm安装。
```
npm install -g ionic
```
创建项目
```
ionic start myApp kusohh
```
在初始的ionic项目中,www目录包含我们的应用程序代码,这里我们可以编写HTML、CSS、JavaScript文件。
ionic serve命令可以启动一个本地服务器,web应用运行在本地浏览器,可以方便的开发H5应用和移动应用的调试。
```
ionic serve
```
三、添加Cordova支持
Ionic提供了便捷的Cordova集成,Cordova是一个用于开发移动App的框架,允许你使用web技术开发,通过WebView在智能手机和平板电脑上运行你的应用程序。
使用Ionic的Cordova命令行工具可以方便地将Cordova设置成Ionic项目的一部分。先安装Cordova,然后在Ionic项目的根目录下使用以下命令:
```
ionic cordova platform add android // 添加Android平台
ionic cordova platform add ios // 添加iOS平台
```
通过以上命令可以在我们的项目中添加Android或iOS平台的支持。但是如果没有部署Android和iOS SDK,这些命令将失败。
```
npm install -g cordova
```
四、打包和发布应用程序
使用以下命令打出可安装的apk文件和ipa文件:
```
ionic cordova build --release android // android平台打包
ionic cordova build --release ios // ios平台打包
```
在这里,我们将签名应用程序,让应用程序能够在设备上安装。
签名应用程序用户名和密码
```
keytool -genkey -v -keystore myApp.keystore -alias myApp -keyalg RSA -keysize 2048 -validity 10000
```
使用jarsigner工具签名apk文件
```
jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore myApp.keystore platforms\android\build\outputs\apk\android-release-unsigned.apk myApp
```
对签名后的Apk文件进行优化:
```
cordova build --release android -- --keystore=myApp.keystore --storePassword=password --alias=myApp --password=password
```
在以上步骤完成之后,多平台的应用已经可以发布和分享了。
以上就是建立一个H5 App的简单流程,其实,H5技术的应用范围并不止于此,我们可以学习更多的技术,使用到各种场合,H5技术在移动App开发异军突起。