本帖最后由 中山赢友网络科技有限公司 于 2015-10-26 16:44 编辑

继
《APICloud之小白图解教程系列（一）：认识APICloud》
《APICloud之小白图解教程系列（二）：APICloud Studio的使用和布局》这两篇之后的第三篇文章！

本文章有以下知识点：
1、模块使用流程
2、模块使用注意事项
3、模块案例实践

知其根，通其理：模块使用流程

在我们开发APP过程中用到最多的是端API的函数和模块了，基本贯穿我们所有的APP应用。那什么是模块呢？换句话说就是组件，在APICloud中可以这样理解，一些封装好的案例（组件，模块）直接套进去使用。

不废话了，下面就演示一下模块的添加和使用流程。

1、打开控制台，找到你的应用，点击左边的菜单模块：

<ignore_js_op>

2、在模块页面选择右边的模块列表，并搜索你要添加的模块（这里我们是UIScrollPicture）然后点击左边的“+”添加模块

<ignore_js_op>

好了，基本的模块添加流程已经完成！下面是添加模块需要注意的部分

用心、细心成就伟大产品：模块使用注意事项

1、：必须在控制台添加模块才能使用！
2、：有些模块必须申请Key才能使用，必须严格按照官方提供的第三方接入教程申请Key。如：百度模块，支付宝模块，微信模块，等等。第三方接入教程：http://docs.apicloud.com/APIClou ... 87%E5%8D%97/baiXing
3、：部分模块还需要在config.xml中配置相应的节点才能使用，如百度模块(bMap)需要配置：

  1. <feature name="bMap">
  2. <param name="android_api_key" value="f7Is0dWLom2q6rV3ZfFPZ1aa" />
  3. <param name="ios_api_key" value="81qz3dBYB5q2nGji4IYrawr1" />
  4. </feature>

复制代码

4、在页面上必须通过api.require("模块名称")引用该模块，并放在apiready=function(){}方法中！

5、编写好代码之后，必须云编译或者编译自定义loader使用！

6、额外说明：申请第三方Key的时候，IOS的Bundle ID其实就是包名（特别注意：IOS的未发布正式版的APP全部包名是：com.apicloud.testapp，正式版就是下面截图的包名！)。如何获取包名：
<ignore_js_op>

抛砖引玉，举一反三：模块案例实践

好了，说了那么多，不如实践一下：

实践一：UIScrollPicture轮播图的使用

1、步骤一，先代码该模块的文档：http://docs.apicloud.com/%E7%AB% ... %80/UIScrollPicture

2、复制文档中的Open方法的案例到编辑器中，注意（所有的模块都要执行上面说的注意事项），代码如下：

  1. var obj = api.require('UIScrollPicture');
  2. var paths = ['widget://res/slide1.jpg', 'widget://res/slide2.jpg', 'http://f.hiphotos.baidu.com/image/pic/item/4e4a20a4462309f7bdca9423710e0cf3d7cad65d.jpg', 'widget://res/slide3.jpg', 'widget://res/slide4.jpg'];
  3. var captions = ['title1', 'title2', 'title3', 'title4', 'title5'];
  4. obj.open({
  5. rect: {
  6. x: 0,
  7. y: 20,
  8. w: api.winWidth,
  9. h: 200
  10. },
  11. data: {
  12. paths: paths,
  13. captions: captions
  14. },
  15. styles: {
  16. caption: {
  17. height: 35,
  18. color: '#E0FFFF',
  19. size: 13,
  20. bgColor: '#696969',
  21. position: 'bottom'
  22. },
  23. indicator: {
  24. align: 'center',
  25. color: '#FFFFFF',
  26. activeColor: '#DA70D6'
  27. }
  28. },
  29. placeholderImg: 'widget://res/slide1.jpg',
  30. contentMode: 'scaleToFill',
  31. interval: 3,
  32. loop: true,
  33. fixedOn: '',
  34. fixed: false
  35. }, function(ret, err){
  36. if(ret.status){
  37. if(ret.eventType == 'click'){
  38. //点击图片的操作
  39. alert(ret.index);
  40. }
  41. }
  42. });

复制代码

