APICloud项目纪要

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

1 api.openWin({
2 name: 'ware',
3 url: './ware.html',
4 pageParam: {
5 wareId: 'w123'
6 }
7 });

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

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

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

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

2.自定义全局事件

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

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

 1 api.addEventListener({
 2 name: 'cityChange' //监听的事件名
 3 }, function (ret, err) {
 4 if (ret) {
 5 if (ret.value) {
 6 // 得到数据
 7 currentCityId = ret.value.currentCity.id;
 8 }
 9 }
10 });

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

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

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

2.模板数据进行渲染

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

四.图片缓存

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

1 api.imageCache({
2 url: wareTypeList[api.pageParam.wareTypeIndex].banner.url
3 }, function (ret, err) {
4 if (ret && ret.success) {
5 banner.src = ret.url;
6 }
7 });

五.下拉刷新

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

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

六.上拉加载

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

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

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

 1 // 重新请求数据方法成功后调用的更新数据的方法
 2 function fnUpdateWareList(data_, load) {
 3 
 4     // 获取要显示在页面的区域
 5     var list = $api.byId('list');
 6 
 7     // 编译模板函数
 8     var tempFn = doT.template($api.byId('template').innerHTML);
 9 
10     // 使用模板函数生成HTML文本
11     var resultHTML = tempFn(data_);
12 
13     // 判断是否是加载更多，如果是加载更多，则追加到list中
14     if (load) {
15         $api.append(list, resultHTML);
16         // 如果服务器端已经没有更多数据返回，更新提示信息
17         if (data_.length < LIMIT) {
18             var pushStatus = $api.byId('pushStatus');
19             pushStatus.innerHTML = "没有啦！";
20         }
21     } else {
22         // 否则，直接替换list中的内容
23         $api.html(list, resultHTML);
24     }
25 
26     // 由于是动态的将元素添加到Dom树上，所以需要手动触发tapmode检查，列表中的元素才能实现点击加速的效果
27     api.parseTapmode();
28 }