【美高梅开户网址】读书笔记之,MUI框架开辟HTML5手提式有线电话机APP

初探MUI(二)

MUI是三个HTML伍前端框架,主要用以手提式有线电话机应用程式开垦。附MUI合法文书档案。以下内容均围绕MUI进行座谈,欢迎大家纷扰^^

MUI是dcloud(数字天堂)集团旗下的一款跨平台支付移动APP的框架产品,在攻读MUI框架在此之前,开首接触了Hbuilder代码编辑器,它带给自身的首先认为是快,那是HBuilder的最大优势,通过总体的语法提醒和代码输入法、代码块等,小幅提高HTML
、JS、css的开采功用。

  前  言

JRedu

style=”font-size: 1四px; font-family: "Microsoft YaHei"”> 随着HTML伍的不断向上,移动支付成为主流方向!愈来愈多的厂商初叶接纳使用HTML5支动手提式有线电电话机应用软件,而随开端提式有线电话机硬件设施配置的频频提拔,各类费用框架的缕缕优化,也使着H五开垦的混合应用程式的体验特别趋向原生!那么在本种类博客中,大家就来一探H5开辟APP的秘密面纱吧~~

MUI(1),mui

  明日小编用HBuilder+MUI开垦移动APP,不用Android原生也不用IOS原生,仅仅用HTML五+MUI。小编也是初大家据此如有不纯粹的地点望大家提出支持小编勘误,同时也能够推进大家的鞭辟入里学习。
  HBuilder的下载官方网站地址:
  HBuilder是无需付费的,然则单纯须要报到,安心注册,方向登6使用,完全无需付费的。
  第一遍运维HBuilder要求报到和总结的设置不过很easy啦。
起步HBuilder后,能够再菜单选项卡看到文件、编辑…等等。

美高梅开户网址 1

鼠标左键点击文件选项卡,能够看出

美高梅开户网址 2
根据截图操作后,
美高梅开户网址 3
依照截图举行操作后会看到,
美高梅开户网址 4
在类型管理器中来看刚才新创立的品类,
美高梅开户网址 5
那就是着力的目录结构,当然了也可以自定义哈!鼠标左键双击index.html文件,会看出
美高梅开户网址 6

依照截图举办安装就可以,那样相比较便宜边看边改而已。
因为我们新建项目应用的是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须要在页面加载时初叶化很多基础控件,如监听重临键,由此必须在各样页面中调用。
下面呈现代码,
美高梅开户网址 7

美高梅开户网址 8

 

那两张截图正是整个代码了,以及在管理器下边呈现的机能,之后会奉上手提式有线话机端体现效果图(仅仅唯有安卓手机端的展现效果图,因为笔者用的是安卓手提式有线电话机)

<!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">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表示窗口属性,参考伍+规范中的WebviewStyle;尤其注意,height和width三个天性,就算不设置,也暗中同意按百分百计量;因而若设置了top值为非”0px”的景况,建议还要设置bottom值,不然五+
runtime依据中度百分百计算,恐怕会导致页面真实底部地点赶上显示器范围的境况;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七个页面结合在共同造成了那些效应:
美高梅开户网址 9

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文件夹上面。
安卓手提式有线电话机端测试效果图:
美高梅开户网址 10
真机测试参数:Android 四.2.2OS,关于怎么着真机测试,我拿安卓手提式有线话机比如,1部安卓手提式有线电话机肆.2及以上版本系统,壹根数据线,然后需
要在微型Computer上设置1个部手提式有线电电话机帮手。第一步通过数据线将手机与Computer相连;第二步查看HBuilder菜单栏下方的工具栏中
美高梅开户网址 11

点击截图箭头所指的要命开关旁边的方向向下的箭头,假使看到
美高梅开户网址 12
要是见到下边那张截图所示的成效,那么点击那些开关就能够在手提式有线电话机端看到,时期手机和管理器之间不可能断开连接;假使未有扫描动手提式有线电话机,那么运行手提式有线电话机帮手,然后关门HBuilder刷新桌面,之后运行HBuilder然后再也以上步骤检查手提式有线电话机是或不是被识别出来,如若还未识别出手机那么请百度吗,具体景况具体分析。

那只是一个简练的demo而已,指出大家温馨研究看,还有便是要养成看官方文书档案的习贯,蒙受问题先去询问官方文书档案。
官方文书档案地址:
兴许有人会说小编小编的那篇博客很烂,不过小编感到确实很基础,切记不要养成高等看不透顶,低档基础看不上的习贯,这一个习贯很糟糕。
转发请注脚出处,多谢。

明天笔者用HBuilder+MUI开荒移动应用软件,不用Android原生也不用IOS原生,仅仅用HTML5+MUI。作者也是初学者据此如有离谱的地点望我们…

学习心得

读书完MUI基础理论后,相信广大人都会感到MUI真的很便宜,基本必要都能够的到满意,但其实不然,因为MUI有看不尽的局限性,以及对少数手提式有线电话机的包容性难题,导致不知凡什么日期候会并发不可捉摸的BUG。依据个人观望开采,对于苹果系统越来越的友好,而对此安卓系统,因为碎片化太严重,所以应当多找些机型测试。

