当前位置: 首页 > Web前端 > HTML5

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

时间:2023-04-05 00:45:38 HTML5

使用API??Cloud平台,您可以利用前端技术快速开发iOS、AndroidApp、小程序、Web等多端应用。在开发过程中,调用模块可以大大提高开发效率。本文分为三个部分,告诉你如何使用API??Cloud的原生模块、H5模块和多端组件快速实现功能开发。一、原生模块使用教程原生模块是指用Android和iOS原生开发语言封装的功能模块。打包好的模块可以使用js调用。1、添加模块进入APICloud控制台(www.apicloud.com/console),找到模块库,搜索需要使用的模块。点击“+”添加2.编译customloader,下载安装到手机上。自定义加载器是一个Android或者iOS的安装包,也是我们开发调试的运行环境。代码修改后,使用开发工具Studio3的wifi同步功能将代码同步到自定义加载器,可以查看修改后代码的运行效果。如下图,点击customloader导航,点击【Compileandroidcustomloader】按钮或者【CompileiOScustomloader】按钮进行编译。编译完成后,用手机扫描二维码,下载安装到手机上。3.根据模块文档,编写调用模块的代码。在使用模块之前,一定要仔细阅读模块文档,尤其是支持的平台,是否支持Android和iOS。不要写完代码才发现只支持某个平台,做无用功。部分模块封装了第三方平台的SDK,如极光推送模块。使用此类模块时,不仅要阅读模块文档,还要阅读极光官方文档。以UIButton模块为例:https://docs.apicloud.com/Cli...打开编辑器,在页面编写代码,调用UIButton模块的开放接口为例:Studio使用方法3编辑器检出项目,新建项目,提交或更新代码,本文不做介绍,大家可以参考以下Studio3文档进行学习。https://docs.apicloud.com/api...4.使用Studio3wifi同步功能将代码同步到自定义加载器,查看代码运行效果。如下图,点击真实设备同步快捷键,点击【通过wifi连接新设备】,会弹出一个二维码、ip地址、端口号。打开手机上的customloader,点击浅灰色圆圈,弹出如下界面,点击扫描,即可扫描上图中的二维码,自动连接。或者手动输入ip地址和端口号,然后点击连接。连接成功后,灰色圆圈变为绿色。右键开发工具项目根目录-选择WiFi同步全量命令将代码同步到自定义加载器。(注意手机端的customloader必须开启,不能返回后台。)运行效果如下图:可以看到按钮模块的效果已经显示在页面上了。其他说明:(1)如果需要在config.xml中配置appkey,或者在res目录下配置文件。这两种情况,配置完代码后,先提交代码,然后再编译自定义加载器,这样这些配置项才能生效。(2)open接口的fixedOn参数指定模块所在页面的名称。如果传错了,模块将不会显示。二、H5模块使用教程H5模块是指使用HTML、CSS、JS语言开发的模块。所以这类模块需要下载模块源码,在页面中引用。解压下载的代码包:将libs目录下的base.js复制到工程脚本目录下,导入到页面中,如下图:wifi同步后,运行效果如下:3.多-终端组件使用教程多终端组件是指使用avm.js开发的组件,通常同时兼容Android、iOS、小程序、H5。具体支持取决于各个组件的文档。还需要下载组件的源码,复制到项目中,在页面引入依赖的组件。注意多终端开发模式,使用stml页面,语法类似vue。在openFrame或者openWin中,如果avm参数设置为true,就可以打开stml页面。把a-button.stml页面复制到项目的components目录下,因为a-button.stml依赖a-icon.stmlindex.jsToast.js,所以把这些文件也放到components目录下。通过阅读readme.md文档可以查看a-button.stml的介绍。如下图,在view标签中添加a-button标签,通过import语法在script标签中导入组件。自定义加载器同步WiFi效果如下:如果使用ACT组件,建议从Github或Gitee下载。Github地址:https://github.com/apicloudco...Gitee地址:https://gitee.com/apicloud/act