APIcloud的基础总结

记录一下APIcloud的基础用法

  • API https://docs.apicloud.com/Front-end-Framework/framework-dev-guide

    apicloud弹性布局

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    nav {
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-flex-flow: clum;
        flex-flow: row;
        position: relative;
        width: 100%;
        height: 40px;
        background-color: #e1017e;
    }
    nav .menu {
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        flex: 1;
    }

    兼容iphoneX

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    var header = $api.byId('header');
    $api.fixIos7Bar(header);
    // 获取手机类型，比如： ios
    var systemType = api.systemType;
    //兼容ios和安卓
    if(systemType=='ios'){
      $api.addCls(header, 'headerIos');
    }else{
      $api.addCls(header, 'headerAnd');
    }
    api.setStatusBarStyle({
    //设置APP状态栏背景色
      color: '#0063ff',
      style: 'light'
    });

    打开新窗口

  • bounces:false 禁止窗口上下弹动(上下拖动frame页面)
    1
    2
    3
    4
    5
    6
    7
    api.openWin({
        name: 'main',
        url: './main.html',
        //是否支持滑动返回
        //iOS7.0及以上系统中，在新打开的页面中向右滑动，可以返回到上一个页面，该字段只 iOS 有效
        slidBackEnabled: false
    });

    打开FrameGroup

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    <nav id="nav">
        <div class="menu selected" tapmode="selected" onclick="fnSetNavMenuIndex(0);">水果</div>
        <div class="menu" tapmode="selected" onclick="fnSetNavMenuIndex(1);">食材</div>
        <div class="menu" tapmode="selected" onclick="fnSetNavMenuIndex(2);">零食</div>
    </nav>
    <script type="text/javascript">
    apiready = function() {
        nav = $api.byId('nav');
        var menus = $api.domAll(nav, 'div');
        // 构造FrameGroup中的Frame数组
        var frames = [];
        for(var i =0; i < menus.length; i++){
          frames.push({
            name: 'main_frame_' + i,
            url: './main_frame'+i+'.html',
          })
        }
        // 打开FrameGroup
        api.openFrameGroup ({
            name: 'mainFrameGroup',
            rect: {
                 x: 0,
                 y: headerH + navH ,
                 w: 'auto',
                 h: 'auto'
            },
            index: 0,
            frames:frames
        }, function(ret, err){
            fnSetNavMenuSelected(ret.index)
        });
        // 更新分类菜单的选中状态
        function fnSetNavMenuSelected(_index){
          for(var i =0; i < menus.length; i++){
            if(_index == i ){
              $api.addCls(menus[i], 'selected');
            }else {
              $api.removeCls(menus[i], 'selected');
            }
          }
        }
        //点击Group
        function fnSetNavMenuIndex(index){
           api.setFrameGroupIndex({
               name: 'mainFrameGroup',
               index: index,
               scroll: false
           });
        }
    }
    </script>

    监听手机返回键

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    apiready = function() {
        //连续返回两次退出当前应用
        api.addEventListener({
            name: 'keyback'
        }, function(ret, err) {
            var backTime = $api.getStorage("keyback_clickTime");
            var now = new Date().getTime();
            if (now - backTime < 1200) {
                api.closeWidget();
            } else {
                $api.setStorage("keyback_clickTime", now);
                api.toast({
                    msg: '再点一次返回关闭应用',
                    duration: 1000,
                    location: 'bottom'
                });
            }
        });
    }

    api.execScript 跨页面传参以及触发方法

  • 查询页面带参数触发其他win页面方法及传参
  • search_frm页面
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    $('.search').click(function(){
    	var formParams = {
    		"workerName":$("#workerName").val(),
    		"idCardNumber":$("#idCardNumber").val(),
    		"startDate":$("#startDate").val(),
    		"endDate":$("#endDate").val(),
    	}
    	var params = JSON.stringify(formParams);
    	api.execScript({
    			name:'attendance_win',
    			frameName: 'attendance_frm',//frame窗口
    			script: 'getFormParams('+params+');'
    	});
    	api.closeWin();
    })
  • 传参的win页面
    1
    2
    3
    4
    5
    6
    var workerName,idCardNumber,startDate;
    getFormParams(formParams){
       workerName = formParams.workerName;
       idCardNumber= formParams.idCardNumber;
       startDate= formParams.startDate;
    }

    sendEvent

  • 将任意一个自定义事件广播出去，该事件可在任意页面通过 addEventListener 监听收到
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    api.sendEvent({
        name: 'myEvent',
        extra: {
            key1: 'value1',
            key2: 'value2'
        }
    });

    //html页面a：
    api.addEventListener({
        name: 'myEvent'
    }, function(ret, err) {
        alert(JSON.stringify(ret.value));
    });

    //html页面b：
    api.addEventListener({
        name: 'myEvent'
    }, function(ret, err) {
        alert(JSON.stringify(ret.value));
    });

    本地存储setPrefs、getPrefs

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    var setPrefsInfo = function(userInfo) {
        //设置存储的key和value
        api.setPrefs({
        	key : 'loginInfo',
        	value : JSON.stringify(userInfo)
        });
    }
    //获取存储的key
    api.getPrefs({
    	key : 'loginInfo'
    }, function(ret, err) {
    	var loginInfo = JSON.parse(ret.value);
    	username = loginInfo.username;
    	cuser = loginInfo.name;
    });
    //删除存储
    api.removePrefs({
    	key : 'loginInfo'
    });

    urStorage提供类似localStorage的功能

    1
    2
    3
    4
    5
    6
    7
    8
    //存储数据
    $api.setStorage("usernames", usernames);
    //获取数据
    $api.getStorage("usernames");
    //移除保存的数据
    $api.rmStorage("usernames");
    //清空本地存储
    $api.clear("usernames");

    图片缓存 #api.imageCache

    1
    2
    3
    4
    5
    6
    7
    8
    9
    api.imageCache({
        //要缓存的图片地址
        url: 'img.url'
    }, function(ret, err) {
        //判断是否缓存成功 如果成功更新图片路径
        if(ret&&ret.status==true){
           img.src = ret.url;
        }
    });

    下拉刷新

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    api.setRefreshHeaderInfo({
        visible: true,
        loadingImg: 'widget://image/refresh.png',
        bgColor: '#ccc',
        textColor: '#fff',
        textDown: '下拉刷新...',
        textUp: '松开刷新...',
        showTime: true
    }, function(ret, err){
        这里调用api.ajax加载数据
        //恢复刷新状态
        api.refreshHeaderLoadDone();
    });

    下加载分页

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    var loginInfo;
    var account;
    var projectCode;
    var pageIndex;
    var pageSize = 10;
    var dataLength;
    var arrayLength;
    var datas = [];
    var count;

    apiready = function() {
        api.getPrefs({
            key: 'loginInfo'
        }, function(ret, err) {
            if (ret) {
                loginInfo = JSON.parse(ret.value);
                account = loginInfo.account;
                projectCode = loginInfo.projects.projectCode;
                getTrainList(account,projectCode);
            } else {
                alert("请退出重新登录");
            }
        });

      //下拉加载
      api.addEventListener({
            name: 'scrolltobottom',
            extra: {
              //设置距离底部多少距离时触发，默认值为0，数字类型
                threshold: 0
            }
        }, function(ret, err) {
            api.showProgress({
                title: '加载中...',
                modal: false
            });
            $reiz.request.post($reiz.urls['safe'].getSafeTrainPageList, {
              "account": account,
              "projectCode": projectCode,
              "pageIndex": pageIndex,
              "pageSize": pageSize,
            }, function(ret, err) {
              if (ret.code == '200' && JSON.parse(ret.data).records.length > 0){
                var data1 = JSON.parse(ret.data);
                var attendamceList = data1.records;
                count = attendamceList.total;
                //算出下拉后最新数据的长度 计算分页
                arrayLength = arrayLength + attendamceList.length;
                pageIndex = Math.ceil(arrayLength / pageSize + 1);
                api.hideProgress();
                moreData(attendamceList);
              }else{
                api.hideProgress();
                api.toast({
                  msg: '没有更多数据了'
                });
              }
            })
        })
    }
    //获取列表数据
    function getTrainList(account,projectCode) {
      api.showProgress({
          title: '加载中...',
          modal: false
      });
      $reiz.request.post($reiz.urls['safe'].getSafeTrainPageList, {
          body: {
              "account": account,
              "projectCode": projectCode,
              "pageIndex": 1,
              "pageSize": pageSize,
          }
      }, function(ret, err) {
          if(ret.code == 200){
            api.hideProgress();
            $('.ulList').empty();
             var data1 = JSON.parse(ret.data);
             count = data1.total;
             var materialList = data1.records;
             if(materialList.length>0){
               //初始化的数据条数
               arrayLength = materialList.length;
               pageIndex = Math.ceil(arrayLength / pageSize + 1);
               //处理数据
               moreData(materialList);
             }else{
               api.toast({
                 msg: '没有更多数据了'
               });
             }
          }else{
            api.hideProgress();
            api.toast({
              msg: '没有更多数据了'
            });
          }
      })
    }
    //数据处理
      function moreData(data){
        var list = [];
        $(data).each(function(index, val) {
          var trainName = val.trainName || ' '; //培训名称
          var trainTime = val.trainTime || ' '; //培训时间
          var trainSite = val.trainSite || ' '; //培训地点
          var resenter = val.resenter || ' '; //主讲人
          list.push("<li style='overflow:hidden'>");
          list.push("<div class='listInfo'>");
          list.push("<div class='textWrap'><span class='t'>培训名称</span><span class='t'>" + trainName + "</span></div>");
          list.push("<div class='textWrap'><span class='t'>培训时间</span><span class='t'>" + trainTime + "</span></div>");
          list.push("<div class='textWrap'><span class='t'>培训地点</span><span class='t'>" + trainSite + "</span></div>");
          list.push("<div class='textWrap'><span class='t'>主&nbsp&nbsp讲&nbsp&nbsp人</span><span class='t'>" + resenter + "</span></div>");
          list.push("</div></li>");
        })
        $('.ulList').append(list.join(''));
      }

    loading效果

1
2
3
4
5
6
7
8
9
10
//显示
api.showProgress({
	style : 'default',
	animationType : 'fade',
	title : '努力加载中...',
	text : '先喝杯茶...',
	modal : true
});
//隐藏
api.hideProgress();
模块
  • UIInput模块打开新页面会立刻弹出键盘比如登录页…
  • UIActionSelector是一个支持弹出动画的多级选择器。col控住关联等级
  • UIScrollPicture轮播图模块
  • LCalendar时间模块 需要下载js和css文件单独引入 每绑定一个都需要初始化new一下
赏

谢谢你请我吃糖果

支付宝
微信

扫一扫，分享到微信

微信分享二维码

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

越努力<br>越幸运<br>加油