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 }
如果我的文章对您有帮助,欢迎您点击推荐以及评论 QAQ