APICloud学习一

一、基础知识

1.app的启动方式

用户手动启动
被其他app调用

启动后第一件事就是初始化引擎，会创建两个UI组件实例，分别是widget和window。widget是appcloud运行的最小单位，appcloud想要运行的话至少拥有一个widget实例，可以把Widget看做app本身。存在多个widget的情况下，最先初始化的主widget如果被关闭，整个app将会被关闭。

之后会在主widget创建一个根window对象，window即代表屏幕，任何可视化部分需要装载在某个window中，这里所说的window是对移动平台原生窗口概念的封装，可以提供原生的性能。window之后会装载一个html页面，也就是打开的第一个页面，可以通过config.xml配置。

  <content src="index.html" />

2.APICloud引擎的两个重要事件

content事件：
在引擎初始化完成后，App会去解析config.xml，打开它后找到 content这一行，它的参数index.html会被装载到刚刚被创建的window中。实际上在解析content标签时会触发一个content事件处理这个事件时参数中的html就被装载了。
apiready事件：
开发者应在页面javascript代码中注册apiready事件，示例如下

 apiready = function() {
        //输出Log，Log将显示在APICloud Studio控制台
        console.log("Hello World! Hello APICloud!");
        api.openWin({
          name: 'main',
          url: './html/main.html',
          pageParam:{
            name:"HELLOAPP"
            }
        });
    };

3.APICloud应用设计思想

其采用标准Web技术，但是与其他Web产品采用B/S架构不同，APICloud应用采用完整的Client/Cloud，及前后端分离的框架。App中所有的网页文件都存放在App本地，只有数据从服务器端获取，更明白一点就是在移动端实现界面和功能，在服务器端提供数据和服务。

4.App的UI架构设计（界面和导航）

在知道APICloud应用使用什么架构设计后，接下来一个非常重要的就是App的UI架构设计。 一个原生应用，无论是Android还是iOS的应用，都是由很多不同的窗口组成，窗口是ap界面展示的最小单位，通过一个个窗口的跳转和切换使整个App的界面和功能展示出来。
通常使用HTML5实现WebApp中，通过div切换来实现界面的切换，或者通过a标签实现界面的跳转。在使用HTML5技术开发APP的时候（注意不是WebApp），不管使用什么平台或者框架，不同的跨平台产品都有一套自己的UI组成结构。

5.APICloud应用的UI组成结构

一个APICloud应用可以包含Widget，Layout，Window，Frame和UIModule这五种UI类型的组件。

Widget可以包含Layout，Window，UIModule
Window可以包含Layout，Frame，UIModule
Layout可以包含Window，Frame
Frame可以包含UIModule

6.界面布局五大组件

1.Widget
应用运行管理的最小单位，Widget之间可以相互调用，同一时刻，应用中只能有一个Widget在界面上显示。

api.openWidget()
api.closeWidget()

2.Layout
旨在实现某一种特定的布局效果，通过定义好的布局组织一组Window或rame来完成整体的界面布局效果。

api.openFrameGroup()
api.closeFrameGroup()

3.Window
每一个App都由多个Window组成，可以独立进行渲染。Window的起点位于屏幕左上角，宽高占满屏幕，不可修改。

api.openWin()
api.closeWin()

4.Frame
大体与Window类似，但它的位置和宽高可以通过参数进行配置，Frame通常作为一个子视图，嵌入到Window或者Layout中。

api.openFrame()
api.closeFrame()

5.UIModule
旨在实现某种特定的UI界面效果，可以全屏展示，也可以只是局部区域。每一个UI模块都具有其独立的生命周期、界面布局、事件管理和数据交互。

加载UIModule：api.require()
打开（以UIScrollPicture为例）：UIScrollPicture.open()
关闭（以UIScrollPicture为例）：UIScrollPicture.close()

7.APICloud混合渲染模式

不理解，先空着。

8.APICloud引擎api对象功能

api对象是APICloud在全局作用域内唯一的一个扩展对象和核心对象，包含了开发一款App要用到的最基础功能，api对象无需引入，可以直接使用。APICloud的扩展模块，都需要通过api.require（）方法引入后才能使用。实现拨打电话功能代码如下

<script type="text/javascript">
    apiready = function() {
       api.call({
           type:"tel",
           number:'0000000000'
       })  
    };
</script>

9.屏幕适配

 <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width" />

每个HTML页面的head标签中都有如上代码，它的作用是声明该HTML页面执行时的渲染区域宽度为设备的屏幕可视区域，不作任何缩放，同时禁用缩放功能。

10.前端框架

前端框架提供了常用的dom操作封装和css样式，保存在项目的根目录下script/api.js和css/api.css中，前端框架通过 $ api（和之前的api不同）访问。如 $ api.byId(‘xxx’)来根据id获取dom元素。
下面的代码将id为"main"的dom元素的内容设置为“Hello APICloud”，示例如下

