今天小编用HBuilder+MUI开发移动APP，不用Android原生也不用IOS原生，仅仅用HTML5+MUI。小编也是初学者所以如有不准确的地方望大家指出帮助小编改正，同时也可以促进大家的深入学习。
　　HBuilder的下载官网地址：http://www.dcloud.io/；MUI官网下载地址：https://www.muicss.com/。
　　HBuilder是免费的，但是仅仅需要登录，安心注册，方向登录使用，完全免费的。
　　第一次启动HBuilder需要登录和简单的设置不过很easy啦。
启动HBuilder后，可以再菜单选项卡看到文件、编辑...等等。

鼠标左键点击文件选项卡，可以看到


按照截图操作后，

按照截图进行操作后会看到，

在项目管理器中看到刚才新创建的项目，

这就是基本的目录结构，当然了也可以自定义哈！鼠标左键双击index.html文件，会看到

按照截图进行设置即可，这样比较方便边看边改而已。
因为我们新建项目采用的是mui项目模板所以index.html页面会自动引入mui.min.js和mui.min.css，

<script type="text/javascript" charset="utf-8">

mui.init();

</script>

mui.init();这一行的意思是：插件初始化。官方文档是这么说明：mui框架将很多功能配置都集中在mui.init方法中，要使用某项功能，只需要在mui.init方法中完成对应参数配置即可，目前支持在mui.init方法中配置的功能包括：创建子页面、关闭页面、手势事件配置、预加载、下拉刷新、上拉加载、设置系统状态栏背景颜色。而且官方文档特别强调了：mui需要在页面加载时初始化很多基础控件，如监听返回键，因此务必在每个页面中调用。
下面展示代码，

这两张截图就是全部代码了，以及在电脑上面显示的效果，之后会奉上手机端显示效果图（仅仅只有安卓手机端的显示效果图，因为小编用的是安卓手机）

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

        <title></title>

        <script src="js/mui.min.js"></script>

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

    </head>

    <body>

        <!-- 头部header开始 -->

        <header class="mui-bar mui-bar-nav">

            <a class="mui-icon mui-icon-bars mui-pull-left"></a>

            <a id="info" class="mui-icon mui-icon-info-filled mui-pull-right" style="color: #999;"></a>

            <h1 class="mui-title">index</h1>

        </header>

        <!-- 头部header结束 -->

        <script type="text/javascript" charset="utf-8">

            mui.init({

                subpages: [{

                    url: "html/index_list.html", //子页面HTML地址，支持本地地址和网络地址

                    id: "index_list", //子页面标志

                    styles: {

                        top: '45px', //子页面顶部位置

                        bottom: '0px' //子页面底部位置

                    }

                }]

            });

        </script>

    </body>

</html>

上面是index.html页面的全部代码，mui中头部是header，默认在顶端显示，nav默认在底端显示。index.html页面中只写了一个header头部导航，和一串JavaScript代码。
官方文档中这样说明：在mobile app开发过程中，经常遇到卡头卡尾的页面，此时若使用局部滚动，在android手机上会出现滚动不流畅的问题； mui的解决思路是：将需要滚动的区域通过单独的webview实现，完全使用原生滚动。具体做法则是：将目标页面分解为主页面和内容页面，主页面显示卡头卡尾区域，比如顶部导航、底部选项卡等；内容页面显示具体需要滚动的内容，然后在主页面中调用mui.init方法初始化内容页面。

mui.init({

    subpages:[{

      url:your-subpage-url,//子页面HTML地址，支持本地地址和网络地址

      id:your-subpage-id,//子页面标志

      styles:{

        top:subpage-top-position,//子页面顶部位置

        bottom:subpage-bottom-position,//子页面底部位置

        width:subpage-width,//子页面宽度，默认为100%

        height:subpage-height,//子页面高度，默认为100%

        ......

      },

      extras:{}//额外扩展参数

    }]

  });

