上次简单分享了使用API??Cloud开发APP的全过程，今天分享一下模块的使用方法。APICloud提供了许多方便易用的模块。你只需要研究你要使用的模块的文档，然后调用模块就可以使用了。使用模块可以大大减少你需要编写的代码量，而且对于新手来说，在开发经验不足的情况下，可能无法开发出一些功能。这时候使用模块就可以让你的APP也具备这些功能。是的，看到我们的APP也有丰富的功能会让我们很有成就感，不会让我们的学习感到枯燥，也不容易觉得学习太难而停下来。本文使用一个简单的免费模块PersonalCenter。首先我们打开APICloud官网控制台创建一个项目。创建项目的方法相信大家都很熟悉，这里就不赘述了。创建好项目后，点击上方导航栏的模块Store，然后搜索个人信息，即可看到PersonalCenter模块。点进去之后点UseNow，然后选择自己的应用。一定要选择现在要开发的项目，不要选错了。点进去之后点UseNow，然后选择自己的应用。一定要选择现在要开发的项目，不要选错了。模块添加成功后，我们回到这个页面，点击“ViewModuleDocumentation”下面的小字，把这个文档保持打开状态，等我们回来的时候再用。该模块的使用在模块文档中有详细描述。之后，我们可以创建一个证书并编译一个自定义的Loader。这次我们依然选择安卓版。具体操作相信你已经明白了。不知道的可以看看之前的文章：将下载好的自定义Loader拖入逍遥模拟器安装好后，打开我们的开发工具APICloudStudio3，将项目同步到模拟器WIFI后，我们进行设置，点击开发工具左下角的齿轮，然后点击设置，在设置界面点击扩展。然后勾选AutoSync选项，这样我们每次保存的时候，工程都会自动同步到模拟器中。更改代码后，无需每次都手动同步。是一个很方便的小功能。在使用模块之前，我们找到main.html入口页的apiready=function()方法，将里面的内容清空。该方法中的属性内容为初始页面显示的内容。我们把里面的属性内容清空，然后把body里的HelloAPP删除或者注释掉，然后保存。现在发现模拟器里面的应用是空白的。然后我们找到刚才的模块文档，可以看到这个模块有六个方法，分别是打开、更新、关闭、设置勾选按钮、显示和隐藏。让我们先尝试使用open方法。open方法中引入了许多属性。这时候为了快速展示结果，我们先不管这些属性是什么，直接往下看，找到open方法下的examplecode，直接用examplecode做一个demo。这个时候我们把文档中open方法下面的示例代码粘贴到这个方法中，一定要确定。粘贴进去后，我们可以右击，点击FormatDocument，让代码看起来更有条理。同样，它被粘贴到main.html页面的apiready=function()方法中的花括号中。示例代码varpersonalCenter=api.require('personalCenter');varbtnArray=[{'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'}];varcount=382;vary=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:['优雅自拍','AlbumCollection','Cancel']},function(ret,err){varsourceType='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});}});});返回;}变量消息；/*修改按钮。*/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'});});保存为自动同步，可以看到在模拟器中的application中出现了这个界面，界面的大致轮廓出来了，但是没有图片。这是因为代码中的图片本地不存在。我们需要在代码中加入一张本地图片。现在我们要回到前面来了解open方法中的属性。我们看到三个bgImg属性是修改按钮的背景图，并不是整体的背景图地址。继续往下看，在open方法的示例代码中看到了imgPath属性。大概这是整体图像地址。我们用本地图片替换吧，先找一张图片复制到左边文件列表中的图片中，然后修改图片路径：替换前：替换后（我的图片名称是center）：保存，这个这次我们的应用程序有一个背景图像。简单的改变了背景图和头像，可以看到这个模块的背景图就是模糊后的头像。此时图片和顶部有一定的差距，模块应该整体向上平移，管理位置的属性可以在文档中找到，就是y值。现在代码中的y值为44，将y值改为0，再次保存，空白就会消失。现在代码中的y值为44，将y值改为0，再次保存，空白就会消失。模块的基本外观就做好了。让我们看看其他功能。界面上的所有内容都可以更改。对于下方的好友栏、回复栏、主题栏，可以自行设置背景图片和字体大小、字体颜色、字体内容等。该值现在是硬编码的。如果后面学习了后端知识，我们还可以和数据进行交互。头像图片下方的文字内容、大小和颜色也可以更改。体验完界面布局，再来看看左上角的修改按钮或者右上角的设置按钮。如果我们点击左上角的修改按钮，会弹出没有权限修改。点击右上角的设置按钮，会弹出没有权限设置。下面看一下修改按钮的代码，为什么会弹出这个提示。这段代码的意思是，如果我们点击按钮后的返回值是btnArray数组的长度+1，那么会提示你没有权限修改。如果点击按钮后的返回值是btnArray数组的长度+2，会提示你没有权限设置。我们找前面的btnArray数组，数组长度为3，所以当返回值为4时，会执行第一个if语句中的代码，当返回值为5时，会执行第二个if语句被执行的每个if语句中的代码。然后我们在回调函数function的大括号里面的第一行添加一行代码，将ret对象转成JSON字符串，然后我们就可以看到按钮和代码的对应关系了。这就涉及到一点JSON的知识了。不太了解的可以后面再了解。再次保存，我们点击修改，此时弹出click4，可以看到点击修改按钮确实会执行第一条if语句中的代码，因为判断条件是ret对象的值为4同理，点击设置会弹出click5提示。看到这里，我们就明白了，如果我们想继续做一个修改或者设置页面，只需要在这个if语句中调用列表页面的另一个模块，作为我们的修改页面就可以了。结合两个模块，不需要自己写代码，只需要改动已有的模块代码即可。怎么样，很方便吧。您可以稍后再试。在这里我向大家推荐UIListView模块。是一个带有左滑交互功能的列表模块，也是免费模块中非常好用的一个。文章简单介绍了个人中心模块的开放功能。您还可以体验模块中的其他功能。熟练之后，可以添加几个比较实用的模块，相互组合交互。此外，我们还可以从模块的代码中学习到一些开发知识点和交互逻辑。如果直接从成品APP模板的源码中学习比较困难，不如从一个简单的模块入手，这对我们的学习也很有帮助。的。今天的介绍到此结束。希望大家学习进步，早日成为开发高手。
