APICloud开发小技巧

Posted adozheng

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了APICloud开发小技巧相关的知识,希望对你有一定的参考价值。

apicloud开发文档中,前端开发框架指的就是,类似jqjs的语法: https://docs.apicloud.com/Front-end-Framework/framework-dev-guide。

api对象就只的是:app的方法。

1.安卓滑动关闭窗口

ios设备上可以通过滑动来关闭win,在安卓默认是不可以。细看下文档其实也很的简单,监听事件里面的swiperight:
如果一个窗口是先打开win再嵌套frame的打开的方法如下

apiready = function(){
        api.addEventListener({
            name:‘swiperight‘
        },function(ret,err){
            api.closeWin({
                    name: ‘win窗口name‘
            });
        })
};

如果是直接用win打开的窗口
apiready = function(){
        api.addEventListener({
            name:‘swiperight‘
        },function(ret,err){
            api.closeWin({});
        })
};

2.安卓点击两次退出应用

//两次退出
var first = null;
function back(){
    api.addEventListener({
        name: ‘keyback‘
    }, function(ret, err){
        if (!first) {
            first = new Date().getTime();
            api.toast({
                msg: ‘再按一次退出‘,
                duration:1500,
                location: ‘bottom‘
            });
            setTimeout(function() {
                first = null;
            }, 1000);
        } else {
            if (new Date().getTime() - first < 1000) {
                api.closeWidget({
                    silent:true
                });
            }
        }
    });
}


把back方法放在apiready里面就OK了

3.安全保存你的各种key
在app中,有时我们会使用到一些第三方的key,如果让这些KEY更安全呢,其实官方也有提高,很多朋友却没有留意
在res文件夹中新建一个key.xml

<?xml version="1.0" encoding="UTF-8"?>
<security>
<item name="key0" value="value0"/>
<item name="key1" value="value1"/>
<item name="key2" value="value2"/>
<item name="key3" value="value3"/>
</security>

然后通过
api.loadSecureValue({
    key:‘key名‘
}, function(ret, err) {
    var value = ret.value;
});

来调用。云编译的时候会自动加密的,不过在真机测试的时候是没有用的,需要云编译才可以。在打包的时候可以统一配置下

4。利用本地文件存储实现秒开和离线浏览
在api对象里面有两个方法readFile和writeFile,我们可以利用这两个来搞一下,而且还会对图片自动缓存的
通常我们的列表页数据是json的,我们可以对这个json数据循环下

function writeFile(json){
    var cacheDir = api.cacheDir;
    for(var i=0;i<json.length;i++) {
        var id = json.id;//你的内容id
        var data = json;//内存数据
        api.writeFile({
            path: cacheDir+‘/‘+id+‘.json‘,
            data: JSON.stringify(data)
        }, function(ret, err){

        })
    }
}
注意要通过JSON.stringify转换下格式,否在在IOS上写入不成功
然后在打开内容页的时候先看下有没有对应id文件存在
function readFile(){
    var cacheDir = api.cacheDir;
    api.readFile({
        path: cacheDir+‘/‘+id+‘.json‘
    }, function(ret, err){
        if(ret.status){
            var jsonData = JSON.parse(ret.data);
        } else{
            //从服务器读取
        }
    });
}

还要注意,再次转换下数据格式

5.打开页面有闪动?那让他闪的个性点
很多开发者在开发的时候会遇到页面打开闪动的问题,不管是从服务器读取还是从本地缓存读取都有可能会闪动。既然解决比较麻烦,我们就利用CSS3动画,让他闪的个性点。很简单,给元素ID加个fade效果
比如你的页面内容全部在<div id="wrap"></div>里面。那么我们就给wrap弄个CSS动画,渐入效果,下面是css代码

#wrap {-webkit-animation: fadeIn .5s ease both;animation: fadeIn .5s ease both;}
@-webkit-keyframes fadeIn {
    from { opacity: 0.3; }
    to {  }
}
@keyframes fadeIn {
    from { opacity: 0.3; }
    to {  }
}

6.安卓最小化你的APP
在安卓开发的时候我们会使用最小化应用,不让其退出,其实官方已经提供了这个api方法,只是可能隐蔽点不容易发现

api.toLauncher();

7.安卓上巧实现日期加时间的选择
在使用openPicker时我们知道安卓设备是不支持同时选择日期加时间的,也就是date_time属性。又不想使用插件,也不想选择完日期后在点击按钮选择时间,那么我们将openPicker稍微改一下实现时间+日期的选择
思路:判断如果是安卓设备,则先openPicker打开时间选择,时间选择完成后在openPicker一下选择日期。

if(api.systemType==‘android‘){
    api.openPicker({
        type: ‘date‘,
        title:‘选择时间‘
    },function(ret,err){
        var year = ret.year;
        var month = ret.month;
        var day = ret.day;
        //这是选择的是日期
        var value1 = year+‘-‘+month+‘-‘+day;
        //选择时间
        api.openPicker({
            type: ‘time‘,
            title:‘选择时间‘
        },function(ret,err){
            var hour = ret.hour;
            var minute = ret.minute;
            //选择的时间
            var value2 = hour+‘:‘+minute;

            //组装一下
            alert(‘‘+value1+‘ ‘+value2+‘‘);
        });
    }); 
}

 8video标签在IOS和安卓上的非全屏自动播放

