开始入坑apicloud.从头开始,页面搭建。步骤如下:
1. 新建项目,在apiloud云平台上,将可能用到的模块引入。并在 模块——自定义Loader中下载自定义的Apploader。安装要本地的手机模拟器中。
2. 引入aui.css 将下载的aui包中的css文件夹,命名为aui 。放在项目的css目录下。并在index.html中引用。注:引入后记得全量同步一下代码。
3. 项目中添加aui代码,header 和 footer 更改相应的名称。
4. js代码部分,引入
vue.js
aui.css //前端框架
iconfont.css //阿里的iconfont.css 是从阿里云的符号库里下载代码,将包解压到 /css/iconfont/下 ,在页面中引用iconfont.css
<link rel="stylesheet" type="text/css" href="./css/aui/aui.css" />
<link rel="stylesheet" type="text/css" href="./css/iconfont/iconfont.css" />
<script type="text/javascript" src="./script/api.js"></script>
<script src="https://cdn.bootcss.com/vue/2.6.4/vue.min.js"></script>
5.vue的用法
v-for="(vo,index) in list" 循环
v-bind: 绑定
{‘aui-active’: active_index == index} 判断相等时为
v-on:click 点击事件
v-if 成立时显示
<div class="aui-bar-tab-item " tapmode v-for="(vo,index) in list" v-bind:class="{'aui-active': active_index == index}" v-on:click="switchFrame(index);"> // 切换Frame方法,后面有定法
<i class="iconfont icon-home" v-if="index == 0"></i>
<i class="iconfont icon-baohu" v-if="index == 1"></i>
<i class="iconfont icon-weizhangcheliang" v-if="index == 2"></i>
<i class="iconfont icon-foodmarketpurc" v-if="index == 3"></i>
<i class="iconfont icon-wo-de" v-if="index == 4"></i>
<div class="aui-bar-tab-label">{{vo.title}}</div>
</div>
6. 设置Frame组
Frame 为win 内嵌页面,生成时要计算区域 rect
api.openFrameGroup ({
name: 'group',
background: '#fff',
scrollEnabled: false,
rect: {
x: 0,
y: headerH,
w: 'auto',
h: frameH
},
frames: [{
name: 'index',
url: 'html/index.html',
bgColor: '#f5f5f5',
bounces: false
},{
name: 'main',
url: 'html/main.html',
bgColor: '#f5f5f5',
bounces: false
},{
name: 'market',
url: 'html/market.html',
bgColor: '#f5f5f5',
bounces: false
},{
name: 'user',
url: 'html/user.html',
bgColor: '#f5f5f5',
bounces: false
}]
}, function(ret, err){
if( ret ){
}else{
}
});
}, switchFrame: function(index){ //传递index值 赋给FrameGroup
if(vm.active_index == index){
return false;
}
api.setFrameGroupIndex({
name: 'group',
index: index
});
vm.active_index = index;
}
7. 下拉刷新
调用方法setRefreshHeaderInfo 然后vm.init()一下数据OK.
api.setRefreshHeaderInfo({
visible: true,
loadingImg: 'widget://image/refresh.png',
bgColor: '#ccc',
textColor: '#fff',
textDown: '下拉刷新...',
textUp: '松开刷新...',
showTime: true
}, function(ret, err){
vm.init();
setTimeout('api.refreshHeaderLoadDone()',500);
});