apicloud +vue 学习笔记 2019.02.21

开始入坑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);
    });