3、页面的HTML代码如下：

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
  6. <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
  7. <title>小白之路</title>
  8. <link rel="stylesheet" type="text/css" href="../css/api.css" />
  9. <style>
  10. </style>
  11. </head>
  12. <body>
  13. <!--幻灯片的容器-->
  14. <div id="bannder"></div>
  15. <!--主要内容容器-->
  16. <div class="other-content">
  17. 1
  18. <br />
  19. 2
  20. <br />
  21. 3
  22. <br />
  23. 4
  24. <br />
  25. 5
  26. <br />
  27. 6
  28. <br />
  29. 7
  30. <br />
  31. 8
  32. <br />
  33. 9
  34. <br />
  35. 10
  36. <br />
  37. 11
  38. <br />
  39. 12
  40. <br />
  41. 13
  42. <br />
  43. 14
  44. <br />
  45. 15
  46. <br />
  47. 16
  48. <br />
  49. 17
  50. <br />
  51. 18
  52. <br />
  53. 19
  54. <br />
  55. 20
  56. <br />
  57. 21
  58. <br />
  59. 22
  60. <br />
  61. </div>
  62. </body>
  63. <script type="text/javascript" src="../script/api.js"></script>
  64. <script type="text/javascript">
  65. apiready = function() {
  66. var obj = api.require('UIScrollPicture');
  67. var paths = ['http://www.winu.net/a.jpg', 'http://www.winu.net/a.jpg', 'http://www.winu.net/a.jpg'];
  68. var captions = ['标题一', '标题二', '标题三'];
  69. obj.open({
  70. rect : {
  71. x : 0,
  72. y : 0,
  73. w : api.winWidth,
  74. h : 200
  75. },
  76. data : {
  77. paths : paths,
  78. captions : captions
  79. },
  80. styles : {
  81. caption : {
  82. height : 35,
  83. color : '#E0FFFF',
  84. size : 13,
  85. bgColor : '#696969',
  86. position : 'bottom'
  87. },
  88. indicator : {
  89. align : 'center',
  90. color : '#FFFFFF',
  91. activeColor : '#DA70D6'
  92. }
  93. },
  94. placeholderImg : 'widget://res/slide1.jpg',
  95. contentMode : 'scaleToFill',
  96. interval : 3,
  97. loop : true,
  98. fixedOn : 'main',
  99. fixed : false
  100. }, function(ret, err) {
  101. if (ret.status) {
  102. if (ret.eventType == 'click') {
  103. //点击图片的操作
  104. alert(ret.index);
  105. }
  106. }
  107. });
  108. };
  109. </script>
  110. </html>

复制代码

好了，现在问题就来了，可能很多人按照代码写了之后发现并没有显示出来。那你就应该按照我说的方法检查一遍：

1、是否在控制台添加该模块了
2、是否该模块放在Frame页面，而不是Window页面，必须要放在Frame页面！
3、看看刚刚复制过来的代码是否填写fixedOn参数了。这个非常重要！！！！，必须写当前Frame的名称！！！！！要不然会直接盖住头部！
4、是否云提交代码和更新了。
5、提交代码之后是否编译自定义loader或者云编译了。
6、编译自定义loader之后，是否点真机运行了。
7、还有就是广告图的图片路径必须正确！！！

好了，通过这些检查，应该没有任何问题了！你将看到下面的效果：

<ignore_js_op>

大家仔细发现，问题又来了，发现幻灯片盖住了主要内容！那时因为我们没有给banner容器高度，应该给banner容器的高度和UIScrollPicture使用的高度一致：200

那代码改造为（只需要添加样式即可）：

  1. <style type="text/css">
  2. #bannder {
  3. height: 200px;        /* 和UIScrollPictrue模块一样高度 */
  4. }
  5. </style>

复制代码

那现在就正常了！：

<ignore_js_op>

注：如果想隐藏轮播图的文字，可以设置captions参数为：[] 即可，如图：
<ignore_js_op>

好了。UIScrollPicture使用案例完毕。

