前  言

 博主最近在接触移动APP,学习了几个小技巧,和大家分享一下。

1. 状态栏设置

现在打开绝大多数APP,状态栏都是与APP一体,不仅美观,而且与整体协调。
博主是个中度强迫症患者,顶部那个小黑条实在让我不舒服。

首先,我们在HBuilder上新建一个移动APP项目

1.1沉浸式状态栏(状态栏透明)

一般整个页面是图片时,会使状态栏透明。

首先,检测当前环境是否支持沉浸式状态栏。检测语句:

<script type="text/javascript">
    document.addEventListener('plusready', function(){
        //是否支持沉浸式状态栏
        alert(plus.navigator.isImmersedStatusbar());

    });
</script>

默认是不支持的,会弹出false。想让环境支持,需要修改项目下的配置文件manifest.json

在项目下有个manifest.json文件,打开后,打开代码视图:

在代码视图"plus"下添加

        "statusbar": {
            "immersed": true
        },    

如图所示:

修改完成后,会弹出true,效果如下:

终端支持:

  • Android4.4及以上系统支持;

  • iOS7.0及以上系统支持

1.2状态栏全屏

状态栏全屏是没有状态栏,不显示电量、信号那一条。

这个效果是在JS文件中加入语句:

<script type="text/javascript">
    document.addEventListener('plusready', function(){
        //参数:true - 全屏;false - 不全屏
        plus.navigator.setFullscreen(true);

    });
</script>

效果如下:

1.3状态栏背景色

修改背景色一般用于页面顶部背景色为纯色的场景,修改成和页面一致的背景色,使页面更和谐。

//设置系统状态栏背景色
plus.navigator.setStatusBarBackground('#6495ED');

Android平台不支持此功能,如有大神,请多多指点。

2. 简单使用mui快速搭建页面

前面最困扰我的状态栏解决了,页面布局就好办了。用mui模板可以快速搭建出来。

以XX音乐为例;

2.1导入文件

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

2.2HTML代码

下面HTML代码为使用的mui框架部分和上述状态栏相关部分,这块mui是关于区域轮播部分

    <div id="background">
        <img src="img/GD.jpg" id="backImg"/>
    </div>

    <header class="mui-bar mui-bar-nav">
        <a class="mui-action-back mui-icon mui-pull-left"><img src="img/down.png"/>
        <a class=" mui-icon mui-pull-right"><img src="img/dian.png"/></a>
        <h1 class="mui-title">A Boy</h1>
    </header>

    <div id="continer">
        <div class="mui-slider">
             <div class="mui-slider-group">
                 <div class="mui-slider-item">
                    第一个轮播区域
                 </div>
<div class="mui-slider-item"> </div>
<div class="mui-slider-item"> 第二个轮播区域 </div> </div> <div class="mui-slider-indicator"> <div class="mui-indicator"></div> <div class="mui-indicator mui-active"></div> <div class="mui-indicator"></div> </div> </div>

还有100行左右的css代码,点一下以前没提到的图片模糊效果:

filter: blur(16px);
blur()中的像素是模糊程度。

显示下效果:

小q有话说

  博主写博客也是想提高自己,还请大神指教。

