怎么DIY快速制作一款手机App软件?
随着APP软件的普及,越来越多的企业以及个人都加入创建自己的APP应用软件,现在我们来分享一下如何DIY快速制作一款手机App软件。
市面上有很多DIY App制作工具,它们普遍使用的是拼装式。这样的制作速度快,但是模板少,自定义效果差,更别提用户体验了。最重要的一点,最终App不一定能上线。
使用APICloud平台,用Web语言快速制作iOS、Android原生App软件。不仅保证了快速、高效的优势,更利于用户制作出多种多样,个性化强的App。
第一步:注册账号,下载Studio开发工具
打开IDE后依次---文件---新建---创建APICloud项目。创建完成后在左侧【我的APP项目】里面会显示新建的项目,同时登录到网站控制台里面也会看到刚创建的项目。如下图:
左侧我的APP项目里面会显示刚创建的项目及文件,如下图
这些文件就是APP的所有东西了,也就是widget包。到此一个项目创建完成,修改下index.html(入口文件),连上手机,CTRL+R进行真机调试,会发现手机上出现个APPLoader,这里面包含了你调试的所有项目。再开发过程中可以通过这个来真机调试。
第二步:开发你的第一个APP
项目创建完成,调试也做好了,下面就开始开发你的APP吧。
如同开发web页面一样,一个HTML文件然后加上CSS和JS,来实现布局和效果。CSS文件夹存放你的样式,script来存放你的JS文件,html文件夹存放你的模板文件,index.html为APP的入口文件,就是好比个首页了。
我们来了解一下一个APP的结构,常用的APP布局有顶部导航,中间内容区域和底部导航。如下图:
在用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对象方法,可以参考论坛中的文档来看下使用说明。
下面通过简单的实例说明一下
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怎样来写就自己动手写一个了
通过更多的JS和css3动画效果,我们可以让APP更丰富些。流程都熟悉了大家可以上手做个简单的来试一下。
第三步:APP制作注意几点事项
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文件夹内
app定制:http://community.apicloud.com/bbs/forum.php
app开发:http://www.apicloud.com/dev/
app开发:http://www.apicloud.com/
免责声明:本文仅代表作者个人观点,与CSDN网站无关。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
怎么DIY快速制作一款手机App软件?相关推荐
- 广州app制作:那个手机app制作平台好?
随着移动互联网的发展,APP开发技术的逐渐成熟,现在要制作一款手机APP应用软件也变得越来越轻易,市面上也出现了许多可以不需要懂专业APP开发技术和语言,可以提供给普通人开发专属APP应用软件的App ...
- 我们如何制作gif?制作gif的手机APP哪个好?
动画图片在我们的日常生活中扮演着越来越重要的角色.它们是尴尬中无所不能的幽默表情,也是能让我们生动表达我们的直观情感.与传统图片相比,动态图片在趣味性.可塑性和内容丰富性方面更胜一筹:与视频相比,动图 ...
- 三步快速免费开发工业手机APP,远程监控西门子300PLC数据
三步快速免费开发工业手机APP,远程监控西门子300PLC数据 (工业APP之于制造 巨控_何工) 互联网的飞速发展为人们的生活带来了翻天覆地的变化.工业APP ...
- 我最喜欢的五款手机APP 简直就是生活的小帮手
我们在手机上下载各种各样的APP软件,目的就是为了方便我们的生活.满足我们的需求,今天给大家透露一下小编最喜欢的APP软件. AcFun 二次元ACG爱好者们亲切的称之为a站app,可以让二次元爱好者 ...
- 在电脑上体验了 16 款手机 App 后,我很失望
Windows 11 的发布会上,未来可使用 Android app 作为一大升级引起了大家的广泛讨论:如果你使用的是搭载 Apple Silicon 的 Mac,也可以在 App Store 的搜索 ...
- 制作一个手机APP软件需要拥有哪些资质证明?
移动互联网+商业时代的井喷期已至.在你的事业蓝图中,是否早已打算好开发制作一个属于自己的APP应用平台呢?那么,在制作APP前应该有哪些准备工作,今天小编就带您了解一番,制作一个手机APP软件都需要拥 ...
- 推荐5款快速制作完美PPT的办公软件
哈喽,大家好,今天为大家推荐几款可以快速制作完美PPT的办公软件,相信大家在工作中都遇到过制作PTT的难题,到底哪些软件可以快速制作完美的PPT呢?跟随小编的脚步往下看. 1.Focusky 这款软件 ...
- 快速制作一款高逼格词云图
快速制作一款高逼格词云图 词云图,也叫文字云,是对文本中出现频率较高的"关键词"予以视觉化的展现,词云图过滤掉大量的低频低质的文本信息,使得浏览者只要一眼扫过文本就可领略文本的主旨 ...
- 如何开发手机APP软件?
一门APP开发平台能做APP嘛 1.可靠的.专业的在线app开发平台可以满足中小企业的基本功能,而且制作出来的app非常专业,也可以拿来进行使用,如应用之星,就是采用控件式操作方式,菜鸟也可以制作出来 ...
最新文章
- 【NIO】异步模型之Callback -- 封装NIO
- MATLAB基本二维曲线绘制
- canvas读取图片,输入文字,调整文字属性,拖拽文字位置,并保存图片
- 如何在Python中打印到stderr?
- nanopi制作个人服务器,NanoPi K2 服务器系统镜像
- BZOJ3495 : PA2010 Riddle
- Mac软件下载提示:“已损坏,无法打开”解决办法
- PHP fuser,打印机提示 50.1 fuser error 这样的错误,无法正常打印?
- 微信小程序云开发教程-云数据库
- PCB封装欣赏了解之旅(上篇)—— 常用元器件
- cad2016的自动修复此计算机,CAD中遇到文件损坏,别着急,这几招能帮你挽回损失...
- 新手怎么选择蓝牙耳机不被忽悠?注意这两大误区一定不猜雷
- python安装hyperlpr
- 统信UOS20-1030 初体验
- 异常(Exceptions)
- SSH框架面试题(自己+别人的试题)
- SSM项目图书馆管理系统,适合新人练手和毕设参考,功能首页展示 系统注册登录登出 用户管理 权限控制管理 书籍管理 图书借阅管理 个人借阅记录管理 书籍详细信息展示等
- 神经网络应用较多的算法,图卷积神经网络应用
- 你的圈子,已经暴露了你的阶层
- 人工智能画画 yyds