APICloud教程

一、通过APICloud进行App前端布局和数据交互
App前端布局:
Window :窗口
Frame:子窗口
FrameGroup:一组子窗口的集合

window+frame+html代码的布局方式
整个页面最外面是一个window,头部和导航固定不变,为一个frame,下方内容区域又是一个frame,整个frame里面就是具体的页面内容了,里面嵌套了html\css代码

打开新窗口的过程,就是在一组window+frame+html这种组合下,打开另一组window+frame+html组合的过程

页面内容简单的情况下,可以直接在window当中加载htmlcss代码

打开子窗口:api.openFrame
function openFrame(){
api.openFrame({
name:"", //子窗口的名称
url:"", //子窗口的地址
rect:{ //x和y是坐标位置,子窗口显示的起始坐标,w和h是,宽度和高度
x:0,
y:0,
w:"auto",
h:"auto"
}
})
}
打开子窗口组:api.openFrameGroup
打开新窗口:api.openWin

下拉刷新:api.setRefreshHeaderInfo
apiready = function(){
api.setRefreshHeaderInfo({
visible:true,
bgColor:"#ccc",
textColor:"#fff",
textDown:"拉一下试试",
textUp:"试试就试试",
showTime:true
},function(){
//coding...
//查询数据库
//判断是否有新数据
//更新新数据
api.refreshHeaderLoadDone();
})
}

定义的方法统一放在:
apiready = function(){
openFrame();
}

数据交互:
数据存储:
file模块:目录操作,文件操作
文件存储方式,用于图片、文档的上传下载删除管理
db:本地sqlite数据库
用于离线数据的存储
localstorage:html5,localstorage
用于一些变量的存储传递,比如用户的登录状态、多个页面之间的变量传递
注意:cookie、session无法使用
preterence:setPrefs、getPrefs、removePrefs
apicloud封装好的偏好数据存储模块,如应用皮肤、字体大小等个性化的设置

与自建服务器的网络通信
api.ajax

猜你喜欢

转载自blog.51cto.com/9161018/2406538
今日推荐