前端新手快速上手APICloud App开发

Posted 2022-04-03 前端小学生xyz

之前因为毕设的原因接触到了APICloud这个平台，后来又研究了一下如何从0到1的开发一款app，今天就简单给大家演示一下使用APICloud制作一个app的全流程。

首先​需要到APICloud官网进行注册，然后​下载好官方的开发工具APICloud Studio3，这个开发工具和APICloud官网的控制台是同步的，同一个账号下，在官网的控制台里和开发工具中都可以简单的管理自己的应用，还是很方便的。此外还需要大家下载一下逍遥模拟器。

​选择应用类型并创建应用​

在下载好开发工具之后，我们就可以创建应用了。创建应用有两种方式，因为开发工具和官网控制台是同步的，所以在官网控制台和开发工具中都可以创建应用的，我们就选择其中一种，在官网控制台创建应用。

首选打开官网，登录进去后打开自己的开发控制台，点击创建应用，在官方文档中说 Native App原生应用适合功能强大、性能卓越的APP开发，所以我们选择原生开发。

选择基础模板就好，其他功能暂且不管，输入好应用名后点击创建。

​创建证书并编译自定义Loader​

创建好应用之后点击控制台的左侧一栏的模块，然后再点击自定义Loader，编译自定义Loader需要有证书，而android的证书比ios证书更方便创建，为了方便我们选择创建Android的证书和自定义Loader。

在开发控制台中点击证书，然后点击右上角的一键创建证书，输入相应的信息和密码就可以成功创建了。

自定义Loader是APICloud 为方便开发者在移动设备调试App而开发的一种调试器，开发者可以在移动设备上实时调试自己的App并将日志输出到计算机上的开发工具中，方便在本地进行开发。

编译成功后我们需要将自定义Loader下载下来。这时我们就在官网控制台里创建好了一个应用，因为刚才说过，官网控制台和开发工具是连通的，所以我们只要把刚才创建好的应用导入到开发工具就可以了。

我们打开官方的开发工具APICloud Studio3，点击左上角项目，然后点击导入项目，选择云端检出，在云端检出时选择刚才创建好的应用，选择一下本地保存路径，这样就把官网控制台上创建好的项目同步下来了。

应用同步好之后，我们就可以进行开发了，我们可以选择真机和模拟器来展示开发效果，这里我选择了逍遥模拟器来进行展示。然后我们把刚才下载到本地的Loader直接拖入逍遥模拟器中进行安装，就可以了，安装成功后双击打开。

从模拟器里打开应用之后，我们要将开发工具中的应用通过WIFI同步到模拟器中，点击模拟器界面中这个灰色的小球。

这是需要我们输入IP地址和端口，此时我们去开发工具中找一下相应的地址与端口。

我们在开发工具中点击终端，然后选择通过Wi-Fi连接新的设备。

点击后会出现真机同步的界面，不需要扫码，我们只需要把最下方的调试器IP和端口输入到刚才模拟器的同步配置界面中，然后点击连接就可以成功连接了。如果不用模拟器，想要用手机展示效果的话，需要确保手机和Studio在同一网络下。

这时我们鼠标右键点击项目名称，然后点击WIFI同步【全量】，就同步成功了。

同步成功之后，当前显示的页面就是main.html页面中的信息

现在我们就可以进行开发了，我们需要用到前端开发技术，零基础的开发者们可以先简单学习一下HTML、CSS、JS的基础。然后我们在主页中写入一个按钮，设置点击事件，想要在点击按钮后弹出提示。写完后记得保存，然后再鼠标右键点击项目名demo，再次进行WIFI同步。

同步成功，模拟器页面上出现了一个按钮，点击后也可以成功弹出提示。

​进行代码同步，将代码上传到官网控制台​

之后我们需要把代码上传到控制台，然后在控制台进行云编译，把我们的程序打包成安装包。

右键点击项目名，在代码管理中点击提交到云端，之后点击COMMIT就好。

然后我们点击官网的开发控制台左侧导航栏中的代码，就可以在代码更新日志里看到自己的更新记录了。

​进行云编译，将应用编译为安装包​

代码上传完成之后我们需要进行云编译，点击控制台左侧导航栏的云编译。云编译时可以给我们的app起一个吸引人的名字，然后选择一下应用类别（如网上购物-商城）和应用平台（iOS或Android）， 编译类型可以选择正式版或者测试版，其他设置如全局加密和SVN设置暂且禁用，我们这里选择一下测试版，之后就可以进行编译了。

编译过程大概半分钟，成功后我们就可以扫码下载app进行安装了。

​总结​

到此为止我们就走了一遍一个app从0到1的基本流程，我们来回顾一下基本步骤：第一步需要在官网的开发控制台创建应用（在开发工具中也可以创建），第二步需要创建证书，第三步需要编译自定义Loader（应用加载器，具有调试功能，为了方便我们在本地进行开发），第四步需要同步代码，最后第五步进行云编译。

我的代码只是简单的写了一个按钮，如果大家想要快速的开发一款功能成熟的app，也可以像我之前毕设那样，把一些现成的源码导入到项目中来做一个参考。源码下载地址：​​https://www.apicloud.com/source_code/shiliyuanma​​