APICloud之小白图解教程系列(二):APICloud Studio的使用和布局
发布在APICloud移动应用开发平台2015年11月2日view:2931
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

继《APICloud之小白图解教程系列(一):认识APICloud》之后的第二篇教程。

本篇教程有以下知识点:

1、APICloud Studio的介绍和常用快捷键的使用
2、认识APP中的”流“布局,也就是CSS3的Flex布局
3、优化官方的fixStatusBar方法,实现兼容性状态栏处理!

工欲善其事,必先利其器:APICloud Studio的使用介绍及常用快捷键使用

APICloud Studio是官方推荐IDE编辑器,也就是我们开发APP的软件工具,内置了调试,编译,文档,提示,实时预览等功能,可以帮助我们快速的开发APP。该软件的使用也不用多说,现在给大家介绍一下APICloud Studio一些常用的快捷键,可以帮助大家快速开发。首先我下载的是2015年10月16号最新的包,版本为:APICloud_SDK_v1.1.41。APICloud Studio的版本为:APICloud-Studio_1.2.2。

常用快捷键有:

Ctrl+Z:撤销
Ctrl+N:创建项目或文件
Ctrl+Shift+F:代码格式化(这个经常用,可以美化代码,也可以通过这个检查代码是否出错)
Ctrl+/ :注释和反注释
Alt+/:强制代码提示
Ctrl+D:剪切该行
Ctrl+R:真机运行(常用)
Ctrl+W:编译自定义Loader(常用)
Ctrl+Y:反撤销
Ctrl+L:跳到改行(注意,如果需要在IDE中显示行号,只需要在代码区域的最左边右键显示行号就可以了)
Ctrl+S:保存
Ctrl+F:搜索
Ctrl+H:搜索替换
Ctrl+M:最大化或最小化当前焦点区域,比如像最大化代码区域或者工程目录区域,只需要在该区域空白地方点一下,就可以通过它最大化最小化了
Ctrl+C:复制
Ctrl+V:黏贴
Ctrl+E:快速切换已经的标签(常用)
Shift+Enter:在当前光标下面新增一行,无需把光标放在最后面Enter,(这个非常常用,极大提高编程速度)
Ctrl+Shift+Enter:在当前光标上面添加新增一行(这个非常常用,极大提高编程速度)
Ctrl+Shift+E:切换当前文件,(非常常用,可以快速从一个页面切换到另一个页面编辑器)
Ctrl+Shift+R:全局搜索所有文件并快速打开(这个很牛逼,可以全局搜索项目中有哪些文件,然后直接打开,非常实用,这样找文件就非常容易了!)
Ctrl+Shift+W:关闭所有页面
Ctrl+Shift+L:显示所有快捷键的操作,再也不怕忘记快捷键了

流布局:目前非常火的前端开发布局方式

移动开发布局最火的就是Flexbox流布局,也叫伸缩布局。详细教程可以看:http://www.w3cplus.com/css3/css3-flexbox-layout.html 好了,现在我们就用流行的流布局构建我们的APP最基本的页面了

1、新建APICloud项目:目前我们就新建一个APICloud的项目,模板选空白应用(我们要从基本的布局开始学习):如图所示: enter image description here

2、更新并提交代码(养成这个习惯),如图所示 enter image description here

3、删除默认的代码,保留干净的编辑环境,保留css,和js文件!如图所示: enter image description here

4、实现简单的APP页面三栏布局,如图所示: enter image description here

大家观察上面图片,可以清楚看出三块结构,那我们应该创建一个父容器包裹着三个div(头,中间,底)(推荐使用div+css布局哦,table就不推荐了!)表示,如:

<div id="web-view">
                        <div id="header">
                                我是头部
                        </div>
                        <div id="main"></div>
                        <div id="footer"></div>
                </div>
复制代码

2、添加CSS样式,将id为main的区域变为自动伸缩布局,头和尾部固定,样式如下:

