APICloud 原生模块、H5模块、多端组件使用教程

简介: 使用APICloud平台,可以使用前端技术快速开发iOS、Android App、小程序、Web等多端应用。在开发过程中,调用模块可以极大的提升开发效率。本文分为三个部分,告诉大家如何使用APICloud 的原生模块、H5模块以及多端组件,快速实现功能开发。

使用APICloud平台,可以使用前端技术快速开发iOS、Android App、小程序、Web等多端应用。在开发过程中,调用模块可以极大的提升开发效率。本文分为三个部分,告诉大家如何使用APICloud 的原生模块、H5模块以及多端组件,快速实现功能开发。


一、原生模块使用教程

原生模块是指使用 Android 和 iOS原生开发语言封装的功能模块。封装好的模块可以使用js调用。


1、添加模块

进入 APICloud 控制台(www.apicloud.com/console),找到模块库,搜索要使用的模块。

m1.png

点击”+“进行添加

m2.png


2、编译自定义loader ,并下载安装到手机

自定义loader是Android或iOS安装包,也是我们进行开发调试的运行环境。代码修改后,使用开发工具 Studio 3 的 wifi 同步功能,把代码同步到自定义loader中,可以查看修改代码的运行效果。 如下图,点击自定义loader 导航, 点击【编译android 自定义loader】按钮或 【编译iOS自定义loader】按钮,进行编译。编译完成后,使用手机扫描二维码,下载安装到手机。

m3.png


3、根据模块文档,编写调用模块的代码。 使用模块前一定要仔细阅读模块文档,尤其是支持平台,是否Android、iOS都支持,不要写完代码才发现只支持某一平台,做无用功。某些模块封装第三方平台的SDK, 如极光推送模块,在使用这类模块时,不仅要阅读模块文档,还要阅读极光官方的文档。


以UIButton 模块为例:https://docs.apicloud.com/Client-API/UI-Layout/UIButton

打开编辑器,在页面编写代码,以调用UIButton模块的open 接口为例:

m4.png

如何使用 Studio 3 编辑器检出项目,新建项目,提交或更新代码,本文不做介绍,可参考以下Studio 3文档进行学习。

https://docs.apicloud.com/apicloud3/#/overview/devtools?index=0&subIndex=3


4、使用 Studio 3 wifi 同步功能,将代码同步到自定义loader 查看代码运行效果。

如下图,点击真机同步快捷键 , 点击 【通过wi-fi 连接新的设备】, 弹出二维码和ip地址、端口号。

m5.png

m6.png

打开手机上的自定义loader,点击浅灰色圆圈,弹出如下界面,点击扫一扫,可以扫描上图的二维码,自动连接。或者手动输入ip 地址和端口号,然后点连接。连接成功后,灰色圆圈变绿色。

m7.jpg

在开发工具项目根目录上右键 - 选择 WiFi 同步全量 命令,就可以把代码同步到自定义loader。( 注意手机上自定义loader 要处于打开状态,不能退到后台。)

运行效果如下图:可以看到按钮模块的效果已经显示在页面上。

m9.jpg

其他注意事项:

(1)如果使用需要在config.xml 中配置appkey , 或res 目录下需要配置文件。这两种情形,要配置代码后,先提交代码,再编译自定义loader,这样这些配置项才能生效。

(2)open 接口的fixedOn 参数指定模块所在页面的name,如果传错误,会造成模块不显示。


二、H5模块使用教程

H5模块是指使用HTML、CSS、JS语言开发的模块。所以这类模块需要下载模块源码,在页面中引用。

m10.png

m11.png

将下载后的代码包解压:

m12.png

将 libs 目录下的base.js 复制到项目script 目录下,并在页面中引入,如下图:

m13.png

wifi 同步后,运行效果如下:

m14.jpg


三. 多端组件使用教程

多端组件是指使用 avm.js 开发的组件,通常同时适配Android、iOS、小程序、H5 , 具体支持情况还要看每个组件的说明文档。

m15.png

