基于DCloud H5+ 的Hybrid App开发——基础介绍

1.什么是HTML5plus？

HTML5plus简称H5+。大家可以看看DCloud官网的详细介绍：DCloud官网， H5+介绍。

以下说说我个人理解。
HTML5看起来虽然强大，但寄生在浏览器之中，受w3c标准规范（约束），在性能和功能上总无法达到原生APP的高度。

性能上，HTML5依靠浏览器（或者原生webview组件）实时解析运行。浏览器本身就是原生操作系统上的一个APP，多了这层依赖关系，也就注定了H5的性能起点要低一些。

功能上，毕竟是web标准下的产物，对于底层功能的调用无能为力。比如，无法调用摄像头，无法访问文件系统等。因为web应用无需手动安装，对用户来说，不能因为我有意或无意打开你的网站，你就读取了我的各种隐私文件…所以w3c对此有着绝对严格的限制。相比之下，原生APP要经过用户安装(安装即意味着信任，所以要谨慎安装来历不明的APP)，各种访问权限虽然会受用户控制，但反正它的功能就是要比Web应用强大。

当然HTML的其他优点太多，最大一点就是跨平台。无论什么操作系统，总有一个web浏览器，这种优点也就不言而喻了。想象一下写一套代码，无论安卓还是IOS，或者普通桌面浏览器，都能运行，这个世界会多么美好。

于是DCloud在H5标准的基础上，进行了扩展，成为H5+。扩展出来的“plus”，就是能够帮助我们在js中进行原生调用的一套新的API。在这基础上开发出来的APP，也是现在比较流行的Hybrid App（混合模式移动应用），他介于Web App（网页应用）和Native App（原生应用）这两者之间，兼具了Native App的所有优势，也兼具了Web App使用HTML5跨平台开发低成本的优势。

plus对Android和IOS的API进行了统一封装，当然有些细节还是会有不同（除了文档说明，有些还要自己测试体会才能知道，希望大家都能幸运避坑）。

plus API文档

H5+ APP Demo下载

2.关于MUI

MUI介绍
MUI开发文档

MUI是DCloud提供的一套前端框架，它的定位是：最接近原生体验的移动App的UI框架。主要是提供一些现成的UI组件，样式风格比较接近IOS；另一个就是对plus的API做了些封装，方便调用。

这里给几篇文档，帮助大家快速理解这种开发模式，遇到坑时能够快速找到原因。还有一些相关的注意事项。

H5+ App开发入门指南
MUI开发注意事项
提升HTML5的性能体验系列
MUI Demo下载

3.开发之前再做些概述

1.代码主要都是HTML+CSS+JS。

2.每一个窗口/页面即是一个webview（由操作系统提供的原生组件，相当于web浏览器，作为操作界面载体，帮我们解析渲染运行HTML、CSS、JS）。使用plus.webview接口可对其进行操作（打开、切换页面等）。

3.呈现出来的页面元素基本都是DOM元素，可以在chrome中用F12进行调试。

4.一些常见的通用UI交互（比如alert、toast、waiting）可以使用原生UI组件。可在JS中用plus.nativeUI进行调用，MUI也有相关的封装。

5.还可以使用plus.nativeObj中的View结合Bitmap绘制一些native页面元素，优点是性能上比DOM元素的表现要好，因为是直接由原生引擎渲染，而不是由webview渲染。不过这种native元素就无法像DOM元素一样用F12调试了。注意Android和IOS在使用这些接口时经常会有些细节上的差别，注意测试兼容，而且由于无法F12，在表现不一的情况下，不易调试。

6.还有其他丰富的API满足多种需求，比如文件IO（这在纯Web App的情况下根本无法实现），Zip等。还有强大的nativeJS接口，可以直接导入Android和IOS的原生API进行自由扩展，熟悉原生开发的同学可以体验一下。

4.一些开发细节

4.1 页面代码结构