怎么DIY快速制作一款手机App软件?

随着APP软件的普及,越来越多的企业以及个人都加入创建自己的APP应用软件,现在我们来分享一下如何DIY快速制作一款手机App软件。

市面上有很多DIY App制作工具,它们普遍使用的是拼装式。这样的制作速度快,但是模板少,自定义效果差,更别提用户体验了。最重要的一点,最终App不一定能上线。

使用APICloud平台,用Web语言快速制作iOSAndroid原生App软件。不仅保证了快速、高效的优势,更利于用户制作出多种多样,个性化强的App

第一步:注册账号,下载Studio开发工具

打开IDE后依次---文件---新建---创建APICloud项目。创建完成后在左侧【我的APP项目】里面会显示新建的项目,同时登录到网站控制台里面也会看到刚创建的项目。如下图:

左侧我的APP项目里面会显示刚创建的项目及文件,如下图

这些文件就是APP的所有东西了,也就是widget包。到此一个项目创建完成,修改下index.html(入口文件),连上手机,CTRL+R进行真机调试,会发现手机上出现个APPLoader,这里面包含了你调试的所有项目。再开发过程中可以通过这个来真机调试。

第二步:开发你的第一个APP

项目创建完成,调试也做好了,下面就开始开发你的APP吧。

如同开发web页面一样,一个HTML文件然后加上CSSJS,来实现布局和效果。CSS文件夹存放你的样式,script来存放你的JS文件,html文件夹存放你的模板文件,index.htmlAPP的入口文件,就是好比个首页了。

我们来了解一下一个APP的结构,常用的APP布局有顶部导航,中间内容区域和底部导航。如下图:

在用APICLOUDAPP的开发过程中,一个页面的布局方式最好是通过窗口的套用来完成,win+frame,举个例子来说明,我们在做网站后台的时候为了防止点击菜单页面刷新,我们有时会采用的布局是先做一个大框架,然后通过iframe来嵌套其他页面,然后我们开发的APP就好比是一个浏览器,我们可以通过iframe来显示一个页面,也可以在浏览器新窗口打开一个页面。那么回到我们的APP里面,index.html为入口框架,通过openFrameopenFrameGroup来加载其他页面(好比那个iframe了),如果想在新窗口中打开就使用openWin

为了APP更流畅点,我们有时会一个页面嵌套多个frame来实现效果。

再回到上面的APP布局图里面分析一下,在index.html我们就只可以布局上下导航,中间内容区域通过openFrame或者openFrameGroup来加载其他页面的方式来实现。如果是打开一个窗口,通过openWin来打开一个页面,同理,然后打开的这个窗口里面再通过openFrame或或openFrameGroup来嵌套其他页面。

openWin openFrameapicloudapi对象方法,可以参考论坛中的文档来看下使用说明。

下面通过简单的实例说明一下

index.html---入口

html/frm_list.html

html/win_show.html

html/frm_list.html

index.html

   

   

   

    demo

   

顶部导航

   

底部菜单

CSS样式就不多说了,跟web是一样的用法,上下导航布局完成后通过js来加载frm_list.html页面,openFrame的其他参数请参考文档

这样打开APP后等于我们看到的就是list这个页面了

frm_list.html中打开新窗口

   

   

   

    demo

   

               

  • 列表一
  •    

加个ONCLICK事件,跟web是一样滴

win_show.html的写法,这个页面我们就当个窗口来用,通过frame来加载详细内容页面:

   

   

   

    demo

   

内容

那么frm_show.html怎样来写就自己动手写一个了

通过更多的JScss3动画效果,我们可以让APP更丰富些。流程都熟悉了大家可以上手做个简单的来试一下。

第三步:APP制作注意几点事项

html5:在创建html时为了防止页面缩放等不兼容效果,要创建个viewport

IOS设备上,有时会将数字转为手机号,这里也要禁止下

CSS:在定义CSS时记得要定义下默认样式

api.js:为apicloud封装的js方法,如果使用记得先要引入,在script文件夹内

app定制:http://community.apicloud.com/bbs/forum.php 

app开发:http://www.apicloud.com/dev/

app开发:http://www.apicloud.com/ 

 免责声明:本文仅代表作者个人观点,与CSDN网站无关。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。


本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场,不承担相关法律责任。如若转载,请注明出处。 如若内容造成侵权/违法违规/事实不符,请点击【内容举报】进行投诉反馈!

相关文章

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部