Apicloud学习第四天

Posted 2021-02-14 健伟博客

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//设置步数
}