介绍

H5,是指HTML5,HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准,是构建以及呈现互联网内容的一种语言方式.被认为是互联网的核心技术之一。

H5+,是中国产业联盟制定的基于HTML5的网页标准,在H5之上新增了很多API,更多的是手机移动端开发的API,比如调用摄像头、指纹识别、设备位置等,查看 http://www.html5plus.org/doc/h5p.html

最后打包成安卓手机apk或者苹果ios系统安装包,在手机上安装,就跟原生安卓ios开发的应用一样。

image.png

开发

1、开发前准备

1、安装Nodejs
查看 https://www.yuque.com/yejielin/mypn47/wwz0am#Zy8Oa

2、下载安装HBuilderX
官网:https://www.dcloud.io/hbuilderx.html

3、安装Vue Cli4 脚手架
查看:https://www.yuque.com/yejielin/mypn47/xkk66n#f5g4Y

目前还不支持Vite

2、创建项目

1、打开HBuilderX,新建项目,选择5+App,默认模板
image.png
2、项目内,除了manifest.json文件,其他文件全删除

manifest.json文件是5+App项目的配置,非常重要,后面编译打包都要读取这个文件
image.png

3、通过Vue Cli4 脚手架,创建实际项目

3、正常开发

正常按Vue项目开发即可,比如使用一些手机端UI组件库,安装axios发送请求等等。

4、运行本地开发服务器

可以打开浏览器上运行,边写边改。

另外App是没有跨域问题,目前只有现代浏览器(谷歌、火狐)才有跨域问题。

调出现代浏览器的调试工具,可以选择手机模式,以及调整窗口尺寸,用于模拟适配手机端
image.png

打包

查看https://www.yuque.com/yejielin/mypn47/yg5hlf