APICloud App开发上手经验之模块调用

helloworld_98548882
• 阅读 433

继上次简单分享了使用 APICloud 开发APP的全流程后,今天来分享一下如何使用模块。APICloud 提供了很多方便好用的模块,只要学习自己想要使用的模块的文档,然后调用模块就可以使用了。使用模块可以大大减少自己需要写的代码量,而且对于新手来说,在自己开发经验不足的情况下,也许并不能胜任一些功能的开发,这时候使用模块就可以让自己的 APP 也拥有这些功能了,看到自己的 APP 也具有了丰富的功能会比较有成就感,不会使我们的学习感到枯燥,也不容易感觉学习太难而因此止步。

这篇文章使用了一个简单的免费模块 PersonalCenter,首先我们打开 APICloud 官网的控制台创建一个项目,创建项目的方法相信大家都已经熟悉了,这里就不再赘述。创建好项目之后,点击上方导航栏的模块 Store,然后搜索个人信息,之后就看到了 PersonalCenter 模块。点进去之后再点立即使用,然后选择自己的应用就好了,一定要选择自己现在要开发的项目,不要选错哦。

点进去之后再点立即使用,然后选择自己的应用就好了,一定要选择自己现在要开发的项目,不要选错哦。模块添加成功之后,我们返回来这个页面,点击下面的小字 “查看模块文档”,把这个文档一直开着,一会回来还会用到。模块文档里面详细介绍了这个模块的用法。

之后我们就可以创建证书,编译自定义 Loader 了,这次我们依然选择 Android 版,具体操作相信大家已经会了,如果有不了解的朋友可以看一下上篇文章:

把下载好的自定义 Loader 拖入逍遥模拟器安装好,打开我们的开发工具 APICloud Studio3, 把项目用 WIFI 同步到模拟器后,我们进行一个设置,点击开发工具左下角的齿轮,然后点击设置,在设置界面里点击扩展。然后勾选 Auto Sync 这个选项,这样我们每次保存后,项目就会自动同步到模拟器中,更改完代码后不用再每次都手动的进行同步了,非常方便的小功能。

在使用模块之前,我们找到入口页面 main.html 的 apiready = function () 方法,把里面的内容清空。这个方法里面的属性内容就是最初页面上显示的那些属性,我们把里面的属性内容清空,之后把 body 里的 Hello APP 删除或者注释一下,然后保存。现在发现模拟器中的应用已经是空白了。

然后我们找到刚才的模块文档,可以看到这个模块分别有六个方法,分别是打开、更新、关闭、设置选中按钮、显示和隐藏。

我们先试着使用一下 open 方法,open 方法中介绍了许多属性,这时我们为了快速展现成果,先不管这些属性是什么,直接往下看,找到 open 方法下面的事例代码,直接用事例代码来做一个演示。

这时我们把文档中 open 方法下方的示例代码粘贴进这个方法里,一定要找准哦。粘贴进来之后我们可以鼠标右键,点击格式化文档,让代码看着条理更清楚一些。再次强调一下是粘贴到 main.html 页面的 apiready = function () 方法中的大括号里。

示例代码 var personalCenter = api.require('personalCenter');var btnArray = [{ 'bgImg': 'widget://res/personalCenter/personal_btn_nor.png', 'selectedImg': 'widget://res/personalCenter/personal_btn_sele.png', 'lightImg': 'widget://res/personalCenter/personal_btn_light.png', 'title': '好友', 'count': '5'}, { 'bgImg': 'widget://res/personalCenter/personal_btn_nor.png', 'selectedImg': 'widget://res/personalCenter/personal_btn_sele.png', 'lightImg': 'widget://res/personalCenter/personal_btn_light.png', 'title': '回贴', 'count': '240'}, { 'bgImg': 'widget://res/personalCenter/personal_btn_nor.png', 'selectedImg': 'widget://res/personalCenter/personal_btn_sele.png', 'lightImg': 'widget://res/personalCenter/personal_btn_light.png', 'title': '主题', 'count': '27'}];var count = 382;var y = 44; personalCenter.open({ 'y': y, 'imgPath': 'widget://res/personalCenter/d7d1d308fe165b984c09728e7118e9f1.jpg', 'placeholderImg': 'widget://res/common/placeHolder.png', 'userName': 'APICloud', 'count': count, 'modButton': { 'bgImg': 'widget://res/personalCenter/mod_normal.png', 'lightImg': 'widget://res/personalCenter/mod_click.png' }, fixedOn: api.frameName, 'btnArray': btnArray }, function(ret, err) { /* 头像修改按钮. / if (btnArray.length === ret.click) { api.confirm({ title: '聊天盒子', msg: '您想要从哪里选取图片 ?', buttons: ['优雅自拍', '相册收藏', '取消'] }, function(ret, err) { var sourceType = 'album'; if (3 == ret.buttonIndex) { // 取消 return; } if (1 == ret.buttonIndex) { // 打开相机 sourceType = 'camera'; } api.getPicture({ sourceType: sourceType, encodingType: 'png', mediaValue: 'pic' }, function(ret, err) { if (ret) { personalCenter.updateValue({ imgPath: ret.data, count: count }); } }); }); return; } var msg; / 修改按钮. */ if (btnArray.length + 1 == ret.click) { msg = '您没有修改权限!'; } if (btnArray.length + 2 == ret.click) { msg = '您没有设置权限!' } if (btnArray.length == ret.click) { btn = btnArray[ret.click]; msg = btn.title + ' 数量为 ' + btn.count } api.toast({ msg: msg, duration: 1000, location: 'top' }); });