自个儿境遇过的动静有:
一.尾部导航栏(html伍):在华为note贰,魅族3,魅蓝手机那周详应用,不过oppo一款型号后面部分导航条出现下移情形(注:尾巴部分导航条中度通过JS总括,中度写死时不会并发),倘使赶过,将尾巴部分导航条中度写死。

二.索爱手提式有线电电话机的虚构按钮,假如按照正规的流式布局下去,当页面内容多于显示器中度时,尾巴部分有fixed定位的成分时,虚拟按钮或然会把尾巴部分定位的事物遮挡住。(ps:经过测试,一加虚拟按钮会缩短荧屏其实中度)消除办法:因为虚拟按钮会压缩荧屏高度,而页面尾部距离底部定位时,能够将fixed定位的因素挤压上去,将body,html页面高度设置为百分之百。

3.使用<header></header>时,固然页面有<input type='text />,此时输入文字会将<header></header>挤掉,作者的消除办法是:展开软键盘时,挤压webview,裁减视口的莫斯中国科学技术大学学。可是这么做有一个难点,假使页面内容较多,会发出滚动条,给用户的认为倒霉。也能够监听软键盘展开事件,动态调治页面。下边仅付给最轻便易行的消除方案:

        mui.plusReady(function () {             
            plus.webview.currentWebview().setStyle({
                        softinputMode: "adjustResize"
                    });
        });

四.运用原生尾部导航条,近日境遇的难题是,真机测试时,在苹果陆上全面渲染,测试相关逻辑都工作有成,但是在HTCnote2上,有四个ICON渲染不出来,只渲染出来了底部导航栏的可观,具体景况尚在测试中。。。。


一、 移动APP项目搭建

学习总计

一.在调节和测试MUI项目时,笔者以为应该先利用安卓手提式有线电电话机调节和测试,因为笔者两遍都以在苹果手提式有线电话机上成功调节和测试,不过将源码放到安卓手提式有线电话机上时,出现种种未知的BUG,所以最初测试使用安卓手提式有线电话机,等程序调节和测试落成后,再去苹果手提式有线话机上测试。

贰.因为现在不胜枚举个人都追求应用原生来写html5,在合法还没公布正式的最底层导航条时,就和好遵照社区的阅历,自个儿改了三个平底导航条,不过因为展开新的页面时,尾部原生导航条不会暗藏,所以不能,照旧只可以选拔mui提供的最底层导航条,所以,对于mui的斟酌,依然必要和谐去多商量,比方:和原生相关的分界面渲染,操作原生的始末,调用原生JS等,都亟需密切的钻探。所以,笔者感觉,假使有早晚的安卓只怕IOS开拓经历的人的话相比较的轻易精晓,可是对于二个前端开拓职员来讲,那壹块分明是读书的首要。

美高梅开户网址 , 01-初识MUI

 

后记


鉴于大家的H5编写的都是三个个网页,要求使用浏览器展开本领选用,那明明不是应用软件的选择办法。
那么咱们才干将2个有线电话网址,封装成叁个APP呢?
时下热点的Cordova、PhoneGap、appMobi、WeX五等…都以主流的创设应用软件工具!不过这一个工具备四个同步的风味——使用麻烦!!

 

就此,我们介绍一种最便利的创设的方法,使用HBuilder壹键打包!HBuilder是数字天堂旗下的壹款前端开荒IDE,其成效庞大远超你想象,大家利用的MUI框架,HTML伍+框架,都以数字天堂旗下产品,Hbuilder+MUI那对好基友,几乎正是绝配!

美高梅开户网址 13

HBuilder下载地址:http://www.dcloud.io/ ,下载完结后傻瓜式安装就可以。

MUI
有以下两大优点:

 

一、轻量

1接纳HBuilder新建移动APP项目

HBuilder安装成功之后,就足以新建1个移动应用程式项目啦!点击“文件—>新建—>移动APP”,输入你的项目名称,就足以搭建达成一个移动应用程式项目啦!

品种的目录结构如下:

美高梅开户网址 14

 

追求质测量身体验,是我们开头起步MUI项目标严重性目的,轻量必然是生死攸关特征;

2manifest.json文件介绍

类型目录中的css/img/js/html等公事就不11赘述了,建好项目后我们要求新添页面只须求新建HTML文件就能够,与付动手提式有线电话机网址的操作一模二样。

而这里面最根本的相应就是manifest.json那几个文件了,那些文件差不离涵盖了作者们APP的兼具安装,双击张开,可以看来这些分界面:

美高梅开户网址 15

底层的选项卡能够见到,那之中富含了作者们应用程式的称谓、版本号、首页文件、应用的Logo、应用的启航空图片以及大家须要的各样SDK。大家能够依照本身的须求自动设置,此处不再1一赘述。

 

二、APP程序的打包与调试

【美高梅开户网址】读书笔记之,MUI框架开辟HTML5手提式有线电话机APP。 

在上头的操作中,大家搭建了1款属于本人的移动APP项目,那么那几个种类怎么运作调解,又是怎么打包成Android以及IOS能够设置的应用程式呢?

 

MUI不信赖任何第一方JS库,压缩后的JS和CSS文件仅有100+K和60+K