使用此代码,可自动循环播放视频了哦,不需要全屏

<video id="player" src="widget://res/video.mp4" loop autoplay webkit-playsinline></video>

在IOS上可以自动播放,在安卓下还需要加一句 $api.byId(‘player‘).play(); (这代码需要视频加载完后才能调用,不过我都是包内的视频源,没有测需要缓冲的视频)

如果要缓冲,在安卓下可以 <video id="player" src="widget://res/video.mp4" loop controls webkit-playsinline></video> 让用户自己通过点击再播放

 9、fastclick 的使用方法

$(function(){
                FastClick.attach(document.body);
            });

 10、页面跳转,并传递参数

function openWin(id) {
                api.openWin({
                    name : ‘list_window‘,
                    url : ‘list_window.html‘,
                    bounces : false,
                    animation : {
                        type : "push",
                        duration : 300
                    },
                    //出境国内周边 游轮 分别对应一个 id 
                    pageParam : {
                        key : id
                    }
                });
            };

下个页面接受参数

var typeName = api.pageParam.key;

11、多个li点击某一个,那个元素高亮显示(toggle)

<ul class="choose_det">
            <li tapmode="" onclick="chooseType(this);">2天</li>
            <li tapmode="" onclick="chooseType(this);">3天</li>
            <li tapmode="" onclick="chooseType(this);">4天</li>
            <li tapmode="" onclick="chooseType(this);">10天</li>
            <li tapmode="" onclick="chooseType(this);">10天以上</li>
        </ul>
function chooseType(obj){
        $api.toggleCls(obj, ‘active‘);
    };

上面的方法是 toggle 的方法,点击某一个,某个高亮,其余恢复默认代码如下

function cPhoneType(obj){

        var ele = $api.byId(‘phoneTypeHtml‘);
        var selectList = $api.domAll(ele, ‘.tabThree‘);
        for(var i = 0; i < selectList.length; i++){
            $api.removeCls(selectList[i], ‘activeC‘);
        }
        $api.addCls(obj, ‘activeC‘);
    }

 

12、某些页面数据变化,例如规格选择,选的比较多,改变之后在列表页要监听到选择的规格,这个时候传递参数会比较多,就用一个监听事件

在选择规格的页面,点击确定的时候,发送一个全局的监听事件

api.sendEvent({
            name: ‘myChoose‘,
            extra: {
                days: ‘2‘,
                data: ‘2013-2-3‘
            }
        });

在列表页获取这个监听事件,当传递的值发生变化的时候,做出一些相应的改变或者动作

  api.addEventListener({
                name: ‘chooseData‘
            }, function(ret, err) {
                //alert(JSON.stringify(ret.value));
            });

13、获取点击的对象的自定义属性。

<li class="‘+ classLiName +‘" dateId="‘+ dateId +‘" onclick="chooseDay(this)" tapmod="">
tapmod是为了点击更顺利。
function chooseDay(obj){
      var dateId = $api.attr(obj,‘dateId‘);
      console.log(dateId)
    }

还有一种直接传递的方式

<li class=‘list-item‘ onclick=‘openDetailWin("" + item.id + "","" + item.title + "");‘>
function openDetailWin(zxId, title) {
            var delay = 0;
            if ("ios" != api.systemType) delay = 300;
            api.openWin({
                name : ‘news_detail_module‘,
                url : ‘zx/news_detail_module.html‘,
                delay : delay,
                bounces: false,
                pageParam: { id: zxId, title: title }
            });
        }

14、apicloud中,例如头部有一个返回的这种,一般来说都是两个页面,头部是一个页面,然后中间在加载一个frame。

打开关闭window

api.openWin({
            name : ‘line_detail‘,    
              url : ‘line_detail.html‘,
        bounces: false,
        animation:{
            type: "push",
            duration:300
        },
        pageParam : {
                    key : id
                }
      });
    api.closeWin({
            bounces: false,
            animation:{
                type: "push",
                duration:300,
                subType:"from_left"
            }
        });

 15、常用弹出

/*** 提示信息 ***/
            api.toast({
                msg: ‘手机号格式有误‘,
                duration: 1500,
                location: ‘middle‘
            });
/*** 加载动画 ***/
        api.showProgress({
            title : ‘ ‘,
            text : ‘玩命加载中...‘,
            modal : true
        });

api.hideProgress();

 

以上是关于APICloud开发小技巧的主要内容,如果未能解决你的问题,请参考以下文章

APICloud开发者进阶之路 | 超级实用技巧

#你不知道的APICloud# 五步搞定iOS 断点调试

VS中添加自定义代码片段——偷懒小技巧

Xcode开发中的6个小技巧

Jquery 小技巧

提效小技巧——记录那些不常用的代码片段