Apicloud学习第四天

apicloud存储机制，添加和获取存储的数据

  $api.setStorage('currentCity', cityList[i_]);

  $api.getStorage('currentCity');

监听事件，name为监听的事件名称

api.addEventListener({

        name: 'cityChange'

    }, function(ret, err){

        if( ret ){

             // alert( JSON.stringify( ret ) );

             var city=$api.byId('city');

             city.innerHTML=ret.value.currentCity.name;

             openFrames();

        }else{

             alert( JSON.stringify( err ) );

        }

    });

doT模板(js下载)

{{~it:value:index}} …… {{~}} //里面的为模板内容

{{=value.thumbnail.url}} //在模板中动态添加数据

{{?0==value.showType}}……{{??}}……{{?}}//判断写法

<script type="text/template" id="template">

    {{~it:value:index}}

    {{?0==value.showType}}

    <div class="ware ware-0" >

             <div class="content" onclick="fnOpenWareWin('{{=value.id}}')">

                <img onload="fnLoadImage(this)" data-url="{{=value.thumbnail.url}}" class="thumbnail" src="../image/default_rect.png">

                <div class="info">

                    <div class="name">{{=value.name}}</div>

                    <div class="description">{{=value.description}}</div>

                    <div class="price-tag">

                        <span class="price">￥{{=value.price}}</span>

                        <span class="unit">/{{=value.unit}}</span>

                    </div>

                    <div class="origin-price">超市:

                        <del>{{=value.originPrice}}元</del>

                    </div>

                </div>

                <div class="control">

                    <div class="panel">

                        <img class="minus" src="../image/minus.png">

                        <div class="count">0</div>

                    </div>

                    <img class="add" src="../image/add.png ">

                </div>

            </div>

        </div>

        {{??}}

    <div class="ware ware-1">

            <div class="content" onclick="fnOpenWareWin('{{=value.id}}')">

                <img onload="fnLoadImage(this)" data-url="{{=value.thumbnail.url}}" class="thumbnail" src="../image/default_square.png">

                <div class="info">

                    <div class="name">{{=value.name}}</div>

                    <div class="description">{{=value.description}}</div>

                    <div class="price-tag">

                        <span class="price">￥{{=value.price}}</span>

                        <span class="unit">/{{=value.unit}}</span>

                    </div>

                    <div class="origin-price">超市:

                        <del>{{=value.originPrice}}元</del>

                    </div>

                </div>

                <div class="control">

                    <div class="panel">

                        <img class="minus" src="../image/minus.png">

                        <div class="count">0</div>

                    </div>

                    <img class="add" src="../image/add.png ">

                </div>

            </div>

        </div>

        {{?}}

    {{~}}

</script>

模板使用方法

function fnUpdateWareList(data_,loadMore_){//使用js模板

    var list=$api.byId('list');

    var tempFn=doT.template($api.byId('template').innerHTML);

    var resultText=tempFn(data_);

    if(loadMore_){

        $api.append(list, resultText);

    }else{

        $api.html(list, resultText);

    }

    api.parseTapmode();//优化点击事件，主要是因为通过js加载进去的tepmode没有起到作用，所以要使用此方法进行优化

    if(loadMore_){

        if(data_.length<LIMIT){

            var pushStatus=$api.byId('pushStatus');

            pushStatus.innerHTML="没有啦";

        }

    }

}

图片缓存机制

api.imageCache({//图片缓存

            url: dataUrl

        }, function(ret, err){

            if( ret ){

                 // alert( JSON.stringify( ret ) );

                 ele_.src=ret.url;

                 $api.attr(ele_, 'data-url',"");

            }else{

                 alert( JSON.stringify( err ) );

            }

        });

页面刷新功能实现

api.setRefreshHeaderInfo({//刷新

        visible: true,

        loadingImg: 'widget://image/refresh.png',

        bgColor: '#ccc',

        textColor: '#fff',

        textDown: '下拉刷新...',

        textUp: '松开刷新...',

        showTime: true

    }, function(ret, err){

        fnGetWare();

    });

结束刷新

api.refreshHeaderLoadDone();//结束刷新

加载弹出对话框

api.showProgress({//加载弹出框

        style: 'default',

        animationType: 'fade',

        title: '努力加载中...',

        text: '先喝杯茶...',

        modal: false

    });

结束加载

api.hideProgress();//结束加载

将json文件转为字符串

$api.jsonToStr(params);

将字符串转换为json文件

$api.strToJson(params);

设置属性

$api.attr(ele_, 'data-url'，'value');

参数设置

var params={

fields:{},

where: { //设置条件

supportAreaId: currentCity.id,

wareTypeId:wareTypeList[api.pageParam.wareTypeIndex].id

},

skip:skip,//设置起步数

limit:LIMIT//设置步数

}