参数说明：styles表示窗口属性，参考5+规范中的WebviewStyle；特别注意，height和width两个属性,即使不设置，也默认按100%计算；因此若设置了top值为非"0px"的情况，建议同时设置bottom值，否则5+ runtime根据高度100%计算，可能会造成页面真实底部位置超出屏幕范围的情况；left、right同理。

<!doctype html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

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

    </head>

    <body>

        <div class="mui-content">

            <button type="button" class="mui-btn mui-btn-primary mui-btn-block">index_list</button>

        </div>

        <script src="../js/mui.min.js"></script>

        <script type="text/javascript">

            mui.init();//初始化

        </script>

    </body>

</html>

上面是index_list.html页面的全部代码。index.html和index_list.html两个页面结合在一起形成了这个效果：

index.html的作用就是显示固定导航，inde_list.html显示具体列表内容，列表项的滚动是在index_list.html所在webview中使用原生滚动，既保证了滚动条不会穿透顶部导航，符合app的体验，也保证了列表流畅滚动，解决了区域滚动卡顿的问题。 index_list.html就是index.html的子页面，创建代码比较简单，如下：

mui.init({

                subpages: [{

                    url: "html/index_list.html", //子页面HTML地址，支持本地地址和网络地址

                    id: "index_list", //子页面标志

                    styles: {

                        top: '45px', //子页面顶部位置，mui标题栏默认高度为45px

                        bottom: '0px' //子页面底部位置，默认为0px，可不定义

                    }

                }]

            });

说明：html是在本项目下新建的一个子文件夹，index_list.html页面在html文件夹下面。
安卓手机端测试效果图：

真机测试参数：Android 4.2.2 OS，关于如何真机测试，小编拿安卓手机举例，一部安卓手机4.2及以上版本系统，一根数据线，然后需
要在电脑上安装一个手机助手。第一步通过数据线将手机与电脑相连；第二步查看HBuilder菜单栏下方的工具栏中

点击截图箭头所指的那个按钮旁边的方向向下的箭头，如果看到

如果看到上面这张截图所示的效果，那么点击这个按钮即可在手机端看到，期间手机和电脑之间不能断开连接；如果没有扫描出手机，那么启动手机助手，然后关闭HBuilder刷新桌面，之后启动HBuilder然后重复以上步骤检查手机是否被识别出来，如果还未识别出手机那么请百度吧，具体情况具体分析。

这只是一个简单的demo而已，建议大家自己试试看，还有就是要养成看官方文档的习惯，遇到问题先去查询官方文档。
官方文档地址：http://dev.dcloud.net.cn/mui/ui/，http://www.html5plus.org/doc/zh_cn/webview.html或许有人会说小编我的这篇博客很烂，但是小编觉得真的很基础，切记不要养成高端看不透彻，低端基础看不上的习惯，这个习惯很不好。
转载请注明出处，谢谢。

MUI（1）的更多相关文章

  1. MUI（3）

    本篇博文是继续上篇博文MUI(2).上面这幅图是博文MUI(1)中实现的效果,在博文MUI(1)中提到了2个页面,一个页面是index.html,另一个页面是index_list.html页面.上面这 ...

  2. MUI（2）

    本篇博文是继续MUI(1)博文. 上一篇博文小编写了两个页面,一个页面只写了一个头部导航栏,另一个页面写了一个按钮,然后这两个页面进行合并显示,即在头部导航栏页面加载显示另一个页面的按钮.仔细观察上一 ...

  3. MUI（5）

    今天实现9宫格菜单.先上效果图: 就是这个效果咯,界面不太美观,底部导航栏是为了苹果用户没有返回按键设计的,只是为了方便演示而已,没有做过多的处理.首先先说一下这个底部导航栏如何实现,这个底部导航栏小 ...

  4. MUI（4）

    今天感觉无聊,想听一首音乐.没有添加其他页面,只是在index_list.html页面进行代码添加而已. <!doctype html> <html> <head> ...

  5. mui开发app前言（一）

    dcloud mui开发app前言 大一那会就听说html5快要发布了,前景无量,厉害到能写操作系统==|||(什么???蛤?) 似乎html5标准还没正式发布那会,使用hybrid模式开发app已经 ...

  6. 基于Html5 Plus + Vue + Mui 移动App 开发（二）

    基于Html5 Plus + Vue + Mui 移动App 开发(二) 界面效果: 本页面采用Html5 Plus + Vue + Mui 开发移动界面,本页面实现: 1.下拉刷新.上拉获取更多功能 ...

  7. MUI学习03-滚动图（幻灯片）及菜单项（九宫格）

    <!--标准mui.css-->引入CSS:<link rel="stylesheet" href="../css/mui.min.css"& ...

  8. mui框架（三）

    1.Ajax-get请求 // get测试请求地址 http://test.dongyixueyuan.com/link_app/get?state=index&num=0 mui.get(' ...

  9. Html5+Mui前端框架,开发记录（三）：七牛云 上传图片

    1.Html界面: <div id="container"> <label>凭证:</label> <div id="uploa ...

