MUI（Mobile User Interface）是一套基于HTML5的，遵循html5+规范的，中国团队开发的，开源的，用于手机端界面开发的一套框架。mui框架是一个可以方便开发出高性能App的框架，也是目前最接近原生App效果的框架。目前，MUI是基于H5的最方便的App开发框架之一！

官网：http://dev.dcloud.net.cn/mui/

通过HBuilder，我们可以快速开发出H5网页，而它跑在MUI框架中的速度非常快。HBuilder内嵌了jquery、bootstrap、angular、mui等常用框架的语法提示库。

HBuilder内置HTML5+ APP开发环境，提供一套完整的移动应用开发解决方案。内置HTML5+ API语法提示，提高开发效率；集成真机运行环境，方便开发后即时在真机上查看运行效果；集成应用云端打包系统，不用部署xcode和Android sdk就可以打包应用。使开发者只需要使用HTML5、Javascript、CSS技术就可以快速开发跨平台的移动应用。

创建HelloWorld应用

 “新建”->“移动App”

h5嵌入到 android app嵌入h5页面用什么框架_ico


Manifest.json文件是5+移动App的配置文件，用于指定应用的显示名称、图标、应用入口文件地址及需要使用的设备权限等信息，用户可通过HBuilder的可视化界面视图或者源码视图来配置5+移动App的信息。HBuilder打开manifest.json文件后默认显示“可视化视图”，可配置应用的基本信息。

真机运行 run in device

写完代码后，我们可以通过真机运行来查看效果。

h5嵌入到 android app嵌入h5页面用什么框架_App_02


运行后，HBuilder中修改页面代码，保存后会自动同步到手机中，如果手机当前展示着被修改的页面，则会刷新页面。

发行打包

完成应用页面的编辑后，需要正式打包为原生的apk或ipa安装包。HBuilder提供的打包有云打包和本地打包两种。

无论云打包还是本地打包，都在HBuilder的菜单-发行中。

本地打包在该菜单下有详细教程，此处仅对云打包进行说明。

MUI开发

在Hbuilder中新建工程项目，需要在首页index.html界面引入：



把官方下载的MUI框架例题包里面的字体fonts文件夹copy到新建的工程项目中。

常用代码块参考http://dev.dcloud.net.cn/mui/snippet/

mui如何增加自定义icon图标
mui框架遵循极简原则，在icon图标集上也是如此，mui仅集成了原生系统中最常用的图标；其次，mui中的图标并不是图片，而是字体。官网参考：http://ask.dcloud.net.cn/article/128
浏览器访问阿里巴巴矢量图标库官网，选择登录方式，可直接使用新浪微博账号登录；http://iconfont.cn/
把生成的新图标下载到本地，为保证和mui目录结构统一，建议将字体文件放在fonts目录下，这样我们需要修改@font-face下得url属性；修改代码如下：
@font-face {font-family: “iconfont”; src:url(‘../fonts/iconfont.ttf’) format(‘truetype’); /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/ }
将iconfont.css及iconfont.ttf两个文件分别拷贝到mui工程css及fonts目录下，然后即可在mui中引用刚生成的字体图标。
返回上一页的代码实现：




底部选项卡切换：


h5嵌入到 android app嵌入h5页面用什么框架_h5嵌入到 android_03

参考官方案例：tabbar.html

ECharts官网http://echarts.baidu.com/index.html
ECharts图表事例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/echarts.min.js"></script>
    </head>
    <body>
        <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
        <div id="main" style="height:400px;"></div>
        <script type="text/javascript">
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));

            // 指定图表的配置项和数据
..........
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        </script>
    </body>
</html>