APIcloud常用方法

一个三端开发的框架

基础介绍

创建

使用apicloud的编辑器创建项目,clone到本地,需要编译时git推送到服务器,调试loader在官网上,模块分页中编译下载。
每次添加新模块以及7天后都需要重新编译下载!

引入框架

使用vue

1
2
3
<script src="../script/api.js"></script>
<script src="../assets/vue.js"></script>
<link rel="stylesheet" type="text/css" href="../css/api.css" />

API接口

原生API接口
$API框架

官方7天教程

文档

配置

  • viewport
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />

常用方法

滚动刷新

  • addEventListener监听距离底部长度
  • 回调函数中判断传参分页还是第一次加载
    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
    function fnGetWareList(loadMore_) {
    if (loadMore_) {
    skip += LIMIT;
    } else {
    skip = 0;
    }
    //参数
    var params = {}
    params = $api.jsonToStr(params);
    api.ajax({
    //请求参数
    }, function (ret, err) {
    if (ret) {
    //通知顶部下拉刷新数据加载完毕,组件会恢复到默认状态
    api.refreshHeaderLoadDone();
    fnUpdateWareList(ret, loadMore_);
    } else {
    //alert(JSON.stringify(err));
    }
    });
    }

    function fnUpdateWareList(data_, loadMore_) {
    var list = $api.byId('list');
    // 1. 编译模板函数
    var tempFn = doT.template($api.byId('template').innerHTML);
    // 2. 多次使用模板函数
    var resultText = tempFn(data_);
    if (loadMore_) {
    $api.append(list, resultText);
    } else {
    $api.html(list, resultText);
    }
    api.parseTapmode();
    if (loadMore_) {
    if (data_.length < LIMIT) {
    var pushStatus = $api.byId('pushStatus');
    pushStatus.innerHTML = "没有啦!";
    }
    }
    //操作DOM,添加数据
    fnShowWareCountInShoppingCart(data_);
    }

addeventlistener

api.addeventlistener会改变Vue中this的指向,在之前使用var that = this,之后用that.data绑定数据

背景透明

background: transparent;

frame与win

frame是一层一层的,win是一个页面,frame可以贴在win上显示。

沉浸式状态栏

1
2
var header = document.querySelector('#header');
$api.fixStatusBar(header);

正则检测字符串

/^[R1S].*$/.test(value)