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

随着APP软件的普及,越来越多的企业以及个人都加入创建自己的APP应用软件,现在我们来分享一下如何DIY快速制作一款手机App软件。
市面上有很多DIY App制作工具,它们普遍使用的是拼装式。这样的制作速度快,但是模板少,自定义效果差,更别提用户体验了。最重要的一点,最终App不一定能上线。
使用APICloud平台,用Web语言快速制作iOS、Android原生App软件。不仅保证了快速、高效的优势,更利于用户制作出多种多样,个性化强的App。

操作方法

  • 01

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

  • 02

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

  • 03

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

  • 04

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

  • 05

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

  • 06

    项目创建完成,调试也做好了,下面就开始开发你的APP吧。 如同开发web页面一样,一个HTML文件然后加上CSS和JS,来实现布局和效果。CSS文件夹存放你的样式,script来存放你的JS文件,html文件夹存放你的模板文件,index.html为APP的入口文件,就是好比个首页了。 我们来了解一下一个APP的结构,常用的APP布局有顶部导航,中间内容区域和底部导航。如下图:

  • 07

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

  • 08

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

  • 09

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

  • 10

    openWin openFrame为apicloud的api对象方法,可以参考论坛中的文档来看下使用说明。 下面通过简单的实例说明一下:

  • 11

    index.html---入口 html/frm_list.html html/win_show.html html/frm_list.html index.html <!doctype html> <html> <head> <metacharset="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.html页面,openFrame的其他参数请参考文档 <script> apiready =function () { api.openFrame({ name: 'frm_list', url:'html/frm_list.html' }) } </script> 这样打开APP后等于我们看到的就是list这个页面了 frm_list.html中打开新窗口 <!doctype html> <html> <head> <metacharset="utf-8"> <meta name="viewport"content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/> <metaname="format-detection" content="telephone=no"/> <title>demo</title> </head> <body> <ul> <li>列表一</li> </ul> </body> <script type="text/javascript"> apiready=function (argument) { } functionopenShow(){ api.openWin({ name: 'win_show', url: 'win_show.html' }) } </script> </html> 加个ONCLICK事件,跟web是一样滴 win_show.html的写法,这个页面我们就当个窗口来用,通过frame来加载详细内容页面: <!doctype html> <html> <head> <metacharset="utf-8"> <meta name="viewport"content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/> <metaname="format-detection" content="telephone=no"/> <title>demo</title> </head> <body> <header>内容</header> </body> <script type="text/javascript"> apiready=function(argument) { api.openFrame({ name: 'frm_show', url: 'frm_show.html' }) } </script> </html> 那么frm_show.html怎样来写就自己动手写一个了

  • 12

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

  • 13

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

  • 14

    html5:在创建html时为了防止页面缩放等不兼容效果,要创建个viewport <meta name="viewport"content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/> 在IOS设备上,有时会将数字转为手机号,这里也要禁止下 <meta name="format-detection"content="telephone=no"/> CSS:在定义CSS时记得要定义下默认样式 api.js:为apicloud封装的js方法,如果使用记得先要引入,在script文件夹内

(0)

相关推荐

  • 怎样免费制作手机app软件 无需任何经验技术

    想制作自己的手机app软件,但又苦于不会编程怎么办?应用工厂很好的为我们解决这个问题,无需任何,人人都可以开发自己的手机app软件. 操作方法 01 首先登陆应用工厂,然后注册一个账号. 02 选择符 ...

  • 如何制作手机APP软件?

    同学们感觉手机app软件很神奇,其实不然.手机app软件有好几种做法,小编今天教你最简单的做法. 操作方法 01 首先,你电脑上的有 HBuilder 软件. 02 然后自己编写一个HTML文件.类似 ...

  • 手把手教你自学开发手机APP软件,一天包会教程

    这几年APP开发底层技术不断发展,APP平台化出现后,借助平台,不懂技术也能自己制作手机APP,平台共享模式,费用不到传统外包的十分之一.这对于我们这些草根创业者来说,无意是一个重大利好. 第一.注册 ...

  • 把电脑上的手机APP软件安装包安装到手机中方法

    现在由于手机流量很贵,很多人都喜欢在电脑上先下载好APP安装包,然后导入手机中再去安装,这样不仅麻烦,而且手机由于屏幕小,查找安装包也非常的麻烦,很多人都想如果能直接把电脑上手机APP安装包安装到手机 ...

  • 手机app软件开发给企业带来的价值

    操作方法 01 智能手机和APP产业的勃兴,给手机用户的生活和工作带来种种便利,同时也给手机app开发者带来了创造新价值的潜力和市场.智能时代的手机,因为手机App变得更加好用,而手机App开发的勃兴 ...

  • 交警必备手机APP软件

    每天都会有车辆违章,但是有些人由于工作的原因一时也没办法缴清罚款,于是乎各地都推出了本地交警app,例如烟台交警APP手机客户端通过它我们可以即时查询违法.进行快速理赔,并实时发布最新最权威的交管信息 ...

  • 抖音最火的五款手机修图软件,一秒变大片

    每次刷抖音都会看到各种男神.女神的图片,细直长的腿,黄金比例的身材,魔鬼般精致的面容,其实只要掌握以下几个软件,你也可以拥有! 操作方法 01 Facetune 2 这款软件滤镜种类很多,有几款滤镜兼 ...

  • OPPO手机APP软件软件应用安装不了解决方法?

    使用安卓手机,下载软件的时候,是不是会遇到APP应用软件无法安装的情况呢?今天小编就总结六种软件安装失败的原因,大家都来"对症下药"吧~ 操作方法 01 未打开"未知来源 ...

  • OPPO手机APP软件应用安装不了解决方法?

    小便就是用的OPPO手机,有时候确实会出现手机安装不了软件的情况,这里,小编给大家介绍一下解决方法. 操作方法 01 首先可能是未知来源没有打开,可以点击设置–其他设置–安全与隐私,然后打开未知来源. ...