保存一下自动同步,可以看到模拟器中应用出现了这个界面,界面的大体轮廓出来了,但是并没有图片,这是因为代码中的图片我们本地里并没有,我们需要给代码里加一张我们本地的图片。

这时我们就要返回到前面了解一下 open 方法里面的属性了。我们看到三个 bgImg 属性都是修改按钮的背景图片,并不是总体的背景图片地址,继续往下找,在 open 方法的事例代码中看到了 imgPath 这个属性,想必这个就是总体的图片地址了。我们把它替换成本地的图片,首先找一张图片复制到左侧文件列表中的 image 中,这时再修改图片路径:

替换前:

替换后(我的图片名称是 center):

保存一下,这次我们的应用就有背景图片了。

简单的更换了一下背景图片,头像也换了,可以看到这个模块的背景图片是模糊化之后的头像图片。这时在图片和顶部之间有一定的空白,应该要把模块整体向上平移一些,在文档中找到管理位置的属性,是 y 值。现在代码中的 y 值为 44,把 y 值改成 0,再保存一下,空白就没有了。

现在代码中的 y 值为 44,把 y 值改成 0,再保存一下,空白就没有了。

模块基本的样貌已经具备了,我们再了解一下其他的功能,界面上的所有都是可以改的,下面的好友栏、回帖栏、主题栏,他们各自可以设置各自的背景图片,还有字体大小,字体颜色,字体内容等等。数值现在是固定写死的,如果我们后面学习了后端知识,也可以做到数据的交互。头像图片下面的文字也可以更改内容、大小与颜色。

体验完了界面布局,接下来我们看一下左上角的修改按钮或右上角的设置按钮,我们点击左上角的修改按钮,会弹出您没有修改权限。点击右上角的设置按钮,会弹出您没有设置权限。我们看一下修改按钮部分的代码,为什么会弹出这个提示。

这段代码的意思是当我们点击按钮后的返回值如果是 btnArray 这个数组的长度 +1,那么就提示您没有修改权限。如果点击按钮后的返回值如果是 btnArray 这个数组的长度 +2,那么就提示您没有设置权限。

我们在前面找一下 btnArray 这个数组,数组的长度是 3,所以当返回值是 4 的时候,就会执行第一个 if 语句中的代码了,当返回值是 5 的时候,就会执行第二个个 if 语句中的代码。

然后我们在回调函数 function 大括号里的第一行加一句代码,把 ret 对象转换为 JSON 字符串,就可以看出来按钮和代码的对应关系了。这里涉及到一点 JSON 的知识,如果不太懂的话,大家之后可以去了解一下。

再保存一下,我们点击修改,这时弹出的是 click4,,我们可以看出来点击修改按钮确实会执行第一个 if 语句中的代码,因为判断条件是 ret 对象的值是 4。同样的,点击设置会弹出 click5 的提示。

看到这里我们就明白了,如果我们想要继续做一个修改或者设置的页面,只需要在此 if 语句里再调用一个列表页面的模块就好了,把它当做我们的修改页面。两个模块组合起来用,不需要自己写代码,只需要改一改现成的模块代码就好了,怎么样,非常方便吧,大家之后可以去试一试呀。这里我给大家推荐 UIListView 模块,是一个列表模块,拥有左滑的交互功能,也是免费模块中很好用的一个。

文章简单的介绍了一下 PersonalCenter 模块的 open 函数,大家也可以体验一下模块中的其他函数,熟练之后就可以多添加几个实用的模块,进行模块之间的组合和交互了。另外我们也可以从模块的代码中学习一些开发的知识点和交互逻辑,如果直接拿成品 APP 模板的源码来学习比较吃力的话,不如先从一个简单的模块入手,对我们的学习也是非常有帮助的。今天的介绍就到此结束了,希望大家学习进步,早日成为开发高手。