初入APP(结合mui框架进行页面搭建)的更多相关文章

  1. 【App FrameWork】框架的页面布局

    之前主要用JqueryMobile+PhoneGap的模式开发移动应用,但JQueryMobile自身存在的硬伤太多,如加载速度缓慢,页面转场白屏.闪烁,头尾部导航浮动问题,页面滚动等等,用户体验效果 ...

  2. 使用mui框架打开页面的几种不同方式

    1.创建子页面: list.html就是index.html的子页面,创建代码比较简单,如下: mui.init({ subpages: [{ url: 'list.html', //子页面HTML地 ...

  3. MUI框架开发HTML5手机APP(二)--页面跳转传值&底部选项卡切换

      概 述 JRedu 在上一篇博客中,我们学习了如何使用Hbuilder创建一个APP,同时如何使用MUI搭建属于自己的第一款APP,没有学习的同学可以戳链接学习: http://www.cnblo ...

  4. 跨平台移动端APP开发---简单高效的MUI框架

    MUI是dcloud(数字天堂)公司旗下的一款跨平台开发移动APP的框架产品,在学习MUI框架之前,最先接触了Hbuilder代码编辑器,它带给我的第一感觉是快,这是HBuilder的最大优势,通过完 ...

  5. 用mui框架开发手机app项目实践中的那些事儿

    http://www.yilingsj.com/xwzj/2015-04-29/260.html 最近在玩mui框架,坑的我是:西湖的水,全都是眼泪!!! 公司的手机app要进行改版,我率先想到的是j ...

  6. mui框架移动开发初体验

      前  言 博主最近在接触移动APP,学习了几个小技巧,和大家分享一下. 1. 状态栏设置 现在打开绝大多数APP,状态栏都是与APP一体,不仅美观,而且与整体协调.博主是个中度强迫症患者,顶部那个 ...

  7. MUI框架开发HTML5手机APP(一)--搭建第一个手机APP

      前  言 JRedu 随着HTML5的不断发展,移动开发成为主流趋势!越来越多的公司开始选择使用HTML5开发手机APP,而随着手机硬件设备配置的不断提升,各种开发框架的不断优化,也使着H5开发的 ...

  8. mui框架如何实现页面间传值

    mui框架如何实现页面间传值 我的传值 listDetail = '<li class="mui-table-view-cell mui-media>">< ...

  9. MUI框架开发HTML5手机APP(一)--搭建第一个手机APP(转)

    出处:http://www.cnblogs.com/jerehedu/p/7832808.html  前  言 JRedu 随着HTML5的不断发展,移动开发成为主流趋势!越来越多的公司开始选择使用H ...

随机推荐

  1. PHP常量定义define与const

    一.const PHP5.3以前,const只能在类内部声明变量,5.3+允许在外部声明变量,但还不能使用常量计算! const ONE = 1; const WORD = 'hello world' ...

  2. mysql 用多次查询代替一次复杂join查询的优点分析

    详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt344 多高性能的应用都会对关联查询进行分解.简单地,可以对每一个表进行一次单 ...

  3. 第1阶段——uboot分析之仿照bootm制作hello命令(7)

    仿照bootm命令生成来制作一个hello命令,功能:打印出hello,world!和参数值 1.点击New File ,创建cmd_hello.c将./common/cmd_bootm.c的头文件复 ...

  4. centos6/7通用查看系统版本

    查看centos6/7系统版本   要写一个centos系统的初始化脚本,但是centos6和centos7版本有很多命令都不相同,所以为了让脚本在两个版本之间都可以使用,就需要对centos系统版本 ...

  5. 字符编码笔记:ASCII,Unicode和UT…

    字符编码笔记:ASCII,Unicode和UTF-8 今天中午,我突然想搞清楚Unicode和UTF-8之间的关系,于是就开始在网上查资料. 结果,这个问题比我想象的复杂,从午饭后一直看到晚上9点,才 ...

  6. centos6 内核优化

     以下为部分优化参数,具体优化方法还要看情况而定 [root@localhost ~]# vi /etc/sysctl.conf    #末尾添加如下参数 net.ipv4.tcp_syncookie ...

  7. 团队作业4——第一次项目冲刺(Alpha版本) 日志集合处

    第一天(2017.4.23) http://www.cnblogs.com/1413none/p/6752325.html 第二天(2017.4.24) http://www.cnblogs.com/ ...

  8. java中synchronized的使用

    synchronized是Java中的关键字,是一种同步锁. synchronized分对象锁和类的锁两种. (一)通常synchronized 方法和synchronized(this){}都是属于 ...

  9. 201521123061 《Java程序设计》第十四周学习总结

    201521123061 <Java程序设计>第十四周学习总结 1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多数据库相关内容. 2. 书面作业 1. MySQL数据 ...

  10. C#中if_else以及for循环的简单理解

    if_else语句的语法: if(判断条件) { 执行语句 }else { 执行语句 } 判断条件位true执行if大括号的语句,false执行else大括号的语句. if_else的扩展: 连续判断 ...