同样需要组件下载源码,复制到项目中,在页面引入依赖的组件。注意多端开发模式,使用的是stml 页面,语法类似vue 。在openFrame 或 openWin 时 avm 参数传true,可以打开stml 页面。

m16.png

m17.png

将a-button.stml 页面复制到项目的components目录,因为a-button.stml 又依赖a-icon.stml index.js Toast.js , 所以将这些文件也放到components目录。通过阅读readme.md 文档,可以查查看a-button.stml 的使用介绍。如下图,通过在 view 标签中 添加 a-button 标签,在 script 标签中通过 import 语法引入组件。

m18.png

WiFi 同步到自定义loader 运行效果如下:

m19.jpg

如果使用ACT组件,推荐从Github或Gitee下载。

Github 地址:https://github.com/apicloudcom/act

Gitee 地址 :https://gitee.com/apicloud/act


目录
相关文章
|
Java 数据库连接 数据库
|
缓存 Linux
CentOS7配置阿里yum源 超详细!!!
CentOS7配置阿里yum源 超详细!!!
29895 2
|
11月前
|
Java 数据库连接 数据库
sqlLite 如何使用数据库连接池
这篇文章介绍了如何在SQLite数据库操作中使用HikariCP连接池以减少频繁建立和释放数据库连接的资源消耗,包括在Maven项目中添加依赖、配置HikariDataSource对象以及实现数据库连接池的具体代码示例。
|
4月前
|
前端开发 搜索推荐
使用DeepSeek快速创建的个人网站
这是一份使用DeepSeek快速创建个人网站的10分钟指南。内容分为四个步骤:搭建基础架构(HTML框架)、设计核心内容区块(关于我、作品展示等)、快速配置样式(CSS美化页面)以及添加联系表单并部署到GitHub Pages。通过简单的代码和DeepSeek的智能辅助功能,用户可以轻松实现个性化调整,如更换主题色、增加模块或优化响应式设计。虽然整体流程简单高效,但可能因功能有限或美观度不足而需进一步扩展与改进。
445 11
|
7月前
|
JSON 缓存 前端开发
HarmonyOS NEXT 5.0鸿蒙开发一套影院APP(附带源码)
本项目基于HarmonyOS NEXT 5.0开发了一款影院应用程序,主要实现了电影和影院信息的展示功能。应用包括首页、电影列表、影院列表等模块。首页包含轮播图与正在热映及即将上映的电影切换显示;电影列表模块通过API获取电影数据并以网格形式展示,用户可以查看电影详情;影院列表则允许用户选择城市后查看对应影院信息,并支持城市选择弹窗。此外,项目中还集成了Axios用于网络请求,并进行了二次封装以简化接口调用流程,同时添加了请求和响应拦截器来处理通用逻辑。整体代码结构清晰,使用了组件化开发方式,便于维护和扩展。 该简介概括了提供的内容,但请注意实际开发中还需考虑UI优化、性能提升等方面的工作。
290 11
|
10月前
|
自然语言处理 IDE 开发工具
通义灵码编程智能体上线,支持Qwen3模型
通义灵码最全使用指南,一键收藏。
126878 29
通义灵码编程智能体上线,支持Qwen3模型
|
7月前
|
存储 JavaScript 前端开发
基于 SpringBoot 和 Vue 开发校园点餐订餐外卖跑腿Java源码
一个非常实用的校园外卖系统,基于 SpringBoot 和 Vue 的开发。这一系统源于黑马的外卖案例项目 经过站长的进一步改进和优化,提供了更丰富的功能和更高的可用性。 这个项目的架构设计非常有趣。虽然它采用了SpringBoot和Vue的组合,但并不是一个完全分离的项目。 前端视图通过JS的方式引入了Vue和Element UI,既能利用Vue的快速开发优势,
288 13
|
11月前
|
存储 Ubuntu 持续交付
openstack安装配置
【8月更文挑战第5天】
728 7
|
存储 监控 前端开发
Sentry 监控部署与使用(详细流程)
Sentry 监控部署与使用(详细流程)
11205 1