MUI框架（1） | 易学教程

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”
这里写图片描述
Manifest.json文件是5+移动App的配置文件，用于指定应用的显示名称、图标、应用入口文件地址及需要使用的设备权限等信息，用户可通过HBuilder的可视化界面视图或者源码视图来配置5+移动App的信息。HBuilder打开manifest.json文件后默认显示“可视化视图”，可配置应用的基本信息。
真机运行 run in device
写完代码后，我们可以通过真机运行来查看效果。
这里写图片描述
运行后，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中引用刚生成的字体图标。
返回上一页的代码实现：

底部选项卡切换：

参考官方案例：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>

来源：CSDN

作者：涉水的小菜叽

链接：https://blog.csdn.net/xxhdcblogzh888/article/details/76166897

标签

mui

框架

html5