1将品种打包成APP

第二,大家来看一下怎么着和将品种打包成多少个能够设置的应用程序,那是Hbuilder最便捷的一步,也是杰小瑞先生选用Hbuilder那款IDE的重大缘由之一。

入选项目,点击Hbuilder顶部导航栏的“发行—>发行为原生安装包”,能够看到如下页面:

美高梅开户网址 16

点击打包,就足以在不须要Xcode和 Android SDK的景况下,直接在云端打包。

 美高梅开户网址 17

包裹实现后,就能够得到安卓的apk文件和苹果的ipa文件。

 

美高梅开户网址 18

2直白运维调解

上边介绍的是将品种打包成应用程序,可是付出进程中,我们种种页面都要拓展多量的调养测试,HBuilder也是扶助的。常用的章程有各类,直接通过浏览器调节和测试,通过手提式有线话机运转调度,通过模拟器调节和测试,都以能够。

点击运营,就足以挑选调节和测试形式啦~~此处不再赘述,假如急需能够商议留言哦!

美高梅开户网址 19

 

三、MUI框架与HTML5+框架介绍

地点提到,HBuilder编辑器、MUI框架、HTML五+框架都是数字天堂公司的资深产品。那么MUI框架和HTML伍+框架都以怎么的呢?

 

二、原生UI

1MUI框架

 

MUI框架号称是“最周边原生APP体验的高质量前端框架”,当然那是法定的口号,杰小瑞先生不担当吹嘘~
官方文书档案地址:http://dev.dcloud.net.cn/mui/ 

经过我们的亲自体验,MUI框架确实对得起他的口号,当然也有非常的大的升华空间须要进步。 可是非凡HBuilder的应用,如此般顺滑的操作体验会令你不敢相信本身在敲代码。
MUI给我们提供了汪洋的零部件,只供给在HBuilder中输入3个”m”开端,就能够同列表中选取五颜六色各类零部件!

 美高梅开户网址 20

当选你供给的放肆五个零件,回车,一大段代码直接生成!举例大家采纳第三个maccordion回车,就能够直接生成一大段代码,如下:

 美高梅开户网址 21

运作之后,就能够看出一个折叠面板:

 美高梅开户网址 22

那相比较于别的框架要求团结手写Class的方式,那种操作是还是不是顺滑到不可能设想呀!麻麻再也不用顾忌你记不住这么多class名字了~~ 所以,MUI提供了如此多的组件,使用那样简约,大家也就不再1一解说了。感兴趣的同学,能够进入援助文书档案http://dev.dcloud.net.cn/mui/ui/ 查看全部组件。

大家前边的内容,将珍视针对MUI中的页面跳转、选项卡切换、Ajax、下拉刷新&上拉加载、调取底层摄像头的效益进行解说。

 

由于在此之前的重重前端框架(尤其是响应式布局的框架),UI控件看起来太像网页,未有原生以为,因而追求原生UI以为也是我们的主要目的

2HTML5+框架介绍

上面我们介绍了MUI框架的中坚使用。也精通到了MUI的重大作用是搭建应用软件的页面布局所利用的框架。那么HTML⑤+则是增强版的无绳电话机浏览器引擎,让HTML5高达原生水平!二维码、语音输入、摇1摇、摄像头、文件系统、微信分享……等大概你能想到的原生底层效用,HTML五+都能帮您兑现。

合法给出了一句话:
40万原生API技能任性调用。功效可谓强大,能够点击进入详细驾驭:http://www.dcloud.io/runtime.html 

延续的稿子中,我们也会使用到HTML伍+调用原生摄像头、写入原生文件等工夫举行出现说法。

 

四、搭建第一个APP应用

 

介绍完了APP搭建的着力内容,大家就从头构建大家首先个移动APP吧。首先,大家为大家的应用软件制作二个首页。

 

MUI以iOS平台UI为底蕴,补充部分Android平台湾特务有的UI控件

1成立第二个首页

第二,大家理应新建3个index.html文件,注意新建的时候采取“含MUI的html文件”,这样能够扶持我们自行导入所急需的各样默许配置。

美高梅开户网址 23

创制完结后的率先个文本,代码以及详细分解如下:

<!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" />
        <!--导入页面所需要的MUI的CSS文件-->
        <link href="css/mui.min.css" rel="stylesheet" />
    </head>

    <body>
        <!--导入页面所需要的MUI的JS文件-->
        <script src="js/mui.min.js"></script>
        <script type="text/javascript">
            // MUI页面初始化函数
            mui.init()
        </script>
    </body>
</html>

 

在念书MUI在此以前,推荐一些相符菜鸟的网址:

2搭建首页HTML布局

首先,我们先在body中输入“m”接纳mHead,生成底部导航栏。

<!--头部APP顶部导航栏区域-->
<header class="mui-bar mui-bar-nav">
    <!--导航栏左上角返回按钮,首页不需要返回按钮,删除即可-->
    <!--<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>-->

    <!--导航栏标题-->
    <h1 class="mui-title">杰瑞教育APPDemo</h1>
</header>

在导航栏上面,输入mbody,生成页面包车型大巴关键性部分,其实便是二个div。
页面中除去Header和Footer以外的全体内容,必须包裹在body中。

