apicloud使用记录

1.数据传递方式

1.广播形式

a页面发送

api.sendEvent({
    name: 'myEvent',
    extra: {
        key1: 'value1',
        key2: 'value2'
    }
});

b页面接收

api.addEventListener({
    name: 'myEvent'
}, function(ret, err) {
    var key1=ret.value.key1;
    var key2=ret.value.key2;
});

2.页面之间函数相互调用

api.execScript({
    name："winName",//win名
    frameName: 'frmName',//frmName名
    script: "jsfun()"//jsfun 方法名
});

3.页面跳转之间传参

a页面：

  api.openWin({
                name: 'b',
                url: './b.html',
                pageParam: {
                 param:"a"//需要传递的值
                }
            });

b页面

  apiready = function() {
 var parme = api.pageParam.param;//获取传递值，parme='a'
}

2.页面常用事件监听

1. 页面(重新)渲染完成

    api.addEventListener({
            name: 'viewappear'
        }, function(ret, err) {
            //需要执行的逻辑，跟小程序onShow类似,//页面首次渲染或者从后台转前台重新渲染完成回调
            });

2.页面触底监听

   api.addEventListener({
            name: 'scrolltobottom',
            extra: {
                threshold: 20//距离底部多远距离触发该函数（px）
            },
        }, function(ret, err) {
           //需要执行的逻辑
        })

3.页面（消失）转入后台监听

api.addEventListener({
  name: 'viewdisappear'
}, function () {
 //需要执行的逻辑，跟小程序onHide类似,//当执行api.closeWin后，将不执行该代码
});

3.常用技巧

1.页面完全退出栈

打开新页面前定时关闭之前页面

                setTimeout(()=>{
                      api.closeWin({
                          name: 'register'
                      });
                    },500);
                 api.openWin({
                          name: 'login',
                          url: './login.html',
                          pageParam: {
                          }
                      });

2.修复点击事件300毫秒延迟

  html标签添加 tapmode属性，例如：

  <div class="title" tapmode onclick="closeWin()"></div>

vue框架下修复点击延迟：
@click=“onChangeTitle(index)“改为
:οnclick=”‘app.onChangeTitle(’+index+’)’”

<div class="title" tapmode :onclick="'app.onChangeTitle('+index+')'"></div>

在apiready之后加载的数据使用要显式的调用api.parseTapmode方法来进行主动的tapmode处理

3.修复ios滑动没惯性

滚动父层添加：

-webkit-overflow-scrolling : touch;

4.引入vue框架

引入js（本地或者CND地址），data数据从外部引入，只需更改vuedata值即可

<script src="../script/vue.js"></script>
<script type="text/javascript">
    var vuedata = {
       isIos: false,
    };
    var app = new Vue({ //创建vue
        el: '#app',
        data: vuedata,
        methods: {
        }
    });
    apiready = function() {

    }

</script>

5.创建一个页面垂直滚动条，并监听触底

html：

<div class="app">
   <div class="item" v-for="(item,index) in list" :key="index">
   {{item}}
   </div>
</div>

滚动区域父元素添加

.app{

  width:100%;
  height:600px;
  display:flex;
  flex-direction: column;
  overflow-y: scroll;
  -webkit-overflow-scrolling : touch;//页面滑动有惯性
}
.item{
   width:100%;
   height:100px;
   min-height:100px;
}

js监听触底事件：

 var is_canLoadMore=true;//是否执行触底逻辑标识符
 apiready = function() {
   loadMore();
 }

  function loadMore() {
     var el=$api.dom(".app");
     if(el){
        el.addEventListener("scroll",function(){

        if(el.scrollHeight-el.scrollTop<el.clientHeight+5&&is_canLoadMore){//距离底部5px时候触发
              is_canLoadMore=false;
              //从服务器获取数据，获取完数据再把触底监听标识（is_canLoadMore）打开
              PostToken("storeProduct", {
                  page: vuedata.page+1,
                  size: vuedata.size,
              }).then(res => {  
              /**
              *写入获取数据逻辑，等获取完数据在从新打开触底事件
              */
                 is_canLoadMore=true;
              });
        }
     })
    }
  }

4.常用api

 api.winWidth//窗口宽
 api.winHeight//窗口高
 (el).offsetHeight//控件高（el为控件元素）
 (el).offsetWidth//控件宽（el为控件元素）
 $api.dom(".app")//获取元素节点
 $api.setStorage("langType",1)//存值到本地
 $api.getStorage("langType")//从本地获取存值

设置状态栏颜色

   api.setStatusBarStyle({
                style: 'light',
                color: '#d3b882'
            });

显示加载框

    api.showProgress({
                    style: 'default',
                    animationType: 'fade',
                    title: '努力加载中...',
                    modal: false
                });

显示toast

    api.toast({
              msg: "这是一个toast弹窗",
              duration: 2000,
              location: 'bottom'//显示位置
           });

显示对话框

api.confirm( {
    title: '警告',
    msg:'您确定删除吗？’,
  buttons: [ '确定', '取消' ]
}, function ( ret, err ) {
  var index = ret.buttonIndex;
  if ( index == 1 ) {
    console.log('点击了确定按钮')
  }
} )

5.HTTP请求封装

var URL = "http://xxx";//请求地址域名
/*
*url:接口地址，data:请求参数，token：token
*/
function PostToken(url, data, token) {
    return new Promise(function(resolv, reject) {
        api.ajax({
            url: URL + url,
            method: 'post',
            headers: {
                token: token,
            },
            data: {
                values: data
            },
        }, function(ret, err) {
          if(ret){
             resolv(ret)
          }
          else{
          reject(err)
          }
        });
    })

}

调用

 PostToken("/api/test",{id:1},"FLOSJWHRGNGS1213").then(
   res=>{
       console.log(res);    
 },
  res=>{
       console.log(res);    
 }
)