h5 开发 app过程

H5开发App，简单来说就是在原生应用之外，采用基于HTML、CSS和JavaScript的Web技术开发移动应用程序，既可以通过网页访问，也可以使用WebView容器嵌入到手机App中，并且多个平台共用一份代码，开发起来比较快捷和高效。下面，将介绍H5开发App的具体过程。

一、搭建开发环境

1.安装Node.js环境

2.安装HBuilder，可到官网下载

3.在HBuilder中添加uni-app插件

4.下载安装微信开发者工具

二、创建项目

1.打开HBuilder，点击新建uni-app项目

2.选择要创建的模板

3.填写项目基本信息

三、项目结构

H5开发App的项目结构包括若干个文件夹和文件

1.common文件夹：存放公共样式和js

2.components文件夹：组件目录

3.pages文件夹：页面目录

4.static/static文件夹：放置静态资源，如图片等

5.unpackage文件夹：编译发布后的文件会输出到这个文件夹下

四、开发页面

1.在pages文件夹下新建页面

2.编写页面代码

3.在tabBar组件或者路由配置中添加该页面

五、运行调试

1.点击运行按钮，选择运行方式

2.可以在页面底部查看控制台输出信息

3.在微信开发者工具中还可以进行真机预览

六、打包上线

1.选择菜单栏中的发行

2.选择平台，填写基本信息并上传证书

3.等待打包完成最后的上传

H5开发App有许多不足，如无法实现一些高性能的功能，无法做到和原生应用一样流畅，但它也有很多优点，如具有跨平台，开发效率高的特点，在大多数情况下还是非常适用的。