用h5制作手机app

随着移动端的发展，市场上出现了众多的手机app，这些app嵌套于不同的操作系统中，有iOS、Android等。这些操作系统有各自的编程语言和工具，但是，通过HTML5技术我们可以用web技术来制作跨平台手机app。本文将会介绍如何用HTML5来制作跨平台手机app。

在制作HTML5 app之前，需要先了解HTML5的一些基础知识。HTML5使用了很多新的标签和属性，比如语义化标签、SVG、video、audio等。还有一些新的API，如localStorage、canvas、WebSocket等。使用HTML5制作app需要一个文本编辑器和浏览器。

首先，你需要了解Cordova，Cordova是一个用于创建移动应用程序的开源框架。Cordova提供了一组API，允许基于HTML5和JavaScript编写插件，以访问设备硬件功能，如相机、文件等。

接下来，你需要安装Cordova，打开终端或命令提示符窗口，输入以下命令：

npm install -g cordova

安装完成后，你可以使用以下命令来创建一个空的Cordova项目：

cordova create myapp com.example.myapp MyApp

其中，myapp为项目名称，com.example.myapp为应用程序名称，MyApp为应用程序显示名称。

创建完项目后，进入项目文件夹，使用以下命令添加iOS平台：

cordova platform add ios

使用以下命令添加Android平台：

cordova platform add android

接下来，你需要在项目文件夹中创建一个index.html文件。该文件是app的入口文件，可以添加你的HTML5代码。在index.html文件中，你可以使用各种HTML5标签和属性来编写网站。同时，你也可以使用JavaScript来控制页面中的交互。

为了使用Cordova的API，你需要在index.html文件中引入cordova.js文件。该文件位于项目文件夹中/platforms//platform_www/目录下，其中platform_name为平台名称，例如iOS或Android。

Cordova提供了一组插件，允许访问设备功能，如相机、文件等。你可以使用以下命令安装插件：

cordova plugin add

其中plugin_name为插件名称，例如Camera或File。

安装完成后，你可以在JavaScript代码中使用插件API，如：

navigator.camera.getPicture(onSuccess, onFail, { quality: 50, destinationType: Camera.DestinationType.DATA_URL });

该代码将会调用相机，拍摄一张照片并返回其BASE64编码，保存到onSuccess方法中。

最后，你需要使用以下命令将项目打包：

cordova build

该命令将会生成一个apk或ipa文件，可以使用Xcode或Android Studio安装到真实设备中，或上传到应用商店中。

使用HTML5制作app可以节省开发成本，同时支持跨平台。但是，由于其性能受到限制，不适用于高性能的应用程序，如游戏等。除此之外，HTML5技术还存在一些兼容性问题。在使用HTML5制作app时，需要根据项目的情况进行选择。