文档章节

HBuilder+MUI开发移动APP - MUI(1)

Dhandsome
 Dhandsome
发布于 2017/03/23 06:40
字数 1717
阅读 843
收藏 5

今天用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
或许有人会说我的这篇博客很烂,但是我觉得真的很基础,切记不要养成高端看不透彻,低端基础看不上的习惯,这个习惯很不好。

© 著作权归作者所有

Dhandsome
粉丝 36
博文 11
码字总数 15899
作品 0
深圳
程序员
私信 提问
基于Html5 Plus + Vue + Mui 移动App 开发(二)

基于Html5 Plus + Vue + Mui 移动App 开发(二) 界面效果: 本页面采用Html5 Plus + Vue + Mui 开发移动界面,本页面实现: 1、下拉刷新、上拉获取更多功能; 2、使用Vue 进行数据绑定; 3、...

衡斅
2018/09/04
0
0
移动开发1 HTML5移动开发介绍

Native APP:是一种基于智能手机本地操作系统如 ios 、Android 、WB Web APP :使用面向web的开发技术(html5+css3+javascript)完成手机APP的制作 web APP核心思想 :打包(第三方平台,将HTM...

奋斗的小芋头
2016/11/22
116
0
武侯/mui-vue2

mui-vue2 基于mui+vue2.x的H5 APP项目,页面视图全部都是html5页,不是嵌入app原生页面,项目可以直接运行在PC上调试,也可以在hbuilder上真机调试,可以直接下载安装点此链接APP下载。 项目文...

武侯
2017/12/30
0
0
开发一个App要100万?用互联网思维只要1万

近期经常看到一些关于开发一个App要多少钱的文章出来,有的说App开发要100万,有的说要60万,其实这个不叫开发App,那叫做项目或者创业开公司要多少钱才对,而这种情况下之所以要这么多钱,也...

糊涂熊
2016/01/04
5
0
基于MUI构建的具有90+页面的移动APP

#前言 mui是一款接近原生App体验的前端框架,只需要掌握前端技术就可以开发APP应用,官方有提供功能比较全面的demo版本, 但在实战中总会遇到一些不可避免但坑,对于没有接触过mui的开发者,...

EasyTuan
2018/08/28
0
0

没有更多内容

加载失败,请刷新页面

加载更多

EDI 电子数据交换全解指南

EDI(Electronic Data Interchange,电子数据交换)技术使得企业与企业(B2B)实现通信自动化,帮助交易伙伴和组织更快更好地完成更多工作,并消除了人工操作带来的错误。从零售商到制造商、物...

EDI知行软件
今天
3
0
CentOS7的LVM动态扩容

# 问题 CentOS7上面的磁盘空间有点紧张,需要扩容。 解决 查询当前磁盘状态 [root@xxx ~]# lsblkNAME MAJ:MIN RM SIZE RO TYPE MOUNTPOINTfd0 2:0 1 4K ...

亚林瓜子
今天
3
0
Kafka 0.8 Producer (0.9以前版本适用)

Kafka旧版本producer由scala编写,0.9以后已经废除 示例代码如下: import kafka.producer.KeyedMessage;import kafka.javaapi.producer.Producer;import kafka.producer.ProducerConfig;......

实时计算
今天
5
0
Giraph源码分析(八)—— 统计每个SuperStep中参与计算的顶点数目

作者|白松 目的:科研中,需要分析在每次迭代过程中参与计算的顶点数目,来进一步优化系统。比如,在SSSP的compute()方法最后一行,都会把当前顶点voteToHalt,即变为InActive状态。所以每次...

数澜科技
今天
6
0
Navicat 快捷键

操作 结果 ctrl+q 打开查询窗口 ctrl+/ 注释sql语句 ctrl+shift +/ 解除注释 ctrl+r 运行查询窗口的sql语句 ctrl+shift+r 只运行选中的sql语句 F6 打开一个mysql命令行窗口 ctrl+l 删除一行 ...

低至一折起
今天
13
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部