APICloud项目纪要

一.页面之间的传递参数
通过pageParam传递参数：

api.openWin({
name: 'ware',
url: './ware.html',
pageParam: {
wareId: 'w123'
}
});

在打开的窗口使用 api.pageParam 接收数据
 api.pageParam.wareId 

二.窗口之间的通信机制：
1.跨窗口调用函数，类似于vue的子传父
定义函数（携带数据）

api.execScript({
name: 'login', //窗口name
frameName: 'login_frame', //窗口下的framename
script: 'fnSetUserName("' + usernameValue +'");'
});

另一个窗口监听函数得到数据
 function fnSetUserName(data) { 2 console.log（data） //传过来的数据 3 } 

2.自定义全局事件

api.sendEvent({
name: 'cityChange', //事件名
extra: {currentCity: cityList[index]} // 数据的 key 和 value
});

其他页面监听事件得到数据

api.addEventListener({
name: 'cityChange' //监听的事件名
}, function (ret, err) {
if (ret) {
if (ret.value) {
// 得到数据
currentCityId = ret.value.currentCity.id;
}
}
});

三.dot模板引擎使用方法
1.script 标签定义一个模板

<script type="text/template" id="template">
{{~it:value:index}} //~it 默认处理方式为数组
{{?0 == value.showType}} // if 条件编译
<div class="content" tapmode onclick="fnOpenWareWin('{{=value.id}}');"></div> //通过 花括号= 的方式插值
{{??}} //相当于else
<div class="content" tapmode onclick="fnOpenWareWin('{{=value.id}}');"></div>
{{?}}
{{~}} // 结束标签 ~
</script>

特别注意点：如果模板中有点击事件，那么需要调用 api.parseTapmode(); 方法
由于是动态的将元素添加到Dom树上，所以需要手动触发tapmode检查，列表中的元素才能实现点击加速的效果

2.模板数据进行渲染

function fnUpdata() {
        // 获取页面存放数据的位置
        var list = $api.byId('list');
        // 1. 编译模板函数
        var tempFn = doT.template($api.byId('template').innerHTML);
        // 2. 多次使用模板函数
        var resultText = tempFn(data);
// 由于是动态的将元素添加到Dom树上，所以需要手动触发tapmode检查，列表中的元素才能实现点击加速的效果
api.parseTapmode();
}

四.图片缓存

在有用到图片的地方可以执行一个onload方法，下面代码写在方法中

api.imageCache({
url: wareTypeList[api.pageParam.wareTypeIndex].banner.url
}, function (ret, err) {
if (ret && ret.success) {
banner.src = ret.url;
}
});

五.下拉刷新

下面代码写在  apiready 页面初始化的方法中执行

api.setRefreshHeaderInfo({
visible: true,
loadingImg: 'widget://image/refresh.png',
bgColor: '#ccc',
textColor: '#fff',
textDown: '下拉刷新...',
textUp: '松开刷新...',
showTime: true,
}, function(ret, err){
fnGetWareList() //重新请求数据的方法
//从服务器加载数据，完成后调用api.refreshHeaderLoadDone()方法恢复组件到默认状态
});

六.上拉加载

此方法写在 api.addEventListener 事件监听函数中

function initEventListenter() {
// 上拉加载
api.addEventListener({
name: 'scrolltobottom',
extra: {
threshold: 300 //设置距离底部多少距离时触发，默认值为0，数字类型
}
}, function (ret, err) {
fnGetWareList(true) //重新请求数据的方法
});
}
重新请求数据的方法的方法，传递一个参数，用来标识是下拉刷新，还是上拉加载
fnGetWareList(load) {
if(load) {
skip += limit //页数加上条数
} else {
skip = 0 // 设置页数从0请求
}
}

重新请求数据方法成功后调用的更新数据的方法

// 重新请求数据方法成功后调用的更新数据的方法
function fnUpdateWareList(data_, load) {

    // 获取要显示在页面的区域
    var list = $api.byId('list');

    // 编译模板函数
    var tempFn = doT.template($api.byId('template').innerHTML);

    // 使用模板函数生成HTML文本
    var resultHTML = tempFn(data_);

    // 判断是否是加载更多，如果是加载更多，则追加到list中
    if (load) {
        $api.append(list, resultHTML);
        // 如果服务器端已经没有更多数据返回，更新提示信息
        if (data_.length < LIMIT) {
            var pushStatus = $api.byId('pushStatus');
            pushStatus.innerHTML = "没有啦！";
        }
    } else {
        // 否则，直接替换list中的内容
        $api.html(list, resultHTML);
    }

    // 由于是动态的将元素添加到Dom树上，所以需要手动触发tapmode检查，列表中的元素才能实现点击加速的效果
    api.parseTapmode();
}