今天我要分享的内容是快速开发5+APP，这个是我两年前入职公司时接手的任务，在此之前，我在那之前从来没有做过APP开发，对于APP几乎没有什么概念，web方面的能力除了HTML、CSS、JS之外，框架方面只是会用，完全没有填坑的能力... 但是工作需要，只能是边学边做了，当时市面上已经有挺多APP开发的框架了，当时公司为了追求快速出成品，所以选择了学习成本最低的5+APP，在DCloud(数字天堂)推出的IDE - Hbuilder(现在已经升级为HbuilderX)中可以直接生成5+APP的项目。 IDE下载： https://www.dcloud.io/ HTML5+规范： http://www.html5plus.org/doc/h5p.html 虽然现在DCloud公司因为某些原因，自己又推出了uni-app这样的产品，但是5+APP让我度过了一段比较难捱的日子，现在仍然放不下它，一直也在关注它的成长，这次，我也把它选作我要分享的主题。 接下来，我将一步步实现一个5+App，首先打开IDE，新建项目，直接新建5+App，如下图所示，创建项目时，我还顺便选择的有底部选项卡的模板。
创建好项目后，项目目录如下:
这个项目目录，我觉得是个前端就能看懂，唯一有可能不太清楚的只有manifest.json,这个文件是可以进行一些android的配置，在这里我们暂时略过。 到现在，就已经成功的创建好了一个5+APP项目了，接下来，我们需要一部手机或者是android模拟器，这里我选择用的是夜神模拟器。 打开夜神模拟器之后，第一次HbuilderX链接夜神模拟器，可以能需要配置，打开cmd，路径切换到夜神模拟器安装目录的bin目录，执行命令：
nox_adb connect 127.0.0.1:62001
之后，点开菜单栏【运行】 - 【运行到手机或模拟器】 – 【运行[设备：XXX]–[项目名]】，点击即可。
这样，一个APP项目就已经跑起来了，手机桌面的默认图标是Hbuilder的官方logo，现在我们看着打开的项目，来对创建好的项目目录进行一个简单的分析，图上打开的是index.html，也是APP的入口文件(入口文件可以在manifast.json中配置，默认是index.html)。
红框选中的三个html文件，分别对应底部tab标签的消息页、通讯录、新窗口，底部tab中间的按钮点击后是一个弹框，所以没有页面。 再来看看index内部的代码
非常的熟悉，就是小白熟悉的味道，纯粹的网站开发模式，单独的一个页面中没有任何添加剂，就只是HTML+CSS+JS的代码，所以说是小白都特别容易上手的。 看到上面分享的源码，可以了解项目是使用的mui框架，而mui项目是封装了原生的HTML5+的API的一个框架，基础页面开发我就不赘述了，浪费大家时间。 下面我介绍介绍HTML5+。
如图所示，网址上面已经分析了，这些都是一些非常好用的API，用这些API可以非常容易的操作移动端设备，包括android和IOS等设备都可以很好的操控，这里我针对性的介绍其中的一个模块，webview，简单理解，一个页面就是一个webview，使用这个可以很好的管理APP中的页面。
写一个最简单的代码片段来了解一下他们的用法，首先引入mui框架
接下来，我们获取一下当前页面，如下，self，就是获取到的当前页面。
如下这段代码，就是打开一个新页面的代码：
id：之后可以通过id来获取到这个页面，因为这个和浏览器跳转不太一样，很多时候需要多页面共存和多页面数据更新等，这里为了保证id的唯一性，我选择了使用文件名做为id。 url：相对路径，指向我们自己将要打开的页面 createNew：false，如果webview存在，将不会创建新的webview，而是打开之前创建好的webview show：页面出现的动画 extras：给新页面传递的数据，这个在新页面中可以获取到，获取数据，就是上面提到过的代码：plus.webview.currentWebview().title 这样，页面和页面跳转就解决了，从项目整体上来说，基本上是可以推进下去了。 接下来，我们来看看刚刚没有细说的文件，manifast.json。
虽然是一个json文件，但是我们可以看到，IDE非常贴心的把这个文件还做了一个可视化的界面，可以直接配置一些基本信息，APP的名称、图标、启动图、版本、SDK等等都可以配置。 配置好信息后，还有一个重要的过程，打包APK。 打包有两种方式，云端打包和本地打包(本地打包可以忽略manifest.json，因为信息都是直接配置到android项目中的)。 这里，我就只是来说一下云端打包，打开菜单栏【发行】 – 【原生APP-云打包】
最后，点击打包，稍等大约3-5分钟，就能打包成功。
在控制台中会生成一个临时链接，点击链接下载就能得 APK 文件了。 当然，如果是当成一个产品来做，我建议最好是本地打包，因为本地打包，可控性比较强，而且现在好像文件超过40M进行云端打包需要付费，相关的androidSDK，官网的社区都有地址可以下载，有兴趣的可以下载一个android-studio试试，难度也不大。 练习题： https://nativesupport.dcloud.net.cn/AppDocs/usesdk/android 参考离线打包步骤，尝试进行本地打包，如遇到问题，欢迎骚扰，共同进步。 最后简单的总结一下，5+APP开发流程
- 下载IDE，创建5+APP项目
- 每一个想要实现的页面都是一个html文件，几乎没有用到其他内容
- 跳转页面使用webview，需要操作设备的其他功能，5+APP也基本都有相应的接口，傻瓜化调用就可以
- 云端打包需要在manifest.json中配置项目信息
- 本地打包需要在官网社区下载SDK
- 打包生成APK