初入APP(结合mui框架进行页面搭建)
前 言
博主最近在接触移动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框架进行页面搭建)的更多相关文章
- 【App FrameWork】框架的页面布局
之前主要用JqueryMobile+PhoneGap的模式开发移动应用,但JQueryMobile自身存在的硬伤太多,如加载速度缓慢,页面转场白屏.闪烁,头尾部导航浮动问题,页面滚动等等,用户体验效果 ...
- 使用mui框架打开页面的几种不同方式
1.创建子页面: list.html就是index.html的子页面,创建代码比较简单,如下: mui.init({ subpages: [{ url: 'list.html', //子页面HTML地 ...
- MUI框架开发HTML5手机APP(二)--页面跳转传值&底部选项卡切换
概 述 JRedu 在上一篇博客中,我们学习了如何使用Hbuilder创建一个APP,同时如何使用MUI搭建属于自己的第一款APP,没有学习的同学可以戳链接学习: http://www.cnblo ...
- 跨平台移动端APP开发---简单高效的MUI框架
MUI是dcloud(数字天堂)公司旗下的一款跨平台开发移动APP的框架产品,在学习MUI框架之前,最先接触了Hbuilder代码编辑器,它带给我的第一感觉是快,这是HBuilder的最大优势,通过完 ...
- 用mui框架开发手机app项目实践中的那些事儿
http://www.yilingsj.com/xwzj/2015-04-29/260.html 最近在玩mui框架,坑的我是:西湖的水,全都是眼泪!!! 公司的手机app要进行改版,我率先想到的是j ...
- mui框架移动开发初体验
前 言 博主最近在接触移动APP,学习了几个小技巧,和大家分享一下. 1. 状态栏设置 现在打开绝大多数APP,状态栏都是与APP一体,不仅美观,而且与整体协调.博主是个中度强迫症患者,顶部那个 ...
- MUI框架开发HTML5手机APP(一)--搭建第一个手机APP
前 言 JRedu 随着HTML5的不断发展,移动开发成为主流趋势!越来越多的公司开始选择使用HTML5开发手机APP,而随着手机硬件设备配置的不断提升,各种开发框架的不断优化,也使着H5开发的 ...
- mui框架如何实现页面间传值
mui框架如何实现页面间传值 我的传值 listDetail = '<li class="mui-table-view-cell mui-media>">< ...
- MUI框架开发HTML5手机APP(一)--搭建第一个手机APP(转)
出处:http://www.cnblogs.com/jerehedu/p/7832808.html 前 言 JRedu 随着HTML5的不断发展,移动开发成为主流趋势!越来越多的公司开始选择使用H ...
随机推荐
- PHP常量定义define与const
一.const PHP5.3以前,const只能在类内部声明变量,5.3+允许在外部声明变量,但还不能使用常量计算! const ONE = 1; const WORD = 'hello world' ...
- mysql 用多次查询代替一次复杂join查询的优点分析
详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt344 多高性能的应用都会对关联查询进行分解.简单地,可以对每一个表进行一次单 ...
- 第1阶段——uboot分析之仿照bootm制作hello命令(7)
仿照bootm命令生成来制作一个hello命令,功能:打印出hello,world!和参数值 1.点击New File ,创建cmd_hello.c将./common/cmd_bootm.c的头文件复 ...
- centos6/7通用查看系统版本
查看centos6/7系统版本 要写一个centos系统的初始化脚本,但是centos6和centos7版本有很多命令都不相同,所以为了让脚本在两个版本之间都可以使用,就需要对centos系统版本 ...
- 字符编码笔记:ASCII,Unicode和UT…
字符编码笔记:ASCII,Unicode和UTF-8 今天中午,我突然想搞清楚Unicode和UTF-8之间的关系,于是就开始在网上查资料. 结果,这个问题比我想象的复杂,从午饭后一直看到晚上9点,才 ...
- centos6 内核优化
以下为部分优化参数,具体优化方法还要看情况而定 [root@localhost ~]# vi /etc/sysctl.conf #末尾添加如下参数 net.ipv4.tcp_syncookie ...
- 团队作业4——第一次项目冲刺(Alpha版本) 日志集合处
第一天(2017.4.23) http://www.cnblogs.com/1413none/p/6752325.html 第二天(2017.4.24) http://www.cnblogs.com/ ...
- java中synchronized的使用
synchronized是Java中的关键字,是一种同步锁. synchronized分对象锁和类的锁两种. (一)通常synchronized 方法和synchronized(this){}都是属于 ...
- 201521123061 《Java程序设计》第十四周学习总结
201521123061 <Java程序设计>第十四周学习总结 1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多数据库相关内容. 2. 书面作业 1. MySQL数据 ...
- C#中if_else以及for循环的简单理解
if_else语句的语法: if(判断条件) { 执行语句 }else { 执行语句 } 判断条件位true执行if大括号的语句,false执行else大括号的语句. if_else的扩展: 连续判断 ...