零基础如何上手 APICloud App、小程序多端开发

2022 年 1 月 20 日
本文字数：3134 字
阅读完需：约 10 分钟

业务需求变化快、开发人员成本高是现在企业面临的主要问题。多端开发技术则可以很好的解决这些问题，开发一次可以生成 iOS、Android、小程序、Web 等多端应用。APICloud 凭借多年的移动开发技术积累，为开发者提供了一套高性能的多端开发技术，可以高效的开发企业级应用程序。

本文分为建立前端编程基础和使用 APICloud 完成开发两部分，为大家简单介绍零基础用户使用 APICloud 开发的过程。如果你已经有前端基础但不了解 APICloud 的使用方法，可以直接跳转至第二部分哦~

一、前端基础

万丈高楼平地起，想要研发一款 APP 首先需要掌握基础的编程技术。作为一个多端开发平台，APICloud 主要是通过前端的编程实现 APP 开发，因此这里只简单介绍前端三剑客：HTML、CSS、JS 的学习方法。

1、 HTML 和 CSS

HTML 负责网页的内容，相当于网页的骨架，是一种超文本标记语言，由各种标签组成，是完成前端开发的基础。而 CSS 负责网页的样式，通过对网页元素的颜色、大小、位置等外观样式进行设置，让网页变得更加美化。

HTML 和 CSS 相对而言比较简单，学习难度不大，初学者可以在 w3cschool（www.w3cschool.cn/）和菜鸟教程（www.runoob.com/）中学习，在学习的同时还可以在网页中进行相应的调试练习，加深对于知识的理解。在初步掌握 HTML 和 CSS 之后，就可以摸索着实现对现有网页或者 UI 设计稿的还原复制了。

2、 JavaScript

JavaScript 是前端编程语言学习中的重中之重，相对 HTML 和 CSS 而言学习难度更高一些。JS 主要是负责交互效果的实现，也就是让页面中的元素动起来，是前端的核心技能。

初次接触 JS 可以先跟着网上的教学视频进行第一次简单的学习，对概念有一个总体的了解，实现快速入门。之后再找相应的专业书籍进行钻研，形成系统的知识体系，进一步理解 JS 的设计原理和思想，掌握更复杂的 js 技术，如原型对象、闭包、同步异步、沙箱等。

参考视频：www.imooc.com/learn/36

参考书籍：《Javascript 高级程序设计第四版》《JavaScript 语言精粹》

3、常用框架

在了解前端的基础技术之后，还需要掌握前端的基础框架。目前前端使用比较广泛的框架有两种：React 和 Vue。

React 框架是 Facebook 推出的一个用来构建用户界面的 JavaScript 库。 React 主要用于构建 UI，拥有较高的性能，代码逻辑非常简单，可以快速便捷的实现大型项目。

参考视频：/www.bilibili.com/video/BV1wy4y1D7JT

参考资料：React官方文档: https://react.docschina.org/docs/getting-started.html

Vue 框架是用于构建交互式的 web 界面的库。它提供了 MVVM 数据绑定和一个可组合的组件系统，具有简单、灵活的 API。

参考视频：www.bilibili.com/video/BV1Zy4y1K7SH

参考资料：《Vue.js 权威指南》，Vue官方文档: https://cn.vuejs.org/v2/guide/

二者相比各有优势，Vue 更易上手，而 React 的相对自由度更高，开发人员可以根据自身需要选择框架进行学习。

二、 APICloud 开发

在有了一定的前端基础后，用户就可以使用 APICloud 进行开发了。在 APICloud 中使用基础的 HTML,CSS,JS 技术进行开发与使用常规编译器的步骤是一致的，修改代码，提交代码，编译代码，进行相应的调试。不同的是 APICloud 引入了自己的 API、模块、框架等，因此在每一步的具体操作上存在一定的差异。

1、API 和模块

首先 APICloud 提供了自己封装的 API 对象和模块，开发人员可以直接进行调用，快速实现自己的需求。

API 对象提供了构建应用程序所需要的一些基本的方法，如窗口操作、相册和网络数据访问等；以及一些常见的属性，如屏幕宽度，系统类型等；还有一些常用事件，如电量低事件、应用进入后台事件。API 对象不需要 require 引用，可以直接在 JS 中使用。