<div class="mui-content">

</div>

随即,大家在body中,输入多少个mList,生成贰个列表。

 

<ul class="mui-table-view">
    <li class="mui-table-view-cell">
        <a class="mui-navigate-right">
            1、页面加载子页&列表跳转详情页并传参
        </a>
    </li>
    <li class="mui-table-view-cell">
        <a class="mui-navigate-right">
            2、 底部选项卡切换(Div模式)
        </a>
    </li>
    <li class="mui-table-view-cell">
        <a class="mui-navigate-right">
            3、底部选项卡切换(WebView模式)
        </a>
    </li>
    <li class="mui-table-view-cell">
        <a class="mui-navigate-right">
            4、底部选项卡切换(自定义)
        </a>
    </li>
    <li class="mui-table-view-cell">
        <a class="mui-navigate-right">
            5、图片轮播组件
        </a>
    </li>
    <li class="mui-table-view-cell">
        <a class="mui-navigate-right">
            6、HTML5+摄像头使用
        </a>
    </li>
    <li class="mui-table-view-cell">
        <a class="mui-navigate-right">
            7、下拉刷新&上拉加载更多&Ajax
        </a>
    </li>
</ul>

 

 

 

那其中的柒个职能,也等于大家将逐条讲明的多少个根本功用~!是否剧透了吧~~生成的页面效果如下:

美高梅开户网址 24

 

  • Dcloud官网:http://dcloud.io/
  • Dcloud问答社区:http://ask.dcloud.net.cn/
  • Dcloud文书档案汇总地址:http://ask.dcloud.net.cn/docs/
  • Hello mui线上演示地址:http://www.dcloud.io/hellomui…
  • Hello mui演示应用软件下载地址:

3为每一种列表增添点击事件跳转页面

 

增加点击事件明确就要用到JS啦~~先介绍几个可怜常用的MUI方法。

3.1 mui.init({})

mui.init方法时MUI的开始化函数,接受1个对象参数,用于实行页面包车型大巴各类配置,比方子页面包车型客车加载、页面预加载等。。。

下边包车型大巴代码是行使mui.init在页面开始化时打开页面手势操作的按钮:

 

// 初始化页面中的MUI控件
      mui.init({
          /*设置各种手势操作的开关*/
          gestureConfig:{
           tap: true, //默认为true
           doubletap: true, //默认为false
           longtap: true, //默认为false
           swipe: true, //默认为true
           drag: true, //默认为true
           hold:false,//默认为false,不监听
           release:false//默认为false,不监听
        }
      });

 

3.2 mui.ready()

穆伊.ready()是MUI框架中的文书档案就绪函数,表示mui框架已经加载落成,接受二个回调函数,成效上有点近乎于JQuery的文书档案就绪函数。

// 当MUI的页面DOM加载完成后,执行的函数。 但是,基本都使用mui.plusReady
      mui.ready(function(){
          //console.log("我在plusReady之前调用!");
      })

 

3.3 mui.plusReady ()

mui.plusReady()方法应用与mui.ready()类似,不过那个措施在实践时间上,略晚于mui.ready()。因为那些格局除了要求MUI框架加载实现的底子上,还须要HTML伍+运转时必须企图实现!

由此大家一般用那几个函数,来替代JS中的window.onload函数。

//页面中HTML5+相关的内容加载完毕后,执行的函数。  类似于window.onload = function(){}
      mui.plusReady(function(){
          //console.log("我在mui.ready之后调用!");
      })

三.四 页面跳转职能的落到实处

页面跳转职能的落到实处思路是,大家新建了2个数组,数组中存放着与列表11对应的链接地址。 然后选取循环给每1个列表list增添点击事件,并开荒数组中对应的页面地址,代码如下:

var page = ["01-jiazaiziyemian.html","02-tabbarDiv.html","03-tabbarWebView.html","04-tabbarMy.html","05-imglunbo.html","06-Camera.html","07-fullPush.html"];

          var arr = document.getElementsByTagName("a");
          for(var i=0; i<arr.length; i++){
              !function(i){
                  // 在手机APP中,事件绑定推荐使用DOM2模型。 用tap事件取代click事件。
                  arr[i].addEventListener("tap",function(){
                      mui.openWindow({
                          url:page[i],
                          id:page[i],
                      })
                  })
              }(i);
          }

3.伍 跳转代码解释

上述代码中,对于很多初学者的话恐怕会设有有的标题,下边我们来所有人家解释一下那有的代码:

壹 移动端支出中应用tap代替click

在活动端支付中,由于应用click事件会设有一定的延期,严重影响用户体验,所以大家无不用tap事件代表全数的点击事件。

贰为何for循环中嵌套二个自推行函数?

以此主题素材大家在JS面向对象环节切磋过,由于for循环会在页面加载时一贯循环结束,所以当大家点击list时,在那之中的i已经产生了数组的长度。 至于为啥那样消除,大家能够参照在此之前的博客:http://www.cnblogs.com/jerehedu/p/7592124.html 

三mui.openWindow ()是个什么东西?