所有的代码为：

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
  6. <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
  7. <title>小白之路</title>
  8. <link rel="stylesheet" type="text/css" href="../css/api.css" />
  9. <style type="text/css">
  10. #bannder {
  11. height: 200px;        /* 和UIScrollPictrue模块一样高度 */
  12. }
  13. </style>
  14. </head>
  15. <body>
  16. <!--幻灯片的容器-->
  17. <div id="bannder"></div>
  18. <!--主要内容容器-->
  19. <div class="other-content">
  20. 1
  21. <br />
  22. 2
  23. <br />
  24. 3
  25. <br />
  26. 4
  27. <br />
  28. 5
  29. <br />
  30. 6
  31. <br />
  32. 7
  33. <br />
  34. 8
  35. <br />
  36. 9
  37. <br />
  38. 10
  39. <br />
  40. 11
  41. <br />
  42. 12
  43. <br />
  44. 13
  45. <br />
  46. 14
  47. <br />
  48. 15
  49. <br />
  50. 16
  51. <br />
  52. 17
  53. <br />
  54. 18
  55. <br />
  56. 19
  57. <br />
  58. 20
  59. <br />
  60. 21
  61. <br />
  62. 22
  63. <br />
  64. </div>
  65. </body>
  66. <script type="text/javascript" src="../script/api.js"></script>
  67. <script type="text/javascript">
  68. apiready = function() {
  69. var obj = api.require('UIScrollPicture');
  70. var paths = ['http://www.winu.net/a.jpg', 'http://www.winu.net/a.jpg', 'http://www.winu.net/a.jpg'];
  71. // 如果不希望显示文字，设置为：[];
  72. var captions = ['标题一', '标题二', '标题三'];
  73. obj.open({
  74. rect : {
  75. x : 0,
  76. y : 0,
  77. w : api.winWidth,
  78. h : 200
  79. },
  80. data : {
  81. paths : paths,
  82. captions : captions
  83. },
  84. styles : {
  85. caption : {
  86. height : 35,
  87. color : '#E0FFFF',
  88. size : 13,
  89. bgColor : '#696969',
  90. position : 'bottom'
  91. },
  92. indicator : {
  93. align : 'center',
  94. color : '#FFFFFF',
  95. activeColor : '#DA70D6'
  96. }
  97. },
  98. placeholderImg : 'widget://res/slide1.jpg',
  99. contentMode : 'scaleToFill',
  100. interval : 3,
  101. loop : true,
  102. fixedOn : 'main',
  103. fixed : false
  104. }, function(ret, err) {
  105. if (ret.status) {
  106. if (ret.eventType == 'click') {
  107. //点击图片的操作
  108. alert(ret.index);
  109. }
  110. }
  111. });
  112. };
  113. </script>
  114. </html>

复制代码

所有的模块开发流程都基本一致，学会了这个，基本其他的也学会了！

好了，基础的东西基本讲完了，之后的所有教程都教大家如何布局，如何使用常用模块，如何优化APP性能，如何处理开发遇到的所有问题及处理方法等等。后期也将开发一个完整的APP教程！

