您现在的位置是：首页 > 前端技术 > apicloud > 正文

apicloud

apicloud常用语法

俗人将庸2020-08-27apicloud352

1://点击复制文本//模块：clipBoard//api文档：https://docs.apicloud.com/Client-API/Device-Access/clipBoard

1:
// 点击复制文本
// 模块：clipBoard
// api文档：https://docs.apicloud.com/Client-API/Device-Access/clipBoard

// <div onclick="ab()">点击复制文本到剪切板</div>
function ab(){
  var clipBoard = api.require('clipBoard');
  clipBoard.set({
      value: 'test' //要复制的文本内容
  }, function(ret, err) {
      if (ret) {
          alert(JSON.stringify(ret));
      } else {
          alert(JSON.stringify(err));
      }
  });
}

alert(JSON.stringify(ret));//弹出数组ret的具体内容

2:
// api预设方法
// 需要引入api.js
// 文档：https://docs.apicloud.com/Front-end-Framework/framework-dev-guide
var scrolupul=$api.dom('#scrol1-up-ul');

//获取document中匹配的第一个元素
$api.domAll('.class');/

/获取document中所有匹配的元素
$api.byId('idStr');//通过id获取元素
var scrolupul=document.getElementById('scrol1-up-ul');//通过id获取元素

3:
// 扫码识别反馈信息
// 模块:FNScanner
// api文档：https://docs.apicloud.com/Client-API/Func-Ext/FNScanner

4:
// input输入框状态监控事件

<input class="input" id="input" type="text" onfocus="ab()" onblur="aa()" onchange="ac()"  oninput="ad()" onpropertychange="ae()" mane="text" placeholder="搜索商品" value="eirutwg"></input>
// onfocus:输入框获取焦点事件
// onblur:输入框失去焦点执行事件
// onchange:用户输入法点击完成执行事件
// oninput:输入框输入内容是状态实时监测(用于大部分浏览器)
// onpropertychange:输入框输入内容是状态实时监测(用于IE6/7/8浏览器)

6：
// 获取元素的属性
$api.dom('header').offsetHeight
// 等同于
$api.offset($api.dom('header')).h

7：
// 添加或删除属性
  $api.removeCls(steps[i], 'active');
  $api.addCls(steps[i], 'active');

13:
// 解决点击事件300ms延时
// <div class="today-li" tapmode onclick="openwin('tab1_tuan_tem','0')"> 哈哈</div>
// 添加 tapmode 属性关闭点击延时
// 如果是动态添加的，需要在添加结束那里执行，api.parseTapmode(),demo里一般是没做处理的

15:
//使用apicloud开发移动端APP,IOS list页面滚动卡顿解决记录
//给内容容器添加样式:-webkit-overflow-scrolling:touch;

-webkit-overflow-scrolling:属性控制元素在移动设备上是否使用滚动回弹效果.

// auto:使用普通滚动, 当手指从触摸屏上移开，滚动会立即停止。

// touch:使用具有回弹效果的滚动, 当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。

17:  //触发事件
apiready = function () {

  api.addEventListener({  //监控安卓返回按钮点击事件
      name: 'keyback'
  }, function(ret, err) {
      alert('按了返回键');
  });

  api.addEventListener({  //监控屏幕从左到右触摸滑动事件,name值为可以为：swipeleft(向左) 、swiperight(向右) 、swipeup(向上) 、swipedown(向下)
      name:'swiperight'
  }, function(ret, err){
     console.log('向右轻扫');
  });
}

18: //调用并执行其他页面的事件

//在当前window中执行jsfun脚本
var jsfun = 'funcGoto();';
api.execScript({
    script: jsfun
});

//在当前window中找到名为frmName的frame，并在该frame中执行jsfun脚本
var jsfun = 'funcGoto();';
api.execScript({
    frameName: 'frmName',
    script: jsfun
});

//在名为winName的window中执行jsfun脚本
var jsfun = 'funcGoto();';
api.execScript({
    name: 'winName',
    script: jsfun
});