<style type="text/css">
                        /*必须设置这个属性*/
                        html, body {
                                height: 100%;
                        }
                        #web-view {
                                display: -webkit-box;
                                display: -webkit-flex;
                                display: flex;
                                /* 下面三个控制子div的显示方式,是垂直显示 */
                                -webkit-box-orient: vertical;
                                -webkit-flex-flow: column;
                                flex-flow: column;
                                /* 上面三个控制子div的显示方式,是垂直显示 */
                                height: 100%;
                                /*===== 如果想让div水平排布,可以使用下面代码 ====*/
                                /*-webkit-box-orient: horizontal;
                                 -webkit-flex-flow: row;
                                 flex-flow: row;
                                 width: 100%;*/
                        }
                        #header {
                                height: 44px;/*固定头部 */
                                background: #f00;
                                text-align: center;
                                line-height: 44px;
                                color: #fff;
                        }
                        #footer {
                                height: 50px;/*固定尾部*/
                                background: #00f;
                        }
                        #main {
                                /*设置main为伸缩布局*/
                                -webkit-box-flex: 1;
                                -webkit-flex: 1;
                                flex: 1;
                                background: #00f;
                        }
                </style>
复制代码

图片如下:
enter image description here 好了,简单的三栏布局以及完毕。

5、在Index页面创建Frame,也就是在Main区域打开。在打开之前先说明一些注意的东西,我相信很多朋友在学习的时候都碰到过IOS或Android状态栏遮住问题,或者想实现状态栏沉浸式效果,那你需要做下面几件事情:

1)、在根目录下面的config.xml配置文件中添加以下代码:

  <preference name="statusBarAppearance" value="true"/>
  <preference name="iOS7StatusBarAppearance" value="true"/>
  <preference name="softInputMode" value="resize"/>
复制代码

2)优化官方的fixStatusBar代码,通过这个代码就可以兼容以前版本和未来版本状态栏问题!包括IOS和Android版本!

// 解决状态栏重合,并优化fixStatusBar代码,Android4.4版本以上添加25px
                function fixStatusBar(headerid, callback) {
                        var header = $api.byId(headerid);
                        var systemType = api.systemType;
                        var systemVersion = parseFloat(api.systemVersion);
                        if (systemType == "ios" || (systemType == "android" && systemVersion >= 4.4)) {
                                if (systemType == "android") {
                                        header.style.paddingTop = '25px';
                                }
                                $api.fixStatusBar(header);
                        } else {
                                $api.fixIos7Bar(header);
                        }
                        var headerPos = $api.offset(header);
                        if ( typeof callback == "function") {
                                callback(headerPos);
                        }
                }
复制代码

3)创建并打开main框架,也就是页面的主体

apiready = function() {
                        // 获取底部的高度
                        var footer = $api.byId("footer");
                        var footerPos = $api.offset(footer);
                        fixStatusBar("header", function(headerPos) {
                                api.openFrame({
                                        name : 'main',
                                        url : './html/main.html',
                                        rect : {
                                                x : 0,
                                                y : headerPos.h,
                                                w : api.winWidth,
                                                h : api.winHeight - headerPos.h - footerPos.h // footerPos.h是底部的高度,也可以直接获取main的高度
                                        },
                                        pageParam : {
                                        },
                                        bounces : true,
                                        bgColor : 'rgba(0,0,0,0)',
                                        vScrollBarEnabled : false,
                                        hScrollBarEnabled : false
                                });
                        });
                };
复制代码

6、直接使用快捷的Ctrl+R真机运行就可以看到效果了。如果想看沉浸式的效果,可以云编译或者编译自定义Loader使用(快捷键为Ctrl+W),新版本直接真机调试也可以看到了。,如下图: enter image description here

好了简单的布局页面完成。 首页index.html所有的代码:

