• 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'];
    5. obj.open({
    6.     rect: {
    7.         x: 0,
    8.         y: 20,
    9.         w: api.winWidth,
    10.         h: 200
    11.     },
    12.     data: {
    13.         paths: paths,
    14.         captions: captions
    15.     },
    16.     styles: {
    17.         caption: {
    18.             height: 35,
    19.             color: '#E0FFFF',
    20.             size: 13,
    21.             bgColor: '#696969',
    22.             position: 'bottom'
    23.         },
    24.         indicator: {
    25.             align: 'center',
    26.             color: '#FFFFFF',
    27.             activeColor: '#DA70D6'
    28.         }
    29.     },
    30.     placeholderImg: 'widget://res/slide1.jpg',
    31.     contentMode: 'scaleToFill',
    32.     interval: 3,
    33.     loop: true,
    34.     fixedOn: '',
    35.     fixed: false
    36. }, function(ret, err){
    37.      if(ret.status){
    38.         if(ret.eventType == 'click'){
    39.             //点击图片的操作
    40.             alert(ret.index);
    41.         }
    42.      }
    43. });
    复制代码

    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教程！
  • 相关阅读:
    MySQL之存储引擎
    MySQL之触发器
    MySQL之存储过程
    MySQL之自定义函数
    MySQL之视图
    三种方式安装mariadb-10.3.18
    Linux创建智能DNS
    CentOS 7 搭建Cobbler实现自动化安装系统
    搭建PXE实现自动化安装系统
    编译安装dropbear
  • 原文地址：https://www.cnblogs.com/xiezhi/p/5653571.html
Copyright © 2020-2023  润新知