APICloud项目开发

一、APP前端界面布局

1.概念解析

Window：窗口

Frame：子窗口

FrameGroup：一组子窗口组合

一个APP页面是一个Window，一个Window可以有多个Frame，多个Frame组成一个FrameGroup，div+css+js 写在Frame里面

2.数据存储

file：目录操作，文件操作，文件存储模式，用于图片、文档的上传、下载、删除、管理等

db：本地sqlite数据库，用于离线数据的存储

localStorage：HTML5 localStorage，用于一些变量的存储、传递，如用户的登录状态，多个页面之间的变量传递，注：cookie、session无法使用

preference：setPrefs、getPrefs、removePrefs，APICloud封装好的偏好数据存储模块，用于设置应用的偏好变量，如应用的皮肤，字体大小等个性化的设置

3.使用编辑器，右键单击单页面wifi实时预览，是取不到本地缓存的，只有通过页面点击，正常进入该页面，才能取到本地缓存，或者默认初始化打开一个页面，如在初始index.html页面增加如下代码，即可默认打开一个页面，这样就可以取到本地缓存：

function init() {
    api.openWin({
        name: 'page1',
        url: './admin/group/accessHomeData/main.html',
    });
    return;
}

4.这里面的事件，类似于子组件事件传递给父组件

跳转后的页面，点击发送事件：

hanlderClick: function( item ) {
          api.sendEvent({
              name: api.pageParam.eventName,  //SET_SEARCH_CLICK
              extra: {
                unitId: item.unitId
              }
          });
          setTimeout(api.closeWin, 500)
        },

要跳转回来的页面，监听这个name的事件

api.addEventListener({
            name: SET_SEARCH_CLICK
        }, function(ret, err){
            if( ret ){
                 alert( JSON.stringify( ret ) );
            }else{
                 alert( JSON.stringify( err ) );
            }
        });

　注意：name值必须一样

风险评估页面结构备份

<div class="risk-assessment-list" v-for="(item,index) in gradeList" :key="index">
              <div class="flex flex-start align-center risk-unit-number" @click="changeFold">
                <em class="item-icon" :class="'status'+(index+1)"></em>
                <div class="progress-info">
                  <p><span>{{item.a1}} <em>{{item.a2}}家</em></span><b :class="'status'+(index+1)">{{item.a3}}%</b></p>
                  <div class="progress-bar">
                    <div :style="{width: item.a3 +'%'}" :class="'status'+(index+1)"></div>
                  </div>
                </div>
                <i class="iconfont icon-arrow-right" :class="{'arrow-right-hide': fold}"></i>
              </div>
              <div class="foldContainer" ref="foldContainer">
                <div class="risk-unit-list flex space-between align-center">
                  <p>中信银行大厦(亚太物业)</p>
                  <span>97 分</span>
                </div>
                <div class="risk-unit-list flex space-between align-center">
                  <p>东城国贸（亚太物业）</p>
                  <span>66 分</span>
                </div>
              </div>
            </div>