//在名为winName的window中找到名为frmName的frame，并在该frame中执行jsfun脚本
var jsfun = 'funcGoto();';
api.execScript({
    name: 'winName',
    frameName: 'frmName',
    script: jsfun
});
//也可以将动作写在  script  中,如下所示
api.execScript({
    name: 'tab5_address',
    script: 'ajax_get_address();'
});

//也可以进行字符串拼接
var data='aa("'+a+'",'+b+');';
api.execScript({
    name: 'tab4_pay',
    script: data,
});

//input框获取焦点
$api.byId('text').focus();

8：
//调用时间组件

api.openPicker({
    type: 'date_time',
    date: '2014-05-01 12:30',
    title: '选择时间'
}, function(ret, err) {
    if (ret) {
        alert(JSON.stringify(ret));
        // 返回值为
        // {
        //     year:2000,                  //年
        //     month:1,                    //月
        //     day:1,                      //日
        //     hour:12,                    //时
        //     minute:00                   //分
        // }
    } else {
        alert(JSON.stringify(err));
    }
});

20：//支持onload事件的html标签
// <body>, <frame>, <frameset>, <iframe>, <img>, <link>, <script>
//
// 比如：img开启图片缓存
    // <img src="default.png" data-url="big_pic.jpg" onload="LoadImage(this)" class="aui-img-round" />
 /**
 * [LoadImage 图片开启缓存]
 * @param {[obj]} ele_ [当前元素]
    */
     function LoadImage(ele_){
      var imageURL = $api.attr(ele_, 'data-url');
      if(imageURL){
    api.imageCache({
      url: imageURL
    }, function(ret, err){
      if( ret.status ){
        ele_.src = ret.url;
        $api.removeAttr(ele_, 'data-url');
      }
    });
      }
     }

冒泡事件解决方法

    <li tapmode onclick="a();">
      <div class="li_h clearfix">
        <p class="right" tapmode onclick="event.stopPropagation();b();">二级点击事件阻止冒泡方法1</p>
        <p class="right" tapmode onclick="event.cancelBubble=true;aa();">二级点击事件阻止冒泡方法2</p>
      </div>
    </li>

function a() {  console.log(0);    }
function b() {  console.log(1);    }
//在子集元素中添加 event.stopPropagation();可以有效的阻止冒泡事件的发生
//在子集元素中添加 event.cancelBubble=true;可以有效的阻止冒泡事件的发生
//若父级事件中存在 tapmode 属性，子集元素中也需要添加 tapmode 属性否则阻止冒泡事件不生效

读取并解析txt文档

api.readFile({   //读取txt并转化为json
            path: 'widget://script/BaiduMap_cityCode_1102.txt'
        }, function(ret, err) {
            if (ret.status) {
              var data = ret.data.split(/\r\n/g);
                // var data = ret.data.replace(/\r\n/g, '-').replace('"', '').split('-');
                var texts=data[0].split(',');
                var datas=[];
                for (var i = 1; i < data.length; i++) {
                  var text=data[i].split(',');
                  var names={};
                  names[texts[0]]=text[0];
                  names[texts[1]]=text[1];
                  datas.push(names);
                }
                console.log(JSON.stringify(datas));
            } else {
                alert(err.msg);
            }
        });

禁止屏幕息屏

api.setKeepScreenOn({
    keepOn: true    //是否禁止屏幕休眠
});

检测地图与跳转导航


