使用APICloud人人都能开发《表白神器APP》- 入门基础

555 阅读4分钟
前言

某一天,我被部门经理分配到一个项目上,项目经理就直接问我,会APICloud么?(有点点懵逼,这个好像听过,但是是个什么东西呀?)我答到:“可以学”,“嗯不错,那你先学习一周就跟着我去项目上开发去吧。“

然后就兴致勃勃去APICloud官网去看文档,这个怎么有点多不知从何下手呀!正好有视频教程,入门基础-使用APICloud开发app的完整流程(当时用的就是这个demo,还原了该流程),觉得很好玩,也是这一次开发大概的了解了APICloud就是类似原生开发的一套壳子,如果你是原生开发人员会感觉这不是你现在的技能么,但是对于前端只做html的来说就是大大的福利。嘻嘻嘻偷笑😏

效果

成功或失败都会调用发送短信的界面,这样就可以收获好人卡或者你的爱情

love.gif

看起来是不是很棒,我觉得对于小企业或者个人来说,快速开发一款app非常有诱惑性,打包也非常简单,完全不需要你学习原生的东西。说了这么多,赶紧动手制作一款属于你自己的app。

跟着我一起来做吧

准备工作

开发这款app只需要下载一个开发工具和官网注册一下

  • 下载开发工具:apicloud studio 3(下载地址)
  • 注册:在官网 注册 并在开发工具登录你的账号(作用:管理代码)

代码

我这是通过广大网友的力量获取到的源代码,里面的东西不多就几张图片和一首歌曲。大家可以照着修修改改。我在这里演示的是官方网站推荐的表白神器app开发流程🔗,放的是压缩的代码,记得解压缩

开发步骤

官网介绍

打开apicloud的网址,新增一个项目

image.png

进入项目,功能介绍

  • 端开发
  • 云开发
  • 应用服务
  • 企业服务

对于我们个人来说,一般用到的是端开发,设置app的图标,添加苹果和安卓的证书,提交代码,添加模块,然后打包。

端设置 设置app的图标.png

证书 添加苹果和安卓的证书.png

代码 提交代码.png

模块 添加模块.png

云编译 打包.png

拉取代码

打开开发工具apicloud studio 3,导入刚刚在网页上新建的项目。

image.png

image.png

image.png 初始化拉下来的代码 👇 image.png

真机调试

可以先看一下文档介绍,我这边使用的是WIFI真机同步

  • 首先确保手机和电脑是处于同一局域网内
  • 下载apploader软件(调试工具,也可以自己开发)

image.png

image.png

打开apploader,扫描二维码,如果软件里面的透明按钮变为绿色,说明连接成功

image.png

如果此时不能弹出调试界面,可以去项目的index.html下执行如下命令

  • iOS: command+i
  • Android: control+i

测试一下,在index.htm里面添加一行代码 alert(‘表白神器调试’) ,执行上面的命令。

image.png

这代表调试成功 image.png

代码替换

拿到网盘的代码,解压然后全部复制到我们新建的这个项目下面去。

上传代码,把unversioned的代码放入changes中,填上描述,选中勾。

image.png

在网页上就可以看到,新增了代码

image.png

打包编译

打开网页,由于ios的证书特别,所以只演示安卓打包。

image.png

填写别名,证书库密码,证书密码

image.png

然后选择应用名称,应用类别,平台 image.png

编译完成 image.png

通过上面简单的步骤,大家完成以后,基本上就对APICloud有个大致的了解,如果熟练使用,还是要多看文档。对于某些功能可能是收费的(天下哪有免费的午餐对吧)。

总结

如果不需要自己写代码,其实这些步骤挺简单的。毕竟先学一门语言开发是日积月累的过程,而工具就可以一学就会的。

原来APICloud可以使用vue语法去开发一款app,就会感觉简单多了。大家可以尝试一下,当时看到这个表白app让我瞬间提起了兴趣,就去尝试了一下,真正上项目以后用到的时候坑也不少需要大家自己慢慢填了。