apicloud教程3 （转载）的更多相关文章

  1. HttpClient 4.3教程（转载）

    HttpClient 4.3教程(转载) 转自:http://www.yeetrack.com/?p=779 前言 Http协议应该是互联网中最重要的协议.持续增长的web服务.可联网的家用电器等都在 ...

  2. 深入浅出Git教程【转载】转载

    深入浅出Git教程(转载)   目录 一.版本控制概要 1.1.什么是版本控制 1.2.常用术语 1.3.常见的版本控制器 1.4.版本控制分类 1.4.1.本地版本控制 1.4.2.集中版本控制 1 ...

  3. apicloud教程2 （转载）

    本帖最后由 中山赢友网络科技有限公司 于 2015-10-17 15:38 编辑 继<APICloud之小白图解教程系列(一):认识APICloud>之后的第二篇教程. 本篇教程有以下知识 ...

  4. apicloud教程1 （转载）

    非常感谢APICloud官方给我版主职位,每天都看到很多朋友提出很多问题,我就借此机会写了一系列的教程,帮助大家从小白到高手之路.系列名称:<APICloud之小白图解教程系列>,会不定时 ...

  5. jQuery官方基础教程笔记(转载)

    本文转载于阮一峰的博文,内容基础,结构清晰,是jquery入门不可多得的资料,非常好,赞一个. 阮一峰:jQuery官方基础教程笔记 jQuery是目前使用最广泛的javascript函数库. 据统计 ...

  6. Node初学者入门，一本全面的NodeJS教程（转载）

    分类 JS学习   发布 ourjs  2013-12-02 注意 转载须保留原文链接,译文链接,作者译者等信息.     作者: Manuel Kiessling  翻译: goddyzhao &a ...

  7. GitHub这么火，程序员你不学学吗？ 超简单入门教程 【转载】

    本GitHub教程旨在能够帮助大家快速入门学习使用GitHub. 本文章由做全栈攻城狮-写代码也要读书,爱全栈,更爱生活.原创.如有转载,请注明出处. GitHub是什么? GitHub首先是个分布式 ...

  8. Make 命令教程（转载）

    代码变成可执行文件,叫做编译(compile):先编译这个,还是先编译那个(即编译的安排),叫做构建(build). Make是最常用的构建工具,诞生于1977年,主要用于C语言的项目.但是实际上 , ...

  9. StoryBoard不使用AutoLayout情况下 按比例快速兼容适配iPhone6/6 Plus教程【转载】

    StoryBoard不使用AutoLayout情况下 按比例快速兼容适配iPhone6/6 Plus教程[转] 声明:本文章是为了后期快速兼容6和6Plus的按比例放大方法,对于部分读者来说可能觉得该 ...

随机推荐

  1. [O]打印时闪退问题

    1. 使用的是Office批量打印精灵1.2版,软件可以打开 2. Win8.1 MSDN原版操作系统,系统重装了,.NET Framework也装了 3. 使用真实打印机打印,打印时闪退,没有任何提 ...

  2. 关于CGI、FastCGI和PHP-FPM的关系

    1.CGI是干嘛的? CGI是为了保证web server传递过来的数据是标准格式的,方便CGI程序的编写者. web server(比如说nginx)只是内容的分发者.比如,如果请求/index.h ...

  3. nginx(1)

    下一篇:nginx(2) 一.engin X 市场的服务器非常的多,这里简单介绍几种常用的. Apache:源代码开放,跨平台,可移植,且支持的模块非常丰富,虽然在速度性能上不如其他轻量级的web服务 ...

  4. yahoo给出的关于网站优化的建议

    1.使用CDN 内容分发服务器会根据用户的位置选择最近的服务器响应用户的请求,静态资源放在CDN的性能将提升20%左右. 2.设置Expires和Cache-Contral头 将静态资源的过期时间设置 ...

  5. 关于PC端与手机端随着手指移动图片位置放生变化的拖拽事件

    当按下鼠标时,图片随鼠标移动松开时图片回到原位 drag("div_id") function drag(node_id){ var node = document.getElem ...

  6. 搭建属于你自己的RAMOS系统 – WIN7+VHD+GURB map方式

    前段时间加了一个内存条,将笔记本内存升级到了6G,由于之前用的是32位的win7不可以直接使用6G内存,便装了64位的系统.网上找资源的时候发现,大内存可以使用RamOS,从内存中虚拟出来一个硬盘,然 ...

  7. (转载)#include机制，#ifndef...#define...#endif防止重复引用，声明，定义等概念

    一.来自百度知道的问题:全局变量可以声明定义在头文件中? 答案: 注意头文件中不可以放变量的定义!!!一般情况下头文件中只放变量的声明,因为头文件要被其他文件包含(即#include).如果把定义放到 ...

  8. White space is required before the encoding pseudo attribute in the XML declaration.

    错误出现的位置: <?xml version="1.0"encoding="UTF-8"?> 正确方式: <?xml version=&quo ...

  9. Eight

    Eight 题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1043/http://acm.split.hdu.edu.cn/showproblem.ph ...

  10. 第八十八节，html5+css3pc端固定布局，搜索区，插入大图，搜索框

    html5+css3pc端固定布局,搜索区,插入大图,搜索框 设置一个div作为搜索区域 1.宽度为百分之百 2.最小宽度为1263,因为要考虑到手机,等小屏幕缩小后宽度会自适应,导致破坏布局,将最小 ...