<script type="text/javascript">
    apiready = function() {
       $api.html(
           $api.byId("main"),
           "Hello APICloud"
       );
    }
</script>

11.状态栏处理

1.非沉浸式状态栏，状态栏与App互相分离
2.沉浸式状态栏，状态栏背景与App融合

沉浸式需要开启两个步骤：
首先修改config.xml，实现如下代码

	<preference name="statusBarAppearance" value="true"/>

然后对页面顶端元素使用 $api.fixStatusBar(),开启沉浸状态后，页面会渗入到状态栏下方，此时如果有页面元素显示在顶端会被遮挡。对于被遮挡的元素调用 $api.fixStatusBar()会为这个元素添加padding-top样式。

<script type="text/javascript">
    apiready = function() {
        $api.fixStatusBar(
            $api.byId("header")
        );
    }
</script>

12.优化点击事件和tapmode

为解决响应延迟问题，提供快速点击响应，需要在点击发生的元素上添加tapmode属性。

    <div class="right" tapmode onclick="fnOpenPersonCenterWin();">个人中心</div>

如果动态创建了包含tapmode的元素，之后需要调用下面的代码使之生效：

api.parseTapmode()

另外，tapmode属性支持css样式及动态改变元素样式，实现Native的点击效果。

 <div class="btn" tapmode="btn-press" onclick="goback()">返回</div>

当返回按钮被用户点击，处于按下状态时，此DIV元素将叠加使用“btn-press”样式进行渲染，当用户手指离开屏幕后，此DIV元素样式将恢复至默认，即移除“btn-press”样式。

13.静态页面中建议遵循的布局方法

使用HTML语义化标签，如header，nav，section，height，footer。

采用弹性响应式布局，配合流式布局。

宽度使用具有自适应特征的数值，如100%、flex、px、auto等。

高度优先采用px单位布局。

采用绝对定位，如position：absolute。

待补充

14.模块引用方法

（1）观看模块文档是否需要在config.xml中配置。
（2）在控制台添加模块
（3）重新自定义loader编译，才能使用模块

二、Demo案例实现

项目开源地址：点击这里

1.header部分

（1）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,initial-scale=1.0,width=device-width" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>Hello APP</title>
    <link rel="stylesheet" type="text/css" href="./css/api.css" />
    <style type="text/css">
        
    </style>
</head>

<body>
   
</body>
<script type="text/javascript" src="./script/api.js"></script>
<script type="text/javascript">
    apiready = function() {
        api.openWin({
            name: 'main',
            url: './html/main.html'
        });
      
    };

</script>

</html>

（2）main.html
在body中插入

 <header id="header">
        <div class="left">
            <div class="arrow" id="arrow"></div>
            <div class="city" id="city">北京市</div>
        </div>
        <div class="center"></div>
        <div class="right"></div>
    </header>

在style中插入

 <style>
    header {
        /* position: relative; */
        width: 100%;
        height: 50px;
        background-color: #e1017e;
    }

    header .left {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100px;
        height: 50px;
    }

    header .left .arrow {
        position: absolute;
        bottom: 21px;
        left: 11px;
        width: 13px;
        height: 8px;
        background: url(../image/arrow_down.png);
        background-size: 13px 8px;
        background-position: center center;
        background-repeat: no-repeat;
        -webkit-transition: 200ms;
        transition: 200ms;
    }

    header .left .arrow.active {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }

    header .left .city {
        position: relative;
        z-index: 2;
        width: 100%;
        height: 50px;
        padding-left: 27px;
        /* box-sizing: border-box; */
        line-height: 50px;
        font-size: 14px;
        color: #fff;
        text-align: left;
    }

    header .center {
        /* position: relative; */
        width: 100%;
        height: 50px;
        background: url(../image/home_title.png);
        background-size: 74px 19px;
        background-position: center center;
        background-repeat: no-repeat;
    }

    header .right {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 40px;
        height: 50px;
        background: url(../image/home_membercenter.png);
        background-size: 30px 30px;
        background-position: center center;
        background-repeat: no-repeat;
    }
    </style>

（3）实现Tab标签组
在body中插入

 <nav id="nav">
        <div class="menu selected">水果</div>
        <div class="menu">食材</div>
        <div class="menu">零食</div>
        <div class="menu">牛奶</div>
        <div class="menu">蔬菜</div>
    </nav>

在style中插入

nav {
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-flex-flow: row;
        flex-flow: row;
        position: relative;
        /* width: 100%; */
        height: 40px;
        background-color: #e1017e;
    }

    nav .menu {
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        flex: 1;
        width: 100%;
        height: 40px;
        line-height: 40px;
        font-size: 13px;
        color: #f973b8;
        text-align: center;
    }

    nav .menu.selected {
        font-size: 14px;
        color: #fff;
        font-weight: bolder;
    }

运行效果：