apicloud开发学习笔记
代码同步到云端注意事项
APICloud实战培训-7天开发一款主流电商APP https://ke.qq.com/course/306222?tuin=ba00b578
APICloud代码github https://github.com/apicloudcom/APICloud-7Days-Online-Training-Tutorials
使用dropload下拉刷新和上拉加载
// 依赖文件 <link rel="stylesheet" href="../css/dropload.css"> <script src="../js/dropload.min.js"></script> <script src="../script/doT.js"></script> <script src="../js/zepto.min.js"></script> <section id="droploadArea" class="droploadArea"> <div id="dataShow" class="dataShow hidden"> 没有数据 </div> <ul id="otherMsg" pages=""> </ul> </section> <script id="otherMsgTpl" type="text/x-dot-template"> <div class="msg"> <ul> {{~it:value:index}} <li> <div> <p>提现金额</p> <p> {{= value.moneys }} ¥ </p> </div> <div> <p>提现账号</p> <p>{{= value.number }}</p> </div> <div> <p>提现状态</p> <p> {{? value.state ==1 }} 未到账 {{?? value.state ==2 }} 已到账 {{?}} </p> </div> <div> <p>提现时间</p> <p class="ren_zheng">{{= value.create_time }}</p> </div> </li> {{~}} </ul> </div> </script> <script> var userId = localStorage.getItem('user_id'); apiready = function() { // 绑定下拉事件 setRefreshHeaderInfo(); // 绑定上拉加载事件 addPushUp(); // 数据初始化 initData(); } /** * 绑定下拉事件 */ function setRefreshHeaderInfo() { api.setRefreshHeaderInfo({ visible: true, loadingImg: '', bgColor: '#ccc', textColor: '#fff', textDown: '下拉刷新...', textLoadin: '载入中', textUp: '松手刷新...', showTime: true }, function(ret, err) { var initDataPages = $('#otherMsg').attr('pages'); if (is_define(initDataPages)) { //刷新新数据 initData(); } }); } /** * 上拉加载事件 */ function addPushUp() { dropload = new Dropload({ scrollArea: window, scroller: document.querySelector('#droploadArea'), droploadUp: function(that) { var pages_history = parseInt($('#otherMsg').attr('pages')); var pages_load = pages_history + 1; api.ajax({ url: "http://www.ystx.ltd/index/getmoney/orders2.html?page="+pages_history+"&count=10", // 服务器url method: 'get', // get 请求方式 timeout: 30, // 过时时间 dataType: 'json', // 返回数据类型 returnAll: false, // 是否返回全部数据 data: { // 传参数据 values: { uid: userId, } } }, function(ret, err) { if (ret) { console.log("上拉加载时间"+JSON.stringify(ret.data)) if (0 == ret.data.length) { console.log('没有数据') setTimeout(function() { that.refresh({ lockUp: false, hasNext: false }); }, 1000); } else { setTimeout(function() { // 渲染数据coding... var otherMsg = ret.data; var interText = doT.template($("#otherMsgTpl").text()); $("#otherMsg").append(interText(otherMsg)); $('#otherMsg').attr('pages', pages_load); that.refresh({ lockUp: false, // 释放上拉锁定 hasNext: true }); api.parseTapmode(); }, 1000); } } else { setTimeout(function() { that.refresh({ lockUp: false, hasNext: true }); }, 1000); } }) } }); } /** * 数据初始化 */ function initData() { api.refreshHeaderLoading(); api.ajax({ url: "http://www.ystx.ltd/index/getmoney/orders2.html?page=1&count=10", // 服务器url method: 'get', // get 请求方式 timeout: 30, // 过时时间 dataType: 'json', // 返回数据类型 returnAll: false, // 是否返回全部数据 data: { // 传参数据 values: { uid: userId } } }, function(ret, err) { console.log("初始化数据" + JSON.stringify(ret)) if (ret) { if (is_define(ret.data)) { console.log("ret.data.length"+ret.data.length) if (0 == ret.data.length) { setTimeout(function() { $('#dataShow').removeClass('hidden'); $('#otherMsg').attr('pages', 1); dropload.refresh({ lockUp: false, hasNext: false }); api.refreshHeaderLoadDone(); }, 1000); } else { // 有数据的情况 setTimeout(function() { if (!$('#dataShow').hasClass('hidden')) { $('#dataShow').addClass('hidden'); } console.log("需要渲染数据1111111") // 渲染数据coding... var otherMsg = ret.data; var interText = doT.template($("#otherMsgTpl").text()); $("#otherMsg").html(interText(otherMsg)); $('#otherMsg').attr('pages', 1); dropload.refresh({ lockUp: false, hasNext: true }); api.parseTapmode(); api.refreshHeaderLoadDone(); }, 1000); } } } else { setTimeout(function() { dropload.refresh({ lockUp: false, hasNext: true }); api.refreshHeaderLoadDone(); }, 1000); } }); } </script> |
openFrame和openWin
openWin是新开一个窗口，
openFrame相当于在窗口开一个Div或区域。
openWidget是打开一个app,
openWin win占满一屏 不能设置大小，frame可以，一把frame依附于win之上，关了window 通过该window打开的frame也会被关。
api.openWin({ name: 'withdraw_log_win', url: 'withdraw_log_win.html' }); |
打开提现日志页面
withdraw_log_win.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<link rel="stylesheet" type="text/css" href="../css/aui.css" />
<link rel="stylesheet" type="text/css" href="../css/style.css"/>
</head>
<body>
<header class="aui-navBar aui-navBar-fixed" style="background: #fff;" id="aui-header">
<a onclick="closeWin()" class="aui-navBar-item" >
<i class="icon icon-back"></i>
</a>
<div class="aui-center">
<span class="aui-center-title" id="title" > 提现日志</span>
</div>
<a class="aui-navBar-item" style="color: #725f5f;" >
<i class="icon"></i>
</a>
</header>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
///// apiready 一打开就执行的 函数
apiready = function(){
api.parseTapmode();
var header = $api.byId('aui-header');
$api.fixStatusBar(header);
var headerPos = $api.offset(header);
var body_h = $api.offset($api.dom('body')).h;
api.openFrame({
name: 'withdraw_log_frm', // 打开frame页面
url: 'withdraw_log_frm.html',
bounces: true,
rect: {
x: 0,
y: headerPos.h,
w: 'auto',
h: 'auto'
},
pageParam:{}
})
}
////////////////////// 返回按钮 方法 closeWin S //////////////////////
function closeWin(){
api.closeWin({
});
}
////////////////////// 返回按钮 方法 closeWin E //////////////////////
</script>
</html> |
监听多个dom元素事件
<div class="nav_li"> <ul> <li data_id="1" class="active">一级</li> <li data_id="2">二级</li> <li data_id="3">三级</li> </ul> </div> var navUlLiDomList = $api.domAll('.nav_li ul li') console.log(JSON.stringify(navUlLiDomList)) // nodeList for (var i = 0; i < navUlLiDomList.length; i++) { console.log("测试" + navUlLiDomList[i]) $api.addEvt(navUlLiDomList[i], 'click', function() { $api.removeCls($api.dom(".nav_li ul li.active"), 'active'); $api.addCls(this, 'active'); }); } |