继上次简略分享了应用 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 模板的源码来学习比拟吃力的话，不如先从一个简略的模块动手，对咱们的学习也是十分有帮忙的。明天的介绍就到此结束了，心愿大家学习提高，早日成为开发高手。