apicloud入门第一步
2020-04-20 本文已影响0人
陶菇凉
一、首先第一步就是进入官网（https://docs.apicloud.com/），找到开发者文档，api对象。
image.png
image.png
API对象呢，主要是分为这四大类，前三类就好比手机的设置对于手机而言，最后一个method是最为重要的，今天我们就先来说说APP的几个主界面是如何实现的。
二、一开始由于我们公司用的前端框架是mui，所以就一直在看mui的窗口管理，后来发现根本用不着，使用apicloud开发打开底部栏只需要一个方法就搞定。
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;
});
https://docs.apicloud.com/Client-API/api#28
详细介绍可以看链接文档
三、详细代码
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" type="text/css" href="css/mui.min.css" />
<link rel="stylesheet" type="text/css" href="css/commom.css" />
<title>Document</title>
<style type="text/css">
html,
body {
background-color: #fff;
}
/*底部栏*/
.mui-bar-tab {
height: 5px;
}
.mui-bar {
border-top: 1px solid #F3F3F3;
background: #FFFFFF;
}
.mui-tab-item>div {
width: 20px;
height: 20px;
margin: 0 auto;
}
.mui-tab-item:nth-child(3)>div {
width: 36px;
height: 36px;
}
.mui-bar-tab .mui-tab-item {
color: #B4BFD3;
overflow: visible;
font-size: 0.12rem;
}
.mui-bar-tab .mui-tab-item.mui-active {
font-weight: bold;
color: rgba(255, 64, 112, 1) !important;
background: linear-gradient(0deg, rgba(255, 64, 149, 1) 0%, rgba(255, 64, 105, 1) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.mr {
display: block;
}
.gb {
display: none;
}
.bian>div:nth-child(1) {
display: block;
}
.bian>div:nth-child(2) {
display: none;
}
.bian.mui-active>div:nth-child(1) {
display: none;
}
.bian.mui-active>div:nth-child(2) {
display: block;
}
</style>
</head>
<body>
<div class="footer" id="app">
<nav class="mui-bar mui-bar-tab">
<div class="mui-tab-item bian" @click="openFrameGroup(0)" v-bind:class="{'mui-active': isActive == '0'}">
<div class="mr">
<img src="image/nvtabbar/home.png" />
</div>
<div class="gb">
<img src="image/nvtabbar/home_h.png" />
</div>
<span class="mui-tab-label">首页</span>
</div>
<div class="mui-tab-item bian" @click="openFrameGroup(1)" v-bind:class="{'mui-active': isActive == '1'}">
<div class="mr">
<img src="image/nvtabbar/video.png" />
</div>
<div class="gb">
<img src="image/nvtabbar/video_h.png" />
</div>
<span class="mui-tab-label">视频</span>
</div>
<div class="mui-tab-item bian" @click="openFrameGroup(2)" v-bind:class="{'mui-active': isActive == '2'}">
<div class="mr">
<img src="image/nvtabbar/realease.png" />
</div>
<div class="gb">
<img src="image/nvtabbar/realease.png" />
</div>
</div>
<div class="mui-tab-item bian" @click="openFrameGroup(3)" v-bind:class="{'mui-active': isActive == '3'}">
<div class="mr">
<img src="image/nvtabbar/mess.png" />
</div>
<div class="gb">
<img src="image/nvtabbar/mess_h.png" />
</div>
<span class="mui-tab-label">消息</span>
</div>
<div class="mui-tab-item bian" @click="openFrameGroup(4)" v-bind:class="{'mui-active': isActive == '4'}">
<div class="mr">
<img src="image/nvtabbar/user.png" />
</div>
<div class="gb">
<img src="image/nvtabbar/user_h.png" />
</div>
<span class="mui-tab-label">我的</span>
</div>
</nav>
</div>
</body>
<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/api.js" type="text/javascript" charset="utf-8"></script>
<script src="js/common.js" type="text/javascript" charset="utf-8"></script>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var apiready = function() {
var vm = new Vue({
el: '#app',
data: {
isActive: 0,
selectedIndex: 0,
},
methods: {
load: function() {
var that = this;
UILoadingKeyFrame()
api.openFrameGroup({
name: 'Frames',
rect: {
x: 0,
y: 0,
w: 'auto',
h: api.winHeight - 51,
},
preload: 5,
scrollEnabled: false,
index: 0,
frames: [{
name: 'main_win.html',
url: 'html/page/main_win.html',
bgColor: 'rgba(0,0,0,0)',
overScrollMode: 'always',
delay: 2
},
{
name: 'video.html',
url: 'html/page/video.html',
bgColor: '#fff',
overScrollMode: 'always',
delay: 2
}, {
name: 'release.html',
url: 'html/page/release.html',
bgColor: 'rgba(0,0,0,0)',
overScrollMode: 'always',
delay: 2
},
{
name: 'message.html',
url: 'html/page/message.html',
bgColor: 'rgba(0,0,0,0)',
overScrollMode: 'always',
delay: 2
}, {
name: 'my.html',
url: 'html/page/my.html',
bgColor: 'rgba(0,0,0,0)',
overScrollMode: 'always',
delay: 2
}
]
}, function(ret, err) {
UILoadingCloseKeyFrame()
var index = ret.index;
if(index == 0) {
api.setFrameAttr({
name: 'main_frim.html',
hidden: false
});
} else {
api.setFrameAttr({
name: 'main_frim.html',
hidden: true
});
}
});
},
openFrameGroup: function(index) {
var that = this;
api.setFrameAttr({
name: 'main_frim.html',
hidden: true
});
if(index == 0) {
api.setFrameAttr({
name: 'main_frim.html',
hidden: false
});
}
that.isActive = index;
api.setFrameGroupIndex({
name: 'Frames',
index: index,
scroll: false
});
},
},
beforeCreate: function() {
},
created: function() {
this.load();
},
mounted: function() {
}
})
}
</script>
</html>
