My APP
- 功能1
- 功能2
- 功能3
- 功能4
- 功能5
中文化、本土化、云端化的在线跨平台软件开发工具，支持APP、电脑端、小程序、IOS免签等等
APICloud是国内知名的移动开发平台，其提供了一系列可用的云服务，帮助开发者开发出更加高效的app。本文将介绍如何使用APICloud进行简单app开发实例。
一、前提条件
在开始之前，需要在APICloud官网注册一个开发者账号。注册完成后，需要创建一个项目，并且在项目管理页面中，复制应用ID和应用key。
二、框架的搭建
1.创建新工程
进入APICloud官网、创建新应用，选择开发模式为自定义构建模式。
2.引入模块和插件
APICloud支持插件式的开发方式，因此我们需要把需要的模块和插件分别下载。在模块和插件管理页面里，下载对应的资源包，然后添加到项目中。
3.创建UI
在APICloud中，UI是由HTML、CSS和JS来构成的，因此我们可以新建一个HTML、CSS和JS文件，并且定义一个固定大小的窗口div。
My APP
然后，在CSS文件中定义样式：
#content {
position: absolute;
left: 0;
top: 0;
width:100%;
height: 100%;
overflow: hidden;
}
#header {
width:100%;
height: 88px;
background-color:#ffffff;
text-align:center;
}
#header img {
margin-top: 20px;
margin-left: 20px;
width:30px;
height: 48px;
}
#header #title {
font-size: 18px;
color:#333333;
line-height: 48px;
margin-left: -40px;
position: absolute;
left: 50%;
}
#main {
width: 100%;
height: calc(100% - 88px - 44px);
background-color: #f0f0f0;
overflow: auto;
}
#main ul {
margin: 12px;
padding: 0;
list-style-type: none;
}
#main li {
margin: 12px;
padding: 10px;
background-color: #ffffff;
font-size: 18px;
color:#333333;
border-radius: 12px;
cursor: pointer;
}
#main li:hover {
background-color: #f0f0f0;
}
#footer {
width: 100%;
height: 44px;
background-color: #ffffff;
position: absolute;
left: 0;
bottom: 0;
font-size: 12px;
color:#999999;
text-align:center;
line-height: 44px;
}
4.编写JS
在JS文件中，需要引入需要的模块、插件，并且定义一些全局变量。
apiready = function(){
// DOM加载完成后
api.parseTapmode(); // 禁用300ms点击事件延迟
// 引入jQuery库
var $ = api.require('jQuery');
// 定义一些全局变量
var headerH = $('#header').height(); // header高度
var footerH = $('#footer').height(); // footer高度
var itemH = $('#main li:first').outerHeight(); // 元素高度
var data = []; // 数据
// 首次加载数据
loadData();
// 加载数据
function loadData(){
// 使用列表插件显示数据
var list = api.require('list');
list.open({
rect: {
x: 0,
y: headerH + 1,
w: 'auto',
h: 'auto'
},
data: data, // 无数据暂时显示初始化数据
styles: {
'cell':{
'padding-left': 10,
'padding-right': 10,
'height': itemH,
'font-size': 16,
'color': '#666'
},
'effective': {
'down': 30,
'up' : 30
},
'pullToHide':true,
'indicator': {
'visible':true,
'styles': {
'textColor':'#c4c4c4',
'loadingImg':'widget://image/refresh/ring.gif'
}
}
},
isScrollBarEnabled: true,
vScrollBarEnabled: true,
hScrollBarEnabled: false,
bgColor: '#fff'
}, function(ret, err){
// 滚动事件
$(document).on('scroll',function(){
var scrollTop = $(document).scrollTop();
var contentHight = $(document).height();
var scrollHeight = $(window).height();
if(scrollTop + scrollHeight >= contentHight){
loadData(); // 到达底部，再次加载数据
}
});
// 下拉刷新事件
var refresh = api.require('refreshHeader');
refresh.refreshHeader({
visible: true,
loadingImg: 'widget://image/refresh/arrow.png',
bgColor: '#f0f0f0',
textColor: '#999999',
textDown: '下拉刷新...',
textUp: '松开刷新...',
showTime: false
}, function(ret, err) {
// 下拉刷新操作
data = [];
$('#main li').remove(); // 移除旧数据
loadData(); // 加载新数据
setTimeout(function(){
refresh.refreshHeaderLoadDone(); // 下拉刷新结束，隐藏动画
}, 1500);
});
});
}
// 点击事件
$('#main').on('click', 'li', function(){
// 跳转页面
api.openWin({
name: 'detail',
url: 'widget://html/detail.html?id=' + $(this).attr('data-id'),
delay: 100
});
});
}
5.打包和运行
在开发完成后，点击合并压缩进行打包，安装在手机上，并打开。
三、实现效果
通过以上步骤完成之后，我们就可以看到一个简单的APP了。当用户下拉到列表结尾时，会有一个下拉刷新的效果来刷新新数据。用户也可以点击列表上的每一个条目，进入一个详情页面。