<!doctype html>
<html>
        <head>
                <meta charset="utf-8">
                <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
                <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
                <title>小白之路</title>
                <link rel="stylesheet" type="text/css" href="./css/api.css" />
                <style type="text/css">
                        /*必须设置这个属性*/
                        html, body {
                                height: 100%;
                        }
                        #web-view {
                                display: -webkit-box;
                                display: -webkit-flex;
                                display: flex;
                                /* 下面三个控制子div的显示方式,是垂直显示 */
                                -webkit-box-orient: vertical;
                                -webkit-flex-flow: column;
                                flex-flow: column;
                                /* 上面三个控制子div的显示方式,是垂直显示 */
                                height: 100%;
                                /*===== 如果想让div水平排布,可以使用下面代码 ====*/
                                /*-webkit-box-orient: horizontal;
                                 -webkit-flex-flow: row;
                                 flex-flow: row;
                                 width: 100%;*/
                        }
                        #header {
                                height: 44px;/*固定头部 */
                                background: #f00;
                                text-align: center;
                                line-height: 44px;
                                color: #fff;
                        }
                        #footer {
                                height: 50px;/*固定尾部*/
                                background: #00f;
                        }
                        #main {
                                /*设置main为伸缩布局*/
                                -webkit-box-flex: 1;
                                -webkit-flex: 1;
                                flex: 1;
                                background: #0f0;
                        }
                </style>
        </head>
        <body>
                <div id="web-view">
                        <div id="header">
                                我是头部
                        </div>
                        <div id="main"></div>
                        <div id="footer"></div>
                </div>
        </body>
        <script type="text/javascript" src="./script/api.js"></script>
        <script type="text/javascript">
                // 解决状态栏重合,并优化fixStatusBar代码,Android4.4版本以上添加25px
                function fixStatusBar(headerid, callback) {
                        var header = $api.byId(headerid);
                        var systemType = api.systemType;
                        var systemVersion = parseFloat(api.systemVersion);
                        if (systemType == "ios" || (systemType == "android" && systemVersion >= 4.4)) {
                                if (systemType == "android") {
                                        header.style.paddingTop = '25px';
                                }
                                $api.fixStatusBar(header);
                        } else {
                                $api.fixIos7Bar(header);
                        }
                        var headerPos = $api.offset(header);
                        if ( typeof callback == "function") {
                                callback(headerPos);
                        }
                }

                apiready = function() {
                        // 获取底部的高度
                        var footer = $api.byId("footer");
                        var footerPos = $api.offset(footer);
                        fixStatusBar("header", function(headerPos) {
                                api.openFrame({
                                        name : 'main',
                                        url : './html/main.html',
                                        rect : {
                                                x : 0,
                                                y : headerPos.h,
                                                w : api.winWidth,
                                                h : api.winHeight - headerPos.h - footerPos.h // footerPos.h是底部的高度,也可以直接获取main的高度
                                        },
                                        pageParam : {
                                        },
                                        bounces : true,
                                        bgColor : 'rgba(0,0,0,0)',
                                        vScrollBarEnabled : false,
                                        hScrollBarEnabled : false
                                });
                        });
                };
        </script>
</html>
复制代码

原文链接:http://community.apicloud.com/bbs/forum.php?mod=viewthread&tid=15949

评论
发表评论
暂无评论
WRITTEN BY
PUBLISHED IN
APICloud移动应用开发平台
  • 7天开发APP,重新定义移动应用开发。
  • 可以帮助开发者快速实现移动应用的开发、测试、发布、管理和运营的全生命周期管理。
  • 云API:减少70%服务器端编码工作量,同时提供推送、云修复、大数据分析等服务。
  • 端API:“积木拼装”式的开发跨平台APP,为APP开发者提供大量优质的原生模块,涵盖UI、系统、交互、影音、支付等类型的原生模块。
  • 模块store:“模块Store”通过提供“1+1”的服务(一站式+一键集成),让APP开发以及第三方服务SDK的集成变得非常简单,可以像逛超市一样在APICloud“模块Store”挑选自己中意的第三方服务,只需在线一键绑定,就可以实现不同服务的快速集成。
  • 官方网站:www.apicloud.com

我的收藏