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

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

一、原生模块使用教程

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

1、添加模块

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

点击”+“进行添加

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

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

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

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

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

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

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

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

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

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

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

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

其他注意事项：

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

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

二、H5模块使用教程

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

将下载后的代码包解压：

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

wifi 同步后，运行效果如下：

三、多端组件使用教程

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

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

将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 语法引入组件。

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

如果使用ACT组件，推荐从Github或Gitee下载。
Github 地址：https://github.com/apicloudcom/act
Gitee 地址：https://gitee.com/apicloud/act

APICloud 原生模块、H5模块、多端组件使用教程相关推荐

2023年千月影视双端app和乐彩V8双端影视源码强制全屏播放用tinyPlayer原生播放器模块
简单的介绍一下 tinyPlayer是原生播放器模块,在APP中可以直接调用,可以强制旋转屏幕,可以进行屏幕调节亮度,快进,倍速等 lecast模块这个模块是乐播的投屏,调用它,可以使您的APP于本地 ...
registerModule: 动态注册vuex模块，对于自定义生成组件很有用
registerModule: 动态注册vuex模块 <div class="reference">在 store 创建之后,你可以使用 store.registerM ...
模块开发之时间/日期组件moment.js使用(十四)
文章目录前言基本使用 moment与字符串想到转换当前时间语法创建moment实例的方式时间字符串+指定格式时间字符串+多定格式 moment完全支持iso-8601格式字符串以对象形 ...
模块与模块之间通信设计-组件设计思想
--模块与模块之间的设计,除了大范围的设计模式,更多不属于模式的多种方法调用都可以通信. -- 如何设计低耦合的,高内聚的模块之间通信?原则: -- 1.用管理器用接口,尽量关联接口(管理器), ...
零基础如何上手APICloud App、小程序多端开发
业务需求变化快.开发人员成本高是现在企业面临的主要问题.多端开发技术则可以很好的解决这些问题,开发一次可以生成iOS.Android.小程序.Web等多端应用.APICloud凭借多年的移动开发技术积 ...
移动端cube界面设计html,滴滴 Web 移动端组件库 cube-ui 开源
滴滴 WebApp 团队在去年底用 Vue.js 2.0 对业务进行重构,并开发了一套移动端组件库 cube-ui 支撑业务的开发.经过了一年多的业务考验,cube-ui 也日趋成熟,而且我们相信除了 ...
滴滴 Web 移动端组件库 cube-ui 开源
滴滴 WebApp 团队在去年底用 Vue.js 2.0 对业务进行重构,并开发了一套移动端组件库 cube-ui 支撑业务的开发.经过了一年多的业务考验,cube-ui 也日趋成熟,而且我们相信除了 ...
Vue.js(十) element-ui PC端组件库
一:简介饿了么公司基于Vue开发了两套UI组件库,PC端组件库和移动端组件库. 一部分组件库是对原生的HTML标签元素的封装,增加了一些新的功能. 另一部分组件库是原生HTML标签元素没有的,是 ...
nodejs学习巩固笔记-nodejs基础，Node.js 高级编程（核心模块、模块加载机制）
目录 Nodejs 基础大前端开发过程中的必备技能 nodejs 的架构为什么是 Nodejs Nodejs 异步 IO Nodejs 事件驱动架构全局对象全局变量之 process 核心模块 ...

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

APICloud 原生模块、H5模块、多端组件使用教程相关推荐

最新文章

热门文章