api 编辑 index.html,index.html

Hello APP

html,

body {

height: 100%;

}

.wrap {

display: -webkit-box;

-webkit-box-orient: vertical;

-webkit-flex-flow: column;

}

header {

height: 44px;

width: 100%;

text-align: center;

background-color: #81a9c3;

color: #fff;

line-height: 44px;

font-size: 20px;

}

.flex-1 {

-webkit-box-flex: 1;

-webkit-flex: 1;

}

footer {

height: 30px;

width: 100%;

background-color: #81a9c3;

color: white;

line-height: 30px;

text-align: center;

}

APICloud

Copyright ©

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中

// 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();

};

一键复制

编辑

Web IDE

原始数据

按行查看

历史