apicloud简单app开发实例

APICloud是国内知名的移动开发平台，其提供了一系列可用的云服务，帮助开发者开发出更加高效的app。本文将介绍如何使用APICloud进行简单app开发实例。

一、前提条件

在开始之前，需要在APICloud官网注册一个开发者账号。注册完成后，需要创建一个项目，并且在项目管理页面中，复制应用ID和应用key。

二、框架的搭建

1.创建新工程

进入APICloud官网、创建新应用，选择开发模式为自定义构建模式。

2.引入模块和插件

APICloud支持插件式的开发方式，因此我们需要把需要的模块和插件分别下载。在模块和插件管理页面里，下载对应的资源包，然后添加到项目中。

3.创建UI

在APICloud中，UI是由HTML、CSS和JS来构成的，因此我们可以新建一个HTML、CSS和JS文件，并且定义一个固定大小的窗口div。

然后，在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了。当用户下拉到列表结尾时，会有一个下拉刷新的效果来刷新新数据。用户也可以点击列表上的每一个条目，进入一个详情页面。