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) { console.log（data） //传过来的数据 }

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