mui.openWindow是MUI官方给我们提供的专门用来展开叁个新窗口的函数,详细的利用教程能够参见:http://dev.dcloud.net.cn/mui/window/\#openwindow 

而以此函数的全体配置项如下,当然大家上述的操作只需求二个U福特ExplorerL和一个页面ID就可以,而且大家现在的页面ID基本都应用U奥德赛L同名的法子哦~

mui.openWindow({
    url:new-page-url,
    id:new-page-id,
    styles:{
      top:newpage-top-position,//新页面顶部位置
      bottom:newage-bottom-position,//新页面底部位置
      width:newpage-width,//新页面宽度,默认为100%
      height:newpage-height,//新页面高度,默认为100%
      ......
    },
    extras:{
      .....//自定义扩展参数,可以用来处理页面间传值
    },
    createNew:false,//是否重复创建同样id的webview,默认为false:不重复创建,直接显示
    show:{
      autoShow:true,//页面loaded事件发生后自动显示,默认为true
      aniShow:animationType,//页面显示动画,默认为”slide-in-right“;
      duration:animationTime//页面动画持续时间,Android平台默认100毫秒,iOS平台默认200毫秒;
    },
    waiting:{
      autoShow:true,//自动显示等待框,默认为true
      title:'正在加载...',//等待对话框上显示的提示内容
      options:{
        width:waiting-dialog-widht,//等待框背景区域宽度,默认根据内容自动计算合适宽度
        height:waiting-dialog-height,//等待框背景区域高度,默认根据内容自动计算合适高度
        ......
      }
    }
})

好了,甘休到那,大家的首页就整个搭建完结啦!最后效果如下!

三.六 首页最终效果预览

美高梅开户网址 25

本来那当中还有为数不少功效我们一时半刻并未有完结,前边的博客大家继续再见吧!

假使想要源码可戳活动下载。

 

我:杰里教育
出处:http://www.cnblogs.com/jerehedu/ 
版权证明:本文版权归南宁杰瑞教育科学技术有限公司和腾讯网共有,应接转发,但未经我同意必须保留此段声明,且在小说页面鲜明地点给出原作连接,不然保留追究法律权利的义务。
才干咨询:美高梅开户网址 26

 

美高梅开户网址 27

 


DOM结构

有关mui页面包车型地铁dom,你要求了解如下规则。

固定栏靠前

所谓的固定栏,也正是带有.mui-bar属性的节点,都以根据fixed定位的因素;常见组件包罗:顶部导航栏(.mui-bar-nav)、尾巴部分工具条(.mui-bar-footer)、尾巴部分选项卡(.mui-bar-tab);那个成分运用时需依照2个规则:放在.mui-content成分在此以前,尽管是底层工具条和底部选项卡,也要放在.mui-content此前,不然固定栏会遮住部分主内容;

漫天剧情都要卷入在mui-content中

除去固定栏之外,别的内容都要卷入在.mui-content中,不然就有望被固定栏遮罩,原因:固定栏基于Fixed定位,不受流式布局限制,普通内容依旧会从top:0的职位上马布局,那样就能够被固定栏遮罩,mui为了消除这么些标题,定义了如下css代码:

.mui-bar-nav ~ .mui-content {
padding-top: 44px; } .mui-bar-footer ~ .mui-content { padding-bottom:
44px; } .mui-bar-tab ~ .mui-content { padding-bottom: 50px; }

你当然能够透过自定义CSS的艺术贯彻如上看似意义,但为了利用便利,建议将除固定栏之外的享有剧情,全部放在.mui-content中。

一味为button开关增添type属性

若button按键没有type属性,浏览器暗许依照type=submit逻辑处理,那样若将未有type的button放在form表单中,点击按键就能够奉行form表单提交,页面就能刷新,用户体验极差。

窗口管理

页面起头化:必须施行mui.init方法

mui在页面开首化时,开始化了不少参数配置,比如:按钮监听、手势监听等,因而mui页面都不能够不调用一回mui.init()方法;

页面跳转:放弃href跳转

当浏览器加载一个新页面时,若页面DOM尚未渲染落成,页面会先出示空白,然后等DOM渲染达成后,再呈现具体内容,那是WEB浏览器技艺不或许高出的体验障碍;为解决这么些标题,建议选取mui.openWindow方法展开二个新的webview,mui会自动监听新页面包车型大巴loaded事件,若加载完成,再自行展现新页面;

页面关闭:勿重复监听backbutton

mui框架自动封装了页面关闭逻辑,若希望自定义重返逻辑(举个例子编辑页面的回到,需用户确认吐弃草稿后再推行回来逻辑),则要求重写mui.back方法,切勿轻便通过add伊芙ntListener增加backbutton监听,因为add伊芙ntListener只会追加新的实行顺序,mui暗中认可封装的监听试行逻辑依然会继续实施,因而若仅add伊夫ntListener增添用户确认框,则用户就是选取了撤回,也会再而三关闭窗口。

手势操作

点击:忘记click

急忙响应是mobile
App完结的严重性,钻探表明,当延迟超过100阿秒,用户就能够感受到分界面包车型客车卡顿,然则手提式有线电话机浏览器的click点击存在300微秒延迟(至于为什么会推迟,及300阿秒的全进程,请自行谷百),mui为了解决那个主题材料,封装了tap事件,因而在任何点击的时候,请忘记click及onclick操作,统统采用如下代码:

element.add伊芙ntListener(‘tap’,function(){ //点击响应逻辑 });

大规模错误

Uncaught
ReferenceError: plus is not defined

在app开辟中,若要使用HTML5+扩充api,必须等plusready事件时有爆发后才能符合规律使用,不然也许会报“plus
is not defined”的谬误;

mui为简化开辟,将plusReady事件封装成了mui.plusReady()方法,凡涉及到HTML伍+的api,建议都写在mui.plusReady方法中;

 


 0二-webview基本知识


 

什么是webview?

在攻读MUI的webview相关知识此前,大家先来打探下怎么是窗口?什么是webview?

举个一般的例证,大家在运用浏览器的时候,浏览器的顶部和尾部的选项卡栏是原则性不改变的,当大家展开不一样的网页时,网页内容会随之改变。那时,浏览器就一定于多个窗口,区别的网页就也等于区别的webview。同理,在应用MUI制作手提式有线话机应用软件页面时,每贰个HTML页面正是一个窗口,大家能够在一个页面中创立多少个webview。

创办新的Webview窗口

WebviewObject plus.webview.create( url, id, styles, extras );

说明:

始建Webview窗口,用于加载新的HTML页面,可透过styles设置Webview窗口的体制,创设落成后供给调用show方法技术将Webview窗口显示出来。

显示Webview窗口

void plus.webview.show( id_wvobj, aniShow, duration, showedCB, extras );

说明:

突显已创制或隐匿的Webview窗口,需先获取窗口对象或窗口id,并可钦点呈现窗口的动画片及动画持续时间。

隐藏Webview窗口

void plus.webview.hide( id_wvobj, aniHide, duration, extras );

说明:

听大人说钦定的WebviewObject对象或id隐藏Webview窗口,使得窗口不可知。

获得当前窗口的WebviewObject对象

WebviewObject plus.webview.currentWebview();

说明:

获取当前页面所属的Webview窗口对象。

研究钦命标记的WebviewObject窗口

WebviewObject plus.webview.getWebviewById( id );

说明:

在已开立的窗口列表中探究钦点标记的Webview窗口并重返。
若未有查找到钦命标志的窗口则赶回null,若存在三个一样标志的Webview窗口,则赶回第一个创建的Webview窗口。
假若要博取使用入口页面所属的Webview窗口,其标志为利用的%APPID%,可通过plus.runtime.appid获取。

开创并开辟Webview窗口

WebviewObject plus.webview.open( url, id, styles, aniShow, duration, showedCB );

说明:

创立并展示Webview窗口,用于加载新的HTML页面,可由此styles设置Webview窗口的体裁,创立完毕后自动将Webview窗口展现出来。

mui双webview模式

先是大家要询问mui为了化解窗体切换白屏和区域滚动建议的双webview格局。

页面开头化

mui框架将洋洋成效布局都集中在 style=”font-family: monospace”>mui.init方法中,要利用某项作用,只需求在 style=”font-family: monospace”>mui.init方法中成功对应参数配置就能够,近日支撑在 style=”font-family: monospace”>mui.init方法中配置的职能包含:创造子页面、关闭页面、手势事件配置、预加载、下拉刷新、上拉加载、设置系统状态栏背景颜色。mui须求在页面加载时开头化多数基础控件,如监听重回键,由此必须在各样页面中调用.

以下是能够安插的参数:

mui.init({
    //子页面
    subpages: [{
        //...
    }],
    //预加载
    preloadPages:[
        //...
     ],
    //下拉刷新、上拉加载
     pullRefresh : {
       //...
    },
    //手势配置
      gestureConfig:{
       //...
    },
    //侧滑关闭
    swipeBack:true, //Boolean(默认false)启用右滑关闭功能

    //监听Android手机的back、menu按键
    keyEventBind: {
        backbutton: false,  //Boolean(默认truee)关闭back按键监听
        menubutton: false   //Boolean(默认true)关闭menu按键监听
    },
    //处理窗口关闭前的业务
    beforeback: function() {
        //... //窗口关闭前处理其他业务详情点击 ↑ "关闭页面"链接查看
    },
    //设置状态栏颜色
    statusBarBackground: '#9defbcg', //设置状态栏颜色,仅iOS可用
    preloadLimit:5//预加载窗口数量限制(一旦超出,先进先出)默认不限制
})

如下为打字与印刷当前页面UQashqaiL的演示:

mui.plusReady(function(){ console.log("当前页面URL:"+plus.webview.currentWebview().getURL()); });

创造子页面

在mobile
app开垦进程中,经常蒙受卡头卡尾的页面,此时若选择一些滚动,在android手提式有线电话机上会出现滚动不通畅的主题材料;
mui的解决思路是:将索要滚动的区域通过单独的webview完结,完全使用原生滚动。具体做法则是:将目的页面分解为主页面和内容页面,主页面呈现卡头卡尾区域,比如顶部导航、底部选项卡等;内容页面展现具体须求滚动的内容,然后在主页面中调用mui.init方法开头化内容页面。

 

参数表明:

styles:表示窗口属性,参考伍+标准中的WebviewStyle;特别注意,height和width两个性格,固然不安装,也暗中同意按百分百测算;由此若设置了top值为非”0px”的事态,建议还要安装bottom值,不然五+
runtime依照高度百分百划算,恐怕会形成页面真实后面部分地方高出显示器范围的状态;left、right同理。

示范:Hello
mui的首页其实正是index.html加list.html合并而成的,如下:

美高梅开户网址 28

index.html的效率就是呈现固定导航,list.html显示具体列表内容,列表项的轮转是在list.html所在webview中选用原生滚动,既保险了滚动条不会穿彻底部导航,符合app的经验,也保险了列表流畅滚动,解决了区域滚动卡顿的题目。
list.html正是index.html的子页面,成立代码相比较轻巧,如下:

mui.init({
    subpages:[{
      url:'list.html',
      id:'list.html',
      styles:{
        top:'45px',//mui标题栏默认高度为45px;
        bottom:'0px'//默认为0px,可不定义;
      }
    }]
});

开采新页面

做web
app,几个无法躲避的难点就是转场动画;web是依据链接营造的,从一个页面点击链接跳转到另3个页面,借使经过有刷新的张开药方式,用户要直面1个空手的页面等待;假若通过无刷新的办法,用Javascript移入DOM节点(常见的SPA消除方案),会境遇极高的性格挑衅:DOM节点大多,页面太大,转场动画不通畅以至导致浏览器崩溃;
mui的消除思路是:单webview只承载单个页面包车型客车dom,收缩dom层级及页面大小;页面切换使用原生动画,将最耗质量的一些交给原生达成。

mui.openWindow({
    url:new-page-url,
    id:new-page-id,
    styles:{
      top:newpage-top-position,//新页面顶部位置
      bottom:newage-bottom-position,//新页面底部位置
      width:newpage-width,//新页面宽度,默认为100%
      height:newpage-height,//新页面高度,默认为100%
      ......
    },
    extras:{
      .....//自定义扩展参数,可以用来处理页面间传值
    },
    createNew:false,//是否重复创建同样id的webview,默认为false:不重复创建,直接显示
    show:{
      autoShow:true,//页面loaded事件发生后自动显示,默认为true
      aniShow:animationType,//页面显示动画,默认为”slide-in-right“;
      duration:animationTime//页面动画持续时间,Android平台默认100毫秒,iOS平台默认200毫秒;
    },
    waiting:{
      autoShow:true,//自动显示等待框,默认为true
      title:'正在加载...',//等待对话框上显示的提示内容
      options:{
        width:waiting-dialog-widht,//等待框背景区域宽度,默认根据内容自动计算合适宽度
        height:waiting-dialog-height,//等待框背景区域高度,默认根据内容自动计算合适高度
        ......
      }
    }
})

 

参数表明:

  • styles:表示窗口参数,参考5+标准中的WebviewStyle;越发注意,height和width七个属性,即便不设置,也私下认可按百分之百计算;因而若设置了top值为非”0px”的气象,建议还要设置bottom值,不然⑤+ runtime依照中度百分百盘算,大概会导致页面真实底部地点高出显示屏范围的图景,left、right同理。
  • extras:新窗口的附加扩充参数,可用来拍卖页面间传值;例如:

    var webview = mui.openWindow({ url:’info.html’, extras:{ name:’mui’ } }); console.log(webview.name);

支配台会输出”mui”字符串;

只顾:扩张参数仅在张开新窗口时有效,若目的窗口为预加载页面,则通过mui.openWindow方法张开时传递的extras参数无效。

  • createNew:是或不是再次创设同样id的webview;为优化质量、防止app中重新成立webview,mui
    v一.七.0早先增添createNew参数,默以为false;推断逻辑如下:若createNew为true,则不判断重复,每回都新建webview;若为fasle,则先总结当前App中是否已存在同样id的webview,若存在则一向显示;否则新成立并基于show参数实践显示逻辑;该参数大概导致的熏陶:若业务写在plusReady事件中,而plusReady事件仅第叁遍成立时会触发,则下次再也经过mui.openWindow方法打开同样webview时,是不会再也触发plusReady事件的,此时可通过自定义事件触发;
    • show:表示窗口体现调控。autoShow:目的窗口loaded事件爆发后,是还是不是自动突显;若目的页面为预加载页面,则该参数无效;aniShow表示页面显示动画,比方从左侧划入、从下侧划入等
    • waiting:表示系统等待框;mui框架在开发新页面时等待框的管理逻辑为:展现等待框–>创制目的页面webview–>目的页面loaded事件产生–>关闭等待框;由此,唯有当新页面为新成立页面(webview)时,会来得等待框,不然若为预加载好的页面,则一贯体现目的页面,不会显示等待框。waiting中的参数:autoShow代表自动展现等待框,默感到true,若为false,则不出示等待框;注意:若展现了等待框,但目的页面不自动展现,则需在对象页面中通过如下代码关闭等待框plus.nativeUI.closeWaiting();。title表示等待框上的晋升文字,options表示等待框展现参数,举例宽高、背景象、提醒文字颜色等

演示1:Hello
mui中,点击首页右上角的Logo,会打开关于页面,完成代码如下:

//tap为mui封装的单击事件,可参考手势事件章节
document.getElementById('info').addEventListener('tap', function() {
  //打开关于页面
  mui.openWindow({
    url: 'examples/info.html',
    id:'info'
  });
});

因未有传到styles参数,故暗许全屏展现;也未曾传来show参数,故使用slide-in-right动画,新页面从左侧滑入。

以身作则二:从A页面展开B页面,B页面为三个内需从服务端加载的列表页面,若在B页面loaded事件爆发时就将其出示出来,因服务器数据尚未加载完结,列表页面为空,用户体验不佳;可经过如下格局革新用户体验(最佳的用户体验应该是透过预加载的格局)

率先步,B页面loaded事件时有发生后,不自行展现

//A页面中打开B页面,设置show的autoShow为false,则B页面在其loaded事件发生后,不会自动显示;
mui.openWindow({
    url: 'B.html',
    show:{
      autoShow:false
    }
});

其次步,在B页面获取列表数据后,再关闭等待框、显示B页面

//B页面onload从服务器获取列表数据;
window.onload = function(){
  //从服务器获取数据
  ....
  //业务数据获取完毕,并已插入当前页面DOM;
  //注意:若为ajax请求,则需将如下代码放在处理完ajax响应数据之后;
  mui.plusReady(function(){
    //关闭等待框
    plus.nativeUI.closeWaiting();
    //显示当前页面
    mui.currentWebview.show();
  });

关门页面

mui框架将窗口关闭功用封装在mui.back方法中,具体试行逻辑是:

若当前webview为预加载页面,则hide当前webview;否则,close当前webview。

在mui框架中,有两种操作会触发页面关闭(实践mui.back方法)。

  • 点击包涵.mui-action-back类的控件
  • 在页面上,向右赶快滑动
  • Android手提式有线电话机按下back按钮

hbuilder中敲mheader生成的代码块,会自动生成带有再次来到导航箭头的标题栏,点击重回箭头可关闭当前页面,原因正是因为该重临箭头蕴涵.mui-action-back类,代码如下:

<header class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">标题</h1>
</header>

若希望在顶部导航栏之外的别样区域增加关闭页面包车型大巴控件,只须要在对应控件上添加.mui-action-back类就可以,如下为一个闭馆按键示例:

<button type=”button”
class=’mui-btn mui-btn-danger
mui-action-back’>关闭</button>

mui框架封装的页面右滑关闭功用,暗中认可未启用,若要使用右滑关闭功用,须要在mui.init();方法中设置swipeBack参数,如下:

mui.init({ swipeBack:true
//启用右滑关闭成效 });

mui框架私下认可会监听Android手提式有线电话机的back开关,然后施行页面关闭逻辑;
若不期望mui自动管理back按钮,可经过如下情势关闭mui的back按钮监听;

mui.init({ key伊夫ntBind: {
backbutton: false //关闭back开关监听 } });

除此之外以上二种操作外,也足以一直调用mui.back()方法,实践窗口关闭逻辑;mui.back()仅管理窗口逻辑,若希望在窗口关闭在此之前再管理部分别样事情逻辑,则可将事情逻辑抽象成一个具体函数,然后注册为mui.init方法的beforeback参数;beforeback的实行逻辑为:

举办beforeback参数对应的函数若重临false,则不再推行mui.back()方法;不然(再次回到true或无重回值),继续实践mui.back()方法;

演示:从列表张开详细情况页面,从详细情形页面再再次回到后希望刷新列表分界面,此时可登记beforeback参数,然后经过自定义事件通报列表页面刷新数据,示例代码如下:

mui.init({
    beforeback: function(){
        //获得列表界面的webview
        var list = plus.webview.getWebviewById('list');
        //触发列表界面的自定义事件(refresh),从而进行数据刷新
        mui.fire(list,'refresh');
        //返回true,继续页面关闭逻辑
        return true;
    }
});

留意:beforeback的试行回来必须是1道的(阻塞方式),若选取nativeUI那种异步js(非阻塞方式),则只怕会油不过生奇怪的结果;举个例子:通过plus.nativeUI.confirm()弹出确认框,大概用户并未有接纳,页面已经再次回到了(beforeback同步施行达成,无重返值,继续试行mui.back()方法,nativeUI不会阻塞js进程):在那种境况下,若要自定义业务逻辑,就需求复写mui.back方法了;如下为1个自定义示例,每回都急需用户确认后,才会关闭当前页面。

//备份mui.back,mui.back已将窗口关闭逻辑封装的比较完善(预加载及父子窗口),因此最好复用mui.back
var old_back = mui.back;
mui.back = function(){
  var btn = ["确定","取消"];
  mui.confirm('确认关闭当前窗口?','Hello MUI',btn,function(e){
    if(e.index==0){
        //执行mui封装好的窗口关闭逻辑;
        old_back();
    }
  });
}

留意:自定义关闭逻辑时,一定要重写mui.back,不能简单通过add伊芙ntListener增添back按钮监听,
因为add伊夫ntListener只会加多新的实践逻辑,老的监听逻辑依旧会推行。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图