apicloud教程3 （转载）

本帖最后由 中山赢友网络科技有限公司 于 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教程！