apicloud学习（一）

apicloud学习

demo

移动端 apploader下载地址
https://docs.apicloud.com/Download/download
APICloud Studio WiFi真机同步和WiFi真机预览使用说明
https://docs.apicloud.com/Dev-Tools/wifi-debug

apicloud app的执行流程(初始化顺序)

widget->window->模块->事件队列->命令队列

运行的最小单位。app运行至少要有一个widget的实例。当主widget被关闭，整个app将会被关闭。

config.xml 配置文件

配置了一些权限信息

 <widget id="A6040838654101"  version="0.0.1">

    <name>apidemo</name>

    <description>

        Example For APICloud.

    </description>

    <author email="developer@apicloud.com" href="http://www.apicloud.com">

        Developer

    </author>

    <content src="index.html" />

    <access origin="*" />

    <preference name="pageBounce" value="false"/>

	<preference name="appBackground" value="rgba(0,0,0,0.0)"/>

	<preference name="windowBackground" value="rgba(0,0,0,0.0)"/>
		
	<preference name="frameBackgroundColor" value="rgba(0,0,0,0.0)"/>

	<preference name="hScrollBarEnabled" value="false"/>

	<preference name="vScrollBarEnabled" value="false"/>

	<preference name="autoLaunch" value="true"/>
	<!-- fullScreen 是否全屏 权限-->
	<preference name="fullScreen" value="false"/>

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

	<preference name="smartUpdate" value="false" />

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

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

	<permission name="readPhoneState" />
	<!-- camera 权限-->
	<permission name="camera" />

	<permission name="record" />

	<permission name="location" />

	<permission name="fileSystem" />

	<permission name="internet" />

	<permission name="bootCompleted" />

	<permission name="hardware" />
	<!-- 配置qq登录模块-->
  <feature  name="qq">
    <param  name="urlScheme" value="tecent111111" />
    <param  name="apiKey" value="1233333" />
  </feature>
</widget>

apicloud引擎的两个重要事件

content事件
apiready事件这个事件是在api对象准备完成后产生的？？？？？？？ api对象是什么玩意
api对象是apicloud 自己封装的一个对象，然后挂载到全局window对象下了。

需要在页面的javascript代码注册'apirady'事件

<!--index.html 首页-->
<script type="text/javascript">
    apiready = function() {
        //输出Log，Log将显示在APICloud Studio控制台
        console.log("Hello World! Hello APICloud!");

        var header = $api.dom('header'); // 获取 header 标签元素
        var footer = $api.dom('footer'); // 获取 footer 标签元素

        // 1.修复开启沉浸式效果带来的顶部Header与手机状态栏重合的问题，最新api.js方法已支持适配iPhoneX；
        // 2.默认已开启了沉浸式效果 config.xml中 <preference name="statusBarAppearance" value="true"/>
        // 3.沉浸式效果适配支持iOS7+，Android4.4+以上版本
        var headerH = $api.fixStatusBar(header);
        // 最新api.js为了适配iPhoneX增加的方法，修复底部Footer部分与iPhoneX的底部虚拟横条键重叠的问题；
        var footerH = $api.fixTabBar(footer);

        api.openFrame({
            name: 'main',
            url: 'html/main.html',
            bounces: true,
            rect: { // 推荐使用Margin布局，用于适配屏幕的动态变化
                marginTop: headerH, // main页面距离win顶部的高度
                marginBottom: footerH, // main页面距离win底部的高度
                w: 'auto' // main页面的宽度 自适应屏幕宽度
            }
        });

        // 获取当前年份时间，并加载显示到页面
        var year = $api.byId('year');
        year.innerHTML = new Date().getFullYear();
    };

</script>

apicloud的应用的ui组成结构

app包含5种基本ui组件

widget包含3种

window包含3种

layout 包含两种

frame只能包含uimodule

widget在ui上表现为一个独立的窗口容器(这个容器可以包含window,lagyout,uiModule)，widget可以互相调用，同一时刻有且只能有一个widget在界面上显示

打开： api.openWidget()
关闭： api.closeWidget()

Layout

用于实现某一种特定的布局效果，用于组织一组window或Frame来完成整体的界面布局效果。

打开 api.openFrameGroup()
关闭 api.closeFrameGroup()

Window

独立的Native窗口，独立的web容器，有其独立的dom树结构，并且可以独立进行渲染。window默认占满全屏幕(无法修改)

打开 api.openWin()
关闭 api.closeWin()

Frame

独立的Native视图。Frame的位置和宽高可通过参数进行配置。 Frame通常作为一个子视图，嵌入到Window或Layout中，Frame内部可以包含UIModule.

打开 api.openFrame();
关闭 api.closeFrame();

UIModule

有一组Native的视图组成，实现某种ui界面效果。每个ui模块都具有其独立的生命周期，界面布局，事件管理和数据交互。UI模块通常需要嵌入到Window.或Frame中使用。

加载UIModule api.require()
打开UIModule (以ScrollPicture 为例) UIScrollPicture.open();
关闭UIModule (以ScrollPicture 为例) UIScrollPicture.close();

apiCloud引擎的api对象(核心对象)

核心对象，可扩展,扩展需要api.require()扩展模块

//demo

apiready=function(){
	//打电话
  api.call({
  	type:"tel",
    number:"13340210295"
  })
  //窗口跳转
  api.openWin({
  	name:"my",  //这个被打开的Window的名字，以后可以通过这个名字操作这Window
    url:'./html/my.html'   //这个Window的HTML文件
  })
}

屏幕适配

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

$api对象

前端框架,封装了常用的dom操作和css样式。比如获取id $api.byId('xxxx');

状态栏处理

开启沉浸模式需要2个步骤

修改config.xml

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

对页面顶端元素使用$api.fixStatusBar(),就是给顶端元素添加padding-top样式。

apiready=function(){
	$api.fixStatusBar(
  	//传入要处理的顶端元素的id
    $api.byId('header');
  )
}

优化点击事件和tapmode

处理dom元素标注的onclick事件的300ms的响应延迟，使用tapmode属性

<div tapmode onclick="goBack()">返回</div>
<!--可以设置动态元素样式-->
<div tapmode="btn-press" onclick="goBack()">返回</div>

同时要调用js

api.parseTapmode()

静态页面的布局方法

使用HTML语义化标签，如header,nav section height footer
采用弹性响应式布局，配合流式布局
高度使用具有自适应特征的数值，如100%， flex, px, auto等。
高度优先使用px单位布局
结合css3的特性，如设置box-sizing ,例如 box-sizing:border-box
采用绝对定位，如 position:absolute;
布局需要使用兼容性写法

display: -webkit-box
display: -webkit-flex
display:flex

-webkit-box-flex:1;
-webkit-flex:1
flex:1

posted @ 2020-07-25 23:54 sprite5521 阅读(465) 评论(0) 收藏举报

刷新页面返回顶部

sprite5521