HTML5 plus初步了解

储臻

2023-12-01

问题

开发HTML5页面要解决的主要问题之一，就是调用系统的能力，比如拍照／选图／保存图片到相册／录音／录制视频／定位等，而是否能够调用这些能力，在于其运行环境是否开放了这些权限，是否能够便捷地使用，取决于所提供的API。若是微信网页开发，微信提供了js-sdk, 以及weui样式库；那么若是原生APP提供的webview容器呢，或者直接在手机浏览器内运行呢，抑或直接打包成APP呢，是否也能够调用系统能力，并且用得优雅便捷？

HTML5 plus是什么

HTML5+是中国HTML5产业联盟的扩展规范，基于HTML5扩展了大量调用设备的能力，使得web语言可以想原生语言一样强大。

HTML5中国产业联盟：

HTML5中国产业联盟，是工信部下属单位，是为了更好的推进HTML5的商用、更好的为HTML5开发者服务而由产业链厂商共同组成的一个联盟。

附：

HTML5+运行环境

Runtime版 – for App（运行环境与项目代码打包为原生APP）

使用HTML5开发，然后使用HBuilder提供的云打包或本地打包将可以把5+ Runtime和开发者编写的HTML5页面 打包为原生App的安装包，包括Android的apk和iOS的ipa。发行到原生应用市场。

SDK版 – for Hybrid（原生APP中构建H5+运行环境）

在你的原生应用中内嵌5+ SDK，替代手机默认的webview，无论 使用Hybrid开发模式，还是 在原生App中构建web应用生态，都将能体验到更强大的内核动力。

附：HTML5+运行环境 5+Runtime官网介绍

配套工具

HBuilder

HTML5+项目的开发工具，既是代码编辑器，也是基于H5+的APP打包工具。

HBuilder是完整支持HTML5+及JSDoc+规范的优秀开发工具，在HBuilder中可以有效提示HTML5+语法、JSDoc+提示，可以开发、调试、发布基于HTML5+的App。

HBuilder项目调试：

下载HBuilder；
使用邮箱注册HBuilder账号；
新建项目：分移动App，web项目和Wap2App;
已测试运行HelloH5和HelloMui项目，手机功能需真机调试，真机调试需USB连接手机，开启调试模式，可边在手机操作边查看电脑控制台输出；
只有移动App类型的项目才能启用真机调试，web类型的项目不能
移动App类型的项目在真机运行，除了通过USB连接的方式，也可以通过同一局域网访问，但页面内原生的tab无法显示；
web类型项目同样可以通过同一局域网在真机／电脑浏览器访问，进行开发调试；但需调用手机系统能力的功能无效；

HBuilder 优点：

性能体验挺不错的；
支持多种系统能力调用；
配套的Mui框架挺好看的，组件挺齐全；

缺点：

官方文档写得阅读体验比较差；

附：HBuilder介绍及下载

MUI框架

一个与HTML5+配套的样式框架

mui框架是一个基于HTML5+规范的开源前端UI框架，它利用了HTML5+扩展的原生能力，解决常用UI控件的性能及跨平台问题。
使用mui框架，可以简单方便的开发出高性能的App，同时mui也可以自动适应没有HTML5+环境的普通浏览器，降低为普通web app，这使得开发者使用mui开发一次，可以同时发布为HTML5+的iOS、Android App，也可同时发布到手机浏览器里。

附：mui官方网站

安卓/IOS中集成HTML5+SDK

安卓集成：

HTML5+ SDK集成：

独立应用集成方式：即Widget集成方式，开发者在集成后可在需要时启动HTML5+ SDK，显示指定目录下的5+ WebAPP
单页面集成方式：即Webview集成方式，用户可在需要时显示一个支持5+扩展API的Webview页面。使用单页面方式集成5+ SDK，在页面内不能调用plus.webview的API创建新的页面，其他5+API的使用不受影响。

IOS集成：

独立应用集成方式: 使用独立应用方式，开发者需要将HTML5+SDK生成的首页面设置为当前View的subView。HTML5+ SDK将对应用进行管理。
Widget集成方式: 运行方式和独立运行方式类似，开发者在集成时可在需要的位置启动HTML5+ SDK，显示指定的HTML5+应用。
Webview集成方式: 用户可在任何页面将HTML5+ SDK的页面以Webview的形式独立显示，显示的Webview页面。

widget集成方式与webview集成方式的步骤区别：

安卓-widget集成方式：将5+SDK导入现有原生工程 -> 将WebApp导入现有原生工程 -> 5+SDK集成代码编写
安卓-webview集成方式：将5+SDK导入现有原生工程 -> 5+SDK集成代码编写

由此可知，widget集成方式需要将webApp代码导入到原生工程里，适合同一团队，不适合不同公司间合作；
而webview方式，看起来公司间合作可使用此方式

HTML5+与DCloud等的关系

HTML5中国产业联盟，是工信部下属单位，建于2013年
工信部信通院标准所是联盟的管理单位，W3C中国是联盟指导单位， DCloud是联盟秘书单位。
DCloud 是W3C会员、中国HTML5产业联盟发起单位，致力于推进HTML5发展，构建HTML5生态。
HBuilder / 5+Runtime / MUI / wap2app / 流应用是DCloud开发的产品
HTML5+规范是HTML5中国产业联盟的拓展规范，需5+Runtime支持运行

文档指引

HTML5中国产业联盟官网：http://www.html5plus.org/
mui官网：http://dev.dcloud.net.cn/mui/
DCloud官网：http://dcloud.io/index.html 通过首页可查看HBuilder/5+Runtime/mui/wap2app/流应用的介绍
通过官网导航“文档”可查看除mui外的文档目录(http://dcloud.io/doc.html)
除mui外其余文档内容均位于http://ask.dcloud.net.cn/docs/
DCloud社区： http://ask.dcloud.net.cn/explore/
DCloud产品案例：http://dcloud.io/case/#

小结

通过以上初步了解，下载HBuilder并创建HelloH5+ / HelloMUI模板项目、移动APP项目、web项目进行调试，对于开头提出的问题，初步回答如下：

使用web开发方式开发APP，可通过HBuilder建立【移动App项目】开发后，将H5+环境和项目代码一起打包为原生APP，打包方式分【离线打包】和【云打包】；
若是【web项目】，也可以打包为APP，但开发时其不能真机调试，其使用体验也比不上【移动App项目】打包的；
原生APP内嵌web应用：分别构建安卓和IOS的【H5+增强webview环境】，即【5+SDK集成后的环境】，在该环境中运行web应用或单个web页面，但使用widget集成方式，需要将web应用的代码放在原生APP的项目内，对于二者分属不同团队来说，这种方式不适应；若是直接通过链接在原生APP中访问web应用，看起来webview集成方式适用，其需求场景为：
- 原生APP中通过url访问一个Html5+应用；
- 原生APP代码和H5+项目代码不放在一起，分别由不同公司的团队维护；
- Html5应用中需使用camera/gallery/audio/device等HTML5+ API
手机浏览器访问：暂时没有看到可行方案