Flands Blog HomeArchivesTags
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)

JSAPIcloud