YonBuilder移动端低代码开发平台(APICloud)是一款“云端一体”的低代码开发平台,可免费自助制作APP,也可进行专业APP定制开发。使用APICloud开发平台,是用Web语言去开发iOS和Android应用,这样将开发难度大幅降低,开发周期缩短将近一倍。此外,APICloud平台上有上千个各式各样的功能模块,一键调用方便去开发各类App。

点赞
收藏
评论区
推荐文章
半臻 半臻
3年前
Python基础4——模块与包
12模块与包模块通俗地理解为.py文件,里面定义了变量、函数和类。需要的时候就可以导入这些模块。执行步骤1.在python模块加载路径中查找相应的模块文件2.将模块文件编译成中间代码3.执行模块文件中的代码12.1模块分类1.内置模块,也叫标准库,比如说random,time,大概有200多个2.第三方模块,也称为第三方库,使用pipins
菜鸟阿都 菜鸟阿都
3年前
django使用第三方模块实现重置密码功能
    为大家介绍一个django开发的利器,重置密码模块:djangopasswordreset,使用起来非常方便,但网上的相关资料很少,本人第一次使用,遇到了坑很深,所以特意和大家分享一下。    用django开发网站是个很方便的,并且有大量的第三方模块可以调用,djang
Jacquelyn38 Jacquelyn38
3年前
前端开发进化之路
初级程序员仅能完成简单模块和项目的开发工作,难以胜任复杂模块的开发。通常是入行不久,1年及以下工作经验的同学。能力要求1.熟悉前端基础知识如HTML、JS、CSS。2.能够使用一门MVVM框架进行简单的业务开发。3.遇到复杂的组件和模块,会找现有的轮子使用。4.会使用百度、google等检索工具搜索问题
小白从0到1学习app开发,以APICloud为例
小白如何开发APP,需要学习哪些知识?可以从0到1完成一个APP的开发。第一步,注册选择开发工具有一些教程上会说先创建应用,再选择工具,是使用的控制台创建的https://www.apicloud.com/studio3APICloudStudio3工具的教程https://docs.apicloud.com/DevTools/studio3visu
浩浩 浩浩
3年前
【Flutter实战】包管理
2.3包管理在软件开发中,很多时候有一些公共的库或SDK可能会被很多项目用到,因此,将这些代码单独抽到一个独立模块,然后哪个项目需要使用时再直接集成这个模块,便可大大提高开发效率。很多编程语言或开发工具都支持这种“模块共享”机制,如Java语言中这种独立模块会被打成一个jar包,Android中的aar包,Web开发中的npm包等。为了方便表述,我们将
APICloud平台常用技术点汇总详解
APICloud移动低代码开发平台介绍:使用APICloud可以开发移动APP、小程序、html5网页应用。如果要实现编写一套代码编译为多端应用(移动APP、小程序、html5),需使用avm.js框架进行开发。如果只开发APP,则可以使用前端技术(HTML5、Vue、react等)、avm.js进行开发,还可以使用模块商店大量的原生
实例|新手使用APICloud可视化开发商城APP
APICloud的可视化开发功能,听说只要上手托拉拽就可以完成各种页面的开发,不需要写代码,可以大大减少开发的用时,主要是对新手非常友好的。今天就来体验一下,看看能否用最少的时间完成一个商城主页面的创建呢?首先下载并安装开发工具APICloudStudio3。下载地址:https://www.apicloud.com/studio3打开后创建项目:
Stella981 Stella981
3年前
Python unittest模块的使用笔记:对mock.patch()的被mock函数的说明
       现在假设需要对get\_app模块内的create\_app函数做单元测试,同时create\_app函数调用了另一模块utils的load\_yaml函数。由于模块utils的load\_yaml函数可能处于开发阶段或是需要通过网络传输数据,从而导致测试的不便。这时就需要对load\_yaml做一个mock.patch,即伪造一个load\_
Stella981 Stella981
3年前
Qt5 自带 串口通讯基础模块
QtSerialPort简介QtSerialPort模块是Qt5库的附加部分,为硬件和虚拟的串口提供了统一的接口。注意:该模块也增加了对Qt4的支持。    串口由于其简单和可靠,目前在像嵌入式系统,机器人等工业中依旧用得很多。使用QtSerialPort模块,开发者可以大大缩短开发串口相关的应用程
Stella981 Stella981
3年前
Android 主Module引用依赖Module,却无法使用里面的依赖库
如果模块化开发中遇到多模块的AndroidManifest.xml没有合并or多模块的资源文件没有合并or模块Ainclude了模块B,而无法使用模块B内依赖的其他aar包中的类的时候or提示Support包版本不一致这篇文章可能就是你要的解决方案~举个栗子:比如我们现在有一个App模块设计为:主