1、openFrameGroup APICloud参考文档
https://docs.apicloud.com/Client-API/api#28
打开一组窗口，首页和子页面的容器
（1）定义容器
{
x:0, //左上角x坐标
y:0, //左上角y坐标
w:320, //宽度，若传'auto'，页面从x位置开始自动充满父页面宽度
h:480， //高度，若传'auto'，页面从y位置开始自动充满父页面高度
marginLeft:0, //相对父window左外边距的距离
marginTop:0, //相对父window上外边距的距离
marginBottom:0, //相对父window下外边距的距离
marginRight:0 //相对父window右外边距的距离
}
（2）相关参数：
[{
name:'', //frame名字，字符串类型，不能为空字符串
url:'', //页面地址，可以为本地文件路径，支持相对路径和绝对路径，以及 widget://、fs://等协议路径，也可以为远程地址。 当data参数不为空时，url将做为baseUrl，data中的html引用的资源文件根路径以该url为基础。字符串类型
data:'', //（可选项）页面加载的数据内容，可以为html片段或者整张html文件的数据
headers:{}, //（可选项）请求头
useWKWebView:false, //（可选项）是否使用WKWebView来加载页面。WKWebView具有Safari相同的JavaScript引擎，支持更多的HTML5特性，相比于UIWebView，在性能和功能方面都有很大提升。只支持iOS8.0及以上系统。注意使用WKWebView的页面localStorage有兼容性问题，建议使用Prefs代替。
historyGestureEnabled:false, //（可选项）是否可以通过手势来进行历史记录前进后退，只在useWKWebView参数为true时有效。
pageParam:{}, //（可选项）页面参数，页面中可以通过api.pageParam获取，JSON对象
bounces:true, //（可选项）是否弹动，布尔型，默认值：若在 config.xml 里面配置了pageBounce，则默认值为配置的值，否则为true。注意如果页面使用了上拉、下拉刷新等功能，该属性可能会被刷新组件重新设置。
bgColor:'#fff', //（可选项）背景色，支持图片和颜色，格式为#fff、#ffffff、rgba(r,g,b,a)等，图片路径支持fs://、widget://等APICloud自定义文件路径协议，同时支持相对路径
scrollToTop:true //（可选项）当点击状态栏，页面是否滚动到顶部。若当前屏幕上不止一个页面的scrollToTop属性为true，则所有的都不会起作用。默认值：true。只iOS有效
scrollEnabled:true //（可选项）页面内容超出后是否可以滚动，默认为true，只支持iOS
vScrollBarEnabled:true, //（可选项）是否显示垂直滚动条，布尔型，默认值：true
hScrollBarEnabled:false, //（可选项）是否显示水平滚动条，布尔型，默认值：false
scaleEnabled:true, //（可选项）页面是否可以缩放，布尔型，默认值：false
allowEdit:false, //（可选项）是否允许长按页面时弹出选择菜单
softInputMode:'auto' //（可选项）当键盘弹出时，输入框被盖住时，当前页面的调整方式，只iOS有效。
//取值范围：
//resize //若键盘盖住输入框，页面会自动上移
//pan //若键盘盖住输入框，页面不会自动上移
//auto //默认值，由系统决定如何处理，iOS平台该字段等同于resize
softInputBarEnabled:false, //（可选项）是否显示键盘上方的工具条，布尔型，默认值：true，只iOS有效
overScrollMode, //（可选项）设置页面滚动到头部或尾部时，显示回弹阴影效果的模式，仅Android有效。取值范围：never，always，scrolls
customRefreshHeader:'' //（可选项）设置使用自定义下拉刷新模块的名称，设置后可以使用api.setCustomRefreshHeaderInfo方法来使用自定义下拉刷新组件
}]
（3）示例代码
api.openFrameGroup({
name: 'group1',
rect: {
x: 0,
y: 0,
w: 'auto',
h: 'auto'
},
frames: [{
name: 'frame1',
url: 'frame1.html',
bgColor: '#fff'
}, {
name: 'frame2',
url: 'frame2.html',
bgColor: '#fff'
}]
}, function(ret, err) {
var index = ret.index;
});
2、脚手架首页代码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>商城APP</title>
<link rel="stylesheet" type="text/css" href="css/ali-icon/iconfont.css"/>
<link rel="stylesheet" type="text/css" href="css/aui.css"/>
<link rel="stylesheet" type="text/css" href="css/public.css"/>
<style>
.disnone {
display: none;
}
.disblock {
display: block;
}
.active-danger span {
color: #c0392b;
}
.iconfont {
font-size: 22px;
color: #8f8f94;
padding-top: 5px;
height: 30px;
line-height: 30px;
display: inline-block;
position: relative;
}
.header-c{
overflow: hidden;
}
.head-left {
width: 90%;
height: 30px;
background: #E64E36;
line-height: 30px;
margin: 8px auto 0px auto;
color: #fff;
text-align: left;
padding: 0 20px;
border-radius: 5px;
font-size: 14px;
}
.head-left .aui-iconfont {
color: #fff;
line-height: 30px;
margin-right: 5px;
font-size: 14px;;
}
.aui-badge {
top: 0.1rem;
left: 100%;
}
.active-danger span {
color: #F35748;
}
.active-danger p {
color: #F35748 !important;
}
</style>
</head>
<body>
<div id="app">
<header class="aui-bar aui-bar-nav disnone" style="background: #F35748;"
v-for="(vo,index) in list"
v-bind:class="{'disblock': cou_index== index}">
<div class="aui-clearfix header-c" v-if="index < 2">
<div class="aui-col-xs-10" onclick="open_search()" >
<div class="head-left">
<i class="aui-iconfont aui-icon-search"></i>请输入关键字
</div>
</div>
<div class="aui-col-xs-2 aui-pull-right">
<i class="aui-iconfont aui-icon-message" onclick="openWin('member','info')" style="color:#fff"></i>
</div>
</div>
<div class="aui-clearfix header-c" v-if="index>1">
<div class="aui-title" >{{vo.title}}</div>
<div class="aui-col-xs-2 aui-pull-right">
<i class="aui-iconfont aui-icon-message" onclick="openWin('member','info')" style="color:#fff"></i>
</div>
</div>
</header>
<footer class="aui-nav" id="aui-footer">
<ul class="aui-bar-tab aui-border-t">
<li class="" v-for="(vo,index) in list" v-bind:class="{'active-danger': cou_index == index}" @click="change_menu(index)">
<span class="iconfont icon-home7" v-if="index == 0"></span>
<span class="iconfont icon-fenlei" v-if="index == 1"></span>
<span class="iconfont icon-gouwuche" v-if="index == 2"><div class="aui-badge" v-if="total_goods_sum > 0">{{ total_goods_sum }}</div></span>
<span class="iconfont icon-wode" v-if="index == 3"></span>
<p>{{vo.title}}</p>
</li>
</ul>
</footer>
</div>
</body>
</html>
<script type="text/javascript" src="script/api.js"></script>
<script type="text/javascript" src="script/common.js"></script>
<script type="text/javascript" src="script/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
total_goods_sum: 0,
cou_index: 0,//显示当前索引
list:[
{title:'首页'},
{title:'分类'},
{title:'购物车'},
{title:'我的'}
]
},
methods: {
update_tatal_goods_sum: function () {
api.ajax({
url: total_goods_sum_url,
method: 'post',
timeout: 30,
dataType: 'json',
returnAll: false,
data: {
values: {
token: $api.getStorage('token'),
deviceid: api.deviceId,
}
}
}, function (ret, err) {
if (ret) {
if(ret.status == 1){
vm.total_goods_sum = ret.data.total_goods_sum;
}else{
vm.total_goods_sum = 0;
}
} else {
api.alert(JSON.stringify(err));
}
});
},
init: function () {
api.openFrameGroup({
name: 'IndexGroup',//app首页frame组预加载
background: 'bgcolor',
scrollEnabled: false,
rect: {
x: 0,
y: $api.dom('header').offsetHeight,
w: api.winWidth,
h: api.winHeight - $api.dom('header').offsetHeight - $api.dom('footer').offsetHeight
},
index: vm.cou_index,
preload: true,
frames: [
{
name: 'index_index',
url: './html/index/index.html',
bgColor: 'bgcolor',
bounces: true,
reload: false
},
{
name: 'classify_index',
url: './html/classify/index.html',
bgColor: 'bgcolor',
bounces: false,
reload: true
},
{
name: 'cart_index',
url: './html/cart/index.html',
bgColor: 'bgcolor',
bounces: true,
reload: true
},
{
name: 'member_index',
url: './html/member/index.html',
bgColor: 'bgcolor',
bounces: true
}
]
}, function (ret, err) {
});
},
change_menu: function (index) {
if (index > 1) {
if (!is_login()) {
go_login();
return false;
}
}
if (vm.cou_index == index) {
return false;
}
//切换菜单
vm.cou_index = index;
api.setFrameGroupIndex({
name: 'IndexGroup',
index: index
});
}
}
});
//以下是通用设置手机界面布局及兼容
apiready = function () {
$api.setStorage("Header-height",$api.dom('header').offsetHeight);//全局保存头部高度
$api.setStorage("Footer-height",$api.dom('footer').offsetHeight);//全局保存底部高度
var headerlist = $api.domAll('header');
for (var i = 0; i < headerlist.length; i++) {
$api.fixIos7Bar(headerlist[i]);//修复ios系统bar
}
//监听网络连接事件
api.addEventListener({
name: 'tatal_goods_sum'//添加购物车信息赋值
}, function(ret, err) {
vm.update_tatal_goods_sum();
});
vm.update_tatal_goods_sum();
vm.init();
api.addEventListener({
name:'noticeclicked'
},function(ret,err){
var value = ret.value;
if(ret.type == 0){
//APICloud推送内容
} else if(ret.type == 1){
//开发者自定义消息
alert(ret.value);
}
});
};
</script>
总结：
（1）使用的aui.css和阿里巴巴的图标库。
（2）apiready = function () 是通用设置手机界面边角和兼容问题，暂时不研究。