随机推荐

  1. MVVM架构~knockoutjs系列之验证成功提示显示

    返回目录 对于knockout.validation来说,我们已经知道了如何去验证大部分表单元素,而有时,我们的需求希望在每个元素验证成功后,去显示正确的提示,这个我们很容易的使用self.元素.is ...

  2. EF架构~关系表插入应该写在事务里，但不应该是分布式事务

    回到目录 这个标题很有意思,关系表插入,就是说主表和外表键在插入时,可能会有同步插的情况,如在建立主表时,扩展表需要同步完成数据的初始化工作,而对于多表插入时,我们为了保证数据的一致性会针它写在事务中 ...

  3. struts2学习笔记之八:Action中方法的动态调用

    方法一:action名称+!+方法名称+后缀 Action类中增加addUser()和delUser()方法, package com.djoker.struts2; import org.apach ...

  4. 编写一个简单的C++程序

    编写一个简单的C++程序 每个C++程序都包含一个或多个函数(function),其中一个必须命名为main.操作系统通过调用main来运行C++程序.下面是一个非常简单的main函数,它什么也不干, ...

  5. jQuery贪吃蛇--jQuery学习

    我用JQuery有一段时间了,越来越体会到其强大之处,于是自己尝试写了一个贪吃蛇小游戏,拿来与网友分享一下. 1. 了解JQuery.Timers 除用到了jQuery1.5.1之外,我还用到了jQu ...

  6. 第三节：Vue计算属性

    计算属性就是当其依赖的属性的值发生变化的时候,这个属性的值就会自动更新. 例子: <!DOCTYPE html> <html> <head> <meta ch ...

  7. JSON学习之一

    1.JSON:JavaScript Object Notation(javaScript对象表示法),JSON是存储和交换文本信息的语法,类似XML:JSON比XML更小,更快,更易解析: { &qu ...

  8. 信息加密之非对称加密DH算法

    非对称加密算法是相对于对称加密算法来说的,对于对称加密算法请查阅之前的总结,今天为大家介绍一下DH算法,DH是一种密钥交换算法,接收方根据发送方加密时的密钥,生成接收方解密密钥.下面就一起来学习一下吧 ...

  9. JAVA--网络编程（UDP）

    上午给大家简单介绍了一下TCP网络通信的知识,现在就为大家补充完整网络编程的知识,关于UDP的通信知识. UDP是一种不可靠的网络协议,那么还有什么使用价值或必要呢?其实不然,在有些情况下UDP协议可 ...

  10. hdu Caocao's Bridges(无向图边双连通分量，找出权值最小的桥)

    /* 题意:给出一个无向图,去掉一条权值最小边,使这个无向图不再连同! tm太坑了... 1,如果这个无向图开始就是一个非连通图,直接输出0 2,重边(两个节点存在多条边, 权值不一样) 3,如果找到 ...