var bmapinstalled = api.appInstalled({
                sync : true,
                appBundle : 'com.baidu.BaiduMap'
            });
            var amapinstalled = api.appInstalled({
                sync : true,
                appBundle : 'com.autonavi.minimap'
            });
            api.hideProgress();
            var btns = [];
            //按钮
            var uris = [];
            if (bmapinstalled) {
                btns.push("百度地图");
                uris.push('baidumap://map/direction?destination=name:张槎大沙工业区大道二路2号|latlng:'+lat+','+lng+'&mode=driving&src=andr.FSDZ');
            }
            if (amapinstalled) {
                    //百度地图坐标转高德地图坐标
                var latlng = app.bd_decrypt(lng,lat);
                uris.push('androidamap://navi?sourceApplication=FZDZAutoMonitor&lat=' + latlng.lat + '&lon=' + latlng.lng + '&dev=0&style=1');
                btns.push("高德地图");
            }
            if (btns.Length == 0) {
                alert("手机未安装百度地图或者高德地图，请保证手机有其中一个导航软件。")
            } else {
                //console.log(bmapinstalled+"-"+amapinstalled);
                api.actionSheet({
                    title : '请选择需要跳转的导航软件',
                    cancelTitle : '取消',
                    buttons : btns
                }, function(ret, err) {
                    var index = ret.buttonIndex;
                    if (uris[index - 1] != '' && uris[index - 1] != undefined) {
                        api.openApp({
                            uri : uris[index - 1]
                        }, function(ret, err) {
                        });
                    }
                });
            }

当前时间方法封装

//当前系统时间戳，毫秒
function curtime(){
    return new Date().getTime();
}
function $(id){
    return document.getElementById(id);
}



/**打开window
    url：打开window将加载的url
    name：window的名称
    ott：api.openWin中支持的其他参数
**/
function GotoWin(url, name, ott){
    if(!url){
        return;
    }
    if(!name){
        name = url;
    }
    var args = {
        name:name,
        url:url,
        pageParam:{
            a:'aaaaa',
            b:'bbbbb',
            c:'ccccc'
        }
    }
    if(ott){
        for(var i in ott){
            args[i] = ott[i];
        }
    }
    api.openWin(args);
}
//window + frame窗口结构中，打开content区域所在的frame
function openContent(url, fname, frect){
    if(!url){
        return;
    }
    var fn = fname ? fname : 'content_frm';
    var fr = {};//frame所在的rect区域
    if(frect){
        fr = frect;
    }else{
        var headerH = 44;//header高度为api.css样式中声明的44px
        var footerH = 30;//footer高度为api.css样式中声明的30px
        fr.marginTop = headerH + statusBarHeight
        fr.marginBottom = footerH;
    }
    api.openFrame({
        name: fn,
        url: url,
        bounces: false,
        rect: fr,
        overScrollMode:'scrolls'
    });
}

var statusBarHeight = 0;
window.onload = function(){
    var el = $('header');
    if(!el){
        return;
    }
    var isAndroid = (/android/gi).test(navigator.appVersion);
    if(!isAndroid){//ios沉浸式
        statusBarHeight = 20;
        el.style.paddingTop = '20px';
        return;
    }
    var u = navigator.userAgent;
    var ver = parseFloat(u.substr(u.indexOf('Android') + 8, 3));
    if(ver >= 4.4){//android沉浸式
        statusBarHeight = 25;
        el.style.paddingTop = '25px';
    }
}


//apicloud调用百度地图

api.openApp({
      androidPkg: 'android.intent.action.VIEW' ,
      appParam:{
               origin:'中关村',
               destination:'五道口',
                region:'北京',
                mode:'driving',
                src:api.appName
        },
        uri:'intent://map/direction?origin=中关村&destination=五道口&mode=driving&region=北京&src=osm#Intent;scheme=bdapp;package=com.baidu.BaiduMap;end',
        iosUrl:'baidumap://map/direction'
},function(ret,err){

});

vue+ajax初始化

window.apiready=function(){
  var example1=new Vue({
    el:"#example1",
    data:{
      items:'',
    },
  });
  api.ajax({
      url: '你的接口地址',
      method: 'post',
      dataType:'json',
  },function(ret, err){
      if (ret) {
          example1.items=ret;
      } else {
          alert( JSON.stringify( err ) );
      }
  });
}

设置自定义广播事件

    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));
    });

    //a、b页面都将收到 myEvent 事件
    //监听页面必须是已经打开的页面，未打开或者已关闭的页面监听不到此消息