首先欢迎加入APIcloud,很多朋友进来后一头雾水,不知道从哪下手,今天就做个详细的流程出来。
要想用APIcloud开发一套APP,前提得熟悉HTML 、JS 、CSS。如果再熟悉点PHP ,JSP就更好了,可以实现与自己的服务器对接。
第一步:注册账号,下载IDE开发工具。
打开IDE后依次---文件---新建---创建APIcloud项目。创建完成后在左侧【我的APP项目】里面会显示新建的项目,同时登录到网站控制台里面也会看到刚创建的项目。如下图:
左侧我的APP项目里面会显示刚创建的项目及文件,如下图
这些文件就是APP的所有东西了,也就是widget包,可以参考docs.apicloud/APIClou ... ge-structure-manual,看一下包文件的结构说明
到此一个项目创建完成,修改下index.html(入口文件),连上手机,CTRL+R进行真机调试,会发现手机上出现个APPLoader,这里面包含了你调试的所有项目。再开发过程中可
以通过这个来真机调试。
第二步,开发你的第一个APP
项目创建完成,调试也做好了,下面就开始开发你的APP吧
如同开发web页面一样,一个HTML文件然后加上CSS和JS,来实现布局和效果。CSS文件夹存放你的样式,script来存放你的JS文件,html文件夹存放你的模板文件,index.html为APP的入口文件,就是好比个首页了。
我们来了解一下一个APP的结构,常用的APP布局有顶部导航,中间内容区域和底部导航。如下图:
js控制css3动画触发
在用APICLOUD的APP的开发过程中,一个页面的布局方式最好是通过窗口的套用来完成,即win+frame,举个例子来说明,我们在做网站后台的时候为了防止点击菜单页面刷新,我们有时会采用的布局是先做一个大框架,然后通过iframe来嵌套其他页面,然后我们开发的APP就好比是一个浏览器,我们可以通过iframe来显示一个页面,也可以在浏览器新窗口打开一个页面。那么回到我们的APP里面,index.html为入口框架,通过openFrame或openFrameGroup来加载其他页面(好比那个iframe了),如果想在新窗口中打开就使用openWin。
为了APP更流畅点,我们有时会一个页面嵌套多个frame来实现效果。
再回到上面的APP布局图里面分析一下,在index.html我们就只可以布局 上下导航,中间内容区域通过openFrame或者openFrameGroup来加载其他页面的方式来实现。如果是打开一个窗口,通过openWin来打开一个页面,同理,然后打开的这个窗口里面再通过openFrame或或openFrameGroup来嵌套其他页面。
openWin openFrame为apicloud的api对象方法,可以参考文档来看下使用说明。docs.apicloud/%E7%AB%AFAPI/api
下面通过简单的实例说明一下
index.html---入口
html/frm_list.html
html/win_show.html
html/frm_list.html
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"/>
<title>demo</title>
</head>
<body>
<header>顶部导航</header>
<footer>底部菜单</footer>
</body>
</html>
CSS样式就不多说了,跟web是一样的用法,上下导航布局完成后通过js来加载frm_list.ht
ml页面,openFrame的其他参数请参考文档
<script>
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论