参考资料：https://docs.APICloud.com/Client-API/api

而模块是在 API 对象之外的一种扩展，APICloud 提供了 1000+成熟的 app 功能模块，涵盖支付、 IM、直播、识别、地图等丰富功能，满足各类 app 的开发需求。在开发 app 时，可一键调用无需单独开发，从而大幅缩短开发周期。

代码中使用模块时需先在开发控制台模块页面进行添加，或者通过 config.xml 中的 feature 字段添加模块，参考feature配置（https://docs.APICloud.com/Dev-Guide/app-config-manual#15）。并通过 api.require 方法进行引用，如：

var fs = api.require('fs');fs.exist({path: 'fs://file.txt'}, function(ret, err) {});

复制代码

在调用模块时如果有疑问可以在开发者文档（https://docs.APICloud.com/）中直接搜索对应的模块名称，找到模块的说明文档进行查看。

如果平台模块不能满足项目需求，开发者也可以扩展自定义模块，开发完成后将模块包上传到“自定义模块”里面，然后添加使用。

参考资料

模块开发指南_iOS：https://docs.APICloud.com/Module-Dev/module-dev-guide-for-ios

模块开发指南_Android_Eclipse：https://docs.APICloud.com/Module-Dev/module-dev-guide-for-android

模块开发指南_Android_Studio：https://docs.APICloud.com/Module-Dev/module-dev-guide-for-android-studio

2、编译

其次在编译时，有两种编译方法。如果开发时只调用了官方模块，那么可以直接使用官方发布的 AppLoader 进行编译。

而如果在开发时加入了自己封装的模块，付费模块、第三方 SDK 模块等，那么基础的云编译可能就无法实现编译的需求。这种情况下需要开发人员自定义 AppLoader 完成应用的编译。

参考资料：https://docs.APICloud.com/Dev-Guide/Custom_Loader

3、调试

最后在调试时，APICloud 提供了真机同步调试的方法。只要确保手机和编译器位于同一网段局域网下，就可以通过扫码下载生成的软件到手机，实现同步调试。

参考资料：https://docs.APICloud.com/Dev-Tools/studio3-wifi-debug

4、AVM 框架

在 APICloud 中可以使用主流的框架完成原生应用的开发，但是如果想要实现多端应用的同时开发，就必须使用 APICloud 中的 avm.js 框架及语法进行开发。

Avm 是一个移动优先的高性能跨端 JavaScript 框架，支持一次编写多端渲染。它提供简洁的代码书写模式，编码一次，可同时生成 Android & iOS 原生 App、小程序和 WebApp。Avm 提供类 Vue 语法并兼容 React JSX，如果有 Vue 和 React 框架的基础，则可以快速上手 Avm。

参考资料：https://docs.APICloud.com/APICloud3/

5、数据云平台

APICloud 应用架构是云端一体的架构，终端实现 UI 布局和功能，云端提供数据和服务。APICloud 提供从客户端到云端完整的数据存储解决方案，云端提供数据管理功能，客户端提供数据访问 API，开发者只需要在云端创建好表结构和关系，云端会自动生成 Restful 接口，然后在客户端调用 mcm 模块 API 方法即可，不需要自己搭建服务器和写任何服务端代码。

参考资料

云服务 3.0：https://docs.APICloud.com/Cloud-API/sentosa

数据云服务开发指南：https://docs.APICloud.com/Dev-Guide/data-cloud-dev-guide

6、项目实践

上文已经介绍了在 APICloud 中进行开发可能会用到的知识，在掌握这些知识之后用户已经有了开发应用的基础。官方提供了新手教程，用户可以按照教程从零到一的实现一个应用。

参考资料

创建第一个应用：https://docs.APICloud.com/APICloud/creating-first-app

APICloud 新手入门概念篇：

https://developer.yonyou.com/thread-194445-1-1.html

APP 与小程序实战开发培训：

https://developer.yonyou.com/thread-194510-1-1.html

除此之外，用户也可以直接调用官方提供的模板，在模板的基础上进行修改，快速的定制属于自己的 APP。官方提供了对于模板的详细说明，可以在说明的指导下快速理解代码，实现项目开发。