HBuilderX安装使用（5+App）

---

1. 5+ App概念

HTML5 Plus移动App，简称5+App，是一种基于HTML、JS、CSS编写的运行于手机端的App，这种App可以通过扩展的JS API任意调用手机的原生能力，实现与原生App同样强大的功能和性能。在W3C中国的指导下成立了HTML5中国产业联盟www.html5plus.org组织，推出HTML5+规范。目前该联盟已经挂靠在工信部信通院标准所下，相关标准已经成为行业标准。

HTML5+规范是一个开放规范，隶属于工信部，允许三方浏览器厂商或其他手机runtime制造商实现。HTML5+扩展了JavaScript对象plus，使得js可以调用各种浏览器无法实现或实现不佳的系统能力，设备能力如摄像头、陀螺仪、文件系统等，业务能力如上传下载、二维码、地图、支付、语音输入、消息推送等。除了功能外，HTML5+很重要的特点是提供了原生的渲染能力，通过plus.webview、plus.nativeObj、plus.nativeUI，让开发者可以使用js来调用原生渲染能力，实现体验的大幅提升。

HTML5+ 规范 API 及demo示例最新规范请参考：http://www.html5plus.org/#specification

应用架构

HBuilderX内置HTML5+ APP开发环境，提供一套完整的移动应用开发解决方案。

2. HBuilderX开发环境

HbuilderX软件由DCould开发和发布，是一个前端IDE。HBuilderX内置HTML5+ APP开发环境，提供一套完整的移动应用开发解决方案。
内置HTML5+ API语法提示，提高开发效率；
集成真机运行环境，方便开发后即时在真机上查看运行效果；
集成应用云端打包系统，不用部署xcode和Android sdk就可以打包应用。使开发者只需要使用HTML5、Javascript、CSS技术就可以快速开发跨平台的移动应用。
最大优势是有一个大型中文社区和一个云存储系统。

下载：https://www.dcloud.io/hbuilderx.html

3. Mui框架

3.1 新建项目

如何在HBuilderX创建Mui项目：文件>新建>项目>弹出窗口(四个区域:选择工程项目所使用的技术、项目名称、项目路径、选择项目模板)>选择5+App>选择Mui项目。

在Mui项目中，css文件是样式文件，fonts是字体和图标文件，js文件是脚本文件，unpackage文件是空文件用于存储垃圾文件，index.html文件是App页面文件，manifst.json文件是App配置文件。

在项目文件夹创建html文件，在模板里选择Mui模板，就会自动生成一个带Mui框架的html文件。

3.2 快速生成组件

mHeader 生成标题

mbody 生成主体

mlist 快速生成列表，生成的是ul_li无序列表。
折叠面板，是在主体里创建一套ul和li列表，在ul标签的class里加入mui-table-view，在li标签的class加入mui-table-view-cell。在li标签里加入一对a标签，在a标签的class里加入mui-navigate-right(生成一个向右的箭头)，在a标签下面加入隐藏列表，隐藏列表用div标签表示，在div标签的class里加入mui-collapse-content，在li的class里加入mui-collapse。

操作列表，需要在主体外面添加一个新的列表，这个新的列表需要用id选择器来和主体里的按钮关联。显示和隐藏列表用到js。

mnbutton 快速生成按钮
在Mui里按钮分为两种：一种是有底色按钮，另一种是无底色按钮。按钮有六种颜色，分别是默认的白色按钮、绿色按钮、红色按钮、蓝色按钮、黄色按钮、紫色按钮。

mbadge 快速生成数字角标
数字角标分为有底色角标和无底色角标。

对话框
在Mui中对话框有四种：
普通对话框 mui.alert();
参数: 提示对话框上显示的内容；提示对话框上显示标题；提示对话框上按钮显示信息；提示对话框点击结束所回调的函数(重新执行方法)
选择对话框 mui.confirm();
参数: 提示对话框上显示的内容；提示对话框上显示标题；、提示对话框上按钮显示信息，按钮的内容存储在数组里(Array)；提示对话框点击结束所回调的函数(重新执行方法)；是否使用H5绘制对话框
输入对话框 mui.prompt();
参数: 提示对话框上显示的内容；编辑框显示的提示文字；提示对话框上首先的标题；提示对话框的按钮内容；提示对话框点击结束所回调的函数(重新执行方法)；是否使用H5绘制对话框
消息提示框 mui.toast();
自动消失提示框

mslider 快速生成轮播组件
在轮播组件里面的图片的高度和宽度是需要一致的。轮播图片的尺寸(宽度和高度)要一致。
在Mui中如果想要图片实现轮播的效果，则需要在.mui-slider-group节点上增加.mui-slider-loop类，同时需要重复增加2张图片。mui框架内置了图片轮播插件，通过该插件封装的JS API，用户可以设定是否自动轮播及轮播周期。

mform 快速生成表单
快速删除：只需要在input控件上添加.mui-input-clear类，当input 控件中有内容时，右侧会有一个删除图标，点击会清空当前input的内容；搜索框：在.mui-input-row同级添加.mui-input-search 类，就可以使用search控件；语音输入*5+ only：为了方便快速输入，mui集成了 HTML5+的语音输入，只需要在对应input控件上添加.mui-input-speech 类，就可以在5+环境下使用语音输入；mui在mui.init()中会自动初始化基本控件,但是 动态添加的Input组件需要重新进行初始化；密码框：给input元素添加.mui-input-password类即可使用。

mtab 底部

4 运行

可以在浏览器或者内置浏览器运行，也可以在模拟器运行，还可以真机运行。

5 发行打包

完成应用页面的编辑后，需要正式打包为原生的apk或ipa安装包。
首先明确一下，有人说HTML5做的应用无法通过苹果Appstore审核，这是错误的说法。苹果只是拒绝开发者把web站点直接打包上Appstore，不优化任何体验，它认为这是给Appstore制造垃圾应用，如果是原生体验的App，虽然使用HTML5技术，苹果也不会拒绝上架。事实上Appstore上使用HTML5技术的App超过40w。
HBuilderX提供的打包有云打包和本地打包两种。
HBuilderX提供的云打包对正常开发者是免费的。但过多浪费服务器资源会额外收费。用本地打包无任何限制。
云打包的特点是DCloud官方配置好了原生的打包环境，可以把HTML等文件编译为原生安装包。

无论云打包还是本地打包，在HBuilderX的菜单“发行”菜单中有链接。

---