前  言 博主最近在接触移动APP,学习了几个小技巧,和大家分享一下. 1. 状态栏设置 现在打开绝大多数APP,状态栏都是与APP一体,不仅美观,而且与整体协调.博主是个中度强迫症患者,顶部那个小黑条实在让我不舒服. 首先,我们在HBuilder上新建一个移动APP项目 1.1沉浸式状态栏(状态栏透明) 一般整个页面是图片时,会使状态栏透明. 首先,检测当前环境是否支持沉浸式状态栏.检测语句: <script type="text/javascript"> docum…
之前主要用JqueryMobile+PhoneGap的模式开发移动应用,但JQueryMobile自身存在的硬伤太多,如加载速度缓慢,页面转场白屏.闪烁,头尾部导航浮动问题,页面滚动等等,用户体验效果不太好,从而开始研究一种新的前端框架-App FrameWork,也就是JQ.Mobi. App FrameWork是基于HTML5重写的jQuery框架,对其进行了简化,更有利于在移动设备上应用,并且速度比较流畅. App FrameWork官方网站:http://app-framework-so…
1.创建子页面: list.html就是index.html的子页面,创建代码比较简单,如下: mui.init({ subpages: [{ url: 'list.html', //子页面HTML地址,支持本地地址和网络地址 id: 'list.html', //子页面标志 styles: { top:45px , //mui标题栏默认高度为45px bottom:0px , //子页面底部位置 }, }] }); 2.打开新页面 mui.openWindow({ url: new - pag…
  概 述 JRedu 在上一篇博客中,我们学习了如何使用Hbuilder创建一个APP,同时如何使用MUI搭建属于自己的第一款APP,没有学习的同学可以戳链接学习: http://www.cnblogs.com/jerehedu/p/7832808.html 今天这篇博客,我们继续深入学习MUI框架,主要学习这几个方面:加载子页面.页面跳转并传值,底部选项卡的多种实现方式. 一.MUI加载子页面 1加载子页面详解 在mobile app开发过程中,经常遇到卡头卡尾的页面,也就是说头部和尾部保持…
MUI是dcloud(数字天堂)公司旗下的一款跨平台开发移动APP的框架产品,在学习MUI框架之前,最先接触了Hbuilder代码编辑器,它带给我的第一感觉是快,这是HBuilder的最大优势,通过完整的语法提示和代码输入法.代码块等,大幅提升HTML .JS.css的开发效率.  01-初识MUI   MUI 有以下两大亮点: 一.轻量 追求性能体验,是我们开始启动MUI项目的首要目标,轻量必然是重要特征: MUI不依赖任何第三方JS库,压缩后的JS和CSS文件仅有100+K和60+K 二.原…
http://www.yilingsj.com/xwzj/2015-04-29/260.html 最近在玩mui框架,坑的我是:西湖的水,全都是眼泪!!! 公司的手机app要进行改版,我率先想到的是jquery mobile,但是,我却放弃了jquery mobile而选择了MUI,现在还真有点小小小后悔.(注:关于jquery mobile做手机页面的心得以后有空再进行单独写文章进行分享.) 当我第一眼看到mui时,我就已经深深地喜欢上了她,界面简洁.清爽.如图: mui的功能也是比较多的,但…
  前  言 博主最近在接触移动APP,学习了几个小技巧,和大家分享一下. 1. 状态栏设置 现在打开绝大多数APP,状态栏都是与APP一体,不仅美观,而且与整体协调.博主是个中度强迫症患者,顶部那个小黑条实在让我不舒服. 首先,我们在HBuilder上新建一个移动APP项目 1.1沉浸式状态栏(状态栏透明) 一般整个页面是图片时,会使状态栏透明. 首先,检测当前环境是否支持沉浸式状态栏.检测语句: <script type="text/javascript"> docum…
  前  言 JRedu 随着HTML5的不断发展,移动开发成为主流趋势!越来越多的公司开始选择使用HTML5开发手机APP,而随着手机硬件设备配置的不断提升,各种开发框架的不断优化,也使着H5开发的混合APP的体验越来越趋于原生!那么在本系列博客中,我们就来一探H5开发APP的神秘面纱吧~~ 一. 移动APP项目搭建 由于我们的H5编写的都是一个个网页,需要使用浏览器打开才能使用,这显然不是APP的使用方式. 那么我们才能将一个手机网站,封装成一个APP呢? 时下热门的Cordova.Phon…
mui框架如何实现页面间传值 我的传值 listDetail = '<li class="mui-table-view-cell mui-media>"><a href="aJaxDetail.html?'+arrayobj[i].id+'"><div class="mui-media-body">'+arrayobj[i].digest+'</div></a>></l…
出处:http://www.cnblogs.com/jerehedu/p/7832808.html  前  言 JRedu 随着HTML5的不断发展,移动开发成为主流趋势!越来越多的公司开始选择使用HTML5开发手机APP,而随着手机硬件设备配置的不断提升,各种开发框架的不断优化,也使着H5开发的混合APP的体验越来越趋于原生!那么在本系列博客中,我们就来一探H5开发APP的神秘面纱吧~~ 一. 移动APP项目搭建 由于我们的H5编写的都是一个个网页,需要使用浏览器打开才能使用,这显然不是APP…