mui 入门

来源：互联网发布：嘉兴菜鸟网络招聘岗位编辑：程序博客网时间：2024/06/07 03:34

1.MUI框架
MUI（Mobile User Interface）是一套基于HTML5的，遵循html5+规范的，中国团队开发的，开源的，用于手机端界面开发的一套框架。mui框架是一个可以方便开发出高性能App的框架，也是目前最接近原生App效果的框架。目前，MUI是基于H5的最方便的App开发框架之一！
2.官网：http://dev.dcloud.net.cn/mui/
3.通过HBuilder，我们可以快速开发出H5网页，而它跑在MUI框架中的速度非常快。HBuilder内嵌了jquery、bootstrap、angular、mui等常用框架的语法提示库。
4.HBuilder内置HTML5+ APP开发环境，提供一套完整的移动应用开发解决方案。内置HTML5+ API语法提示，提高开发效率；集成真机运行环境，方便开发后即时在真机上查看运行效果；集成应用云端打包系统，不用部署xcode和Android sdk就可以打包应用。使开发者只需要使用HTML5、Javascript、CSS技术就可以快速开发跨平台的移动应用。
5.创建HelloWorld应用
6. “新建”->“移动App”
这里写图片描述
7.Manifest.json文件是5+移动App的配置文件，用于指定应用的显示名称、图标、应用入口文件地址及需要使用的设备权限等信息，用户可通过HBuilder的可视化界面视图或者源码视图来配置5+移动App的信息。HBuilder打开manifest.json文件后默认显示“可视化视图”，可配置应用的基本信息。
8.真机运行 run in device
（1）写完代码后，我们可以通过真机运行来查看效果。
这里写图片描述
运行后，HBuilder中修改页面代码，保存后会自动同步到手机中，如果手机当前展示着被修改的页面，则会刷新页面。
（2）发行打包
完成应用页面的编辑后，需要正式打包为原生的apk或ipa安装包。HBuilder提供的打包有云打包和本地打包两种。
无论云打包还是本地打包，都在HBuilder的菜单-发行中。
本地打包在该菜单下有详细教程，此处仅对云打包进行说明。
9.MUI开发
在Hbuilder中新建工程项目，需要在首页index.html界面引入：

<link rel="stylesheet" href="css/mui.min.css"><script src="js/mui.min.js"></script>

把官方下载的MUI框架例题包里面的字体fonts文件夹copy到新建的工程项目中。
常用代码块参考http://dev.dcloud.net.cn/mui/snippet/

10.mui如何增加自定义icon图标
mui框架遵循极简原则，在icon图标集上也是如此，mui仅集成了原生系统中最常用的图标；其次，mui中的图标并不是图片，而是字体。官网参考：http://ask.dcloud.net.cn/article/128
浏览器访问阿里巴巴矢量图标库官网，选择登录方式，可直接使用新浪微博账号登录；
把生成的新图标下载到本地，为保证和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中引用刚生成的字体图标。
<link rel="stylesheet" href="css/iconfont.css">

返回上一页的代码实现：
<div class="nvbt iback" onclick=" history.go(-1)"></div>
底部选项卡切换：
这里写图片描述
参考官方案例：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>让页面可以滚动<script>    (function($) {    $(".mui-scroll-wrapper").scroll({    bounce: false, //滚动条是否有弹力默认是true    indicators: false, //是否显示滚动条,默认是true    });    })(mui);    </script>

阅读全文

0 0