AppCan学习笔记数据存储及listview简单应用

AppCan

---

AppCan开发平台简介

• AppCan是Hybrid App开发框架即混合开发框架,有官方提供底层功能使用API
• HTML5和JavaScript只是作为一种解析语言，真正调用的都是Native App一样封装的底层功能

AppCan打包

• 本地打包

IDE生成的ipa包是越狱包，只能在越狱机安装，并且不支持app上传到应用市场

• 云端打包

只需要按照AppCan的开发流程和规范开发，应用开发完后可直接将其上传到AppCan打包服务器，进行打包，平台会自动生成iOS/Android平台安装包，同事支持上传AppStore

HTML5

• LocalStorage

LocalStorage 是window的全局属性，包括localStorage和sessionStorage,二者用法基本相同，但sessionStorage是会话级别的，窗口一旦被关闭就没了，而localStorage则一直存储在本地

在AppCan中的使用
appcan.locStorage.getVal(key)               获取key保存在localStorage中对应的值
appcan.locStorage.setVal(key，Val)          要设置的键值对
appcan.locStorage.remove(key)               清除localStorage中对应的值
appcan.locStorage.keys()                    获取localStorage中，保存的所有键值

AppCan中ListView的使用

列表组件是根据AppCan 布局框架对数据列表进行封装的JS对象，通过配合的样式，使开发者在界面中可以快速完成列表控件的开发。

使用之前要添加依赖

• appcan.js
• appcan.control.js
• appcan.listview.js
• appcan.control.css

使用方法

• 常用参数

selector:                                        /*选择器*/
type:   thinLine or thickLine                    /*窄行和宽行设定*/ 
hasIcon:   true or false                         /*是否有图片*/ 
hasAngle:   true or false                        /*是否有右侧箭头*/
hasSubTitle:   true or false                     /*是否有子标题*/ 
hasTouchEffect:   true or false                  /*是否有点击效果*/ 
hasCheckbox:   true or false                     /*是否有复选按钮*/ 
hasRadiobox:   true or false                     /*是否有单选按钮*/ 
align:   "left" or "right"                       /*checkbox和radiobox居左还是居右*/
multiLine:  1 2 or 3                             /*主标题文字占用最大行数。到达行数显示不全使用…替换*/
touchClass: 'sc-bg-active' or 用户自定义         /*列表条目点击效果CSS类*/
hasControl:   true or false                      /*列表条目中是否包含switch组件。*/ 
hasGroup:   true or false                        /*列表条目是否以分组的形式展示。*/ 

示例

• 定义HTML

<!--定义一个listview的容器-->
<!-- 
引用系统CSS样式
.ubt {
    border-top: 1px solid;
}
.ubb {
    border-bottom: 1px solid;
}

.bc-border {
    border-color: #BABABA;
}
自己制作的CSS样式
.c-wh{
    background-color: white;
}
.umar-at1{
    margin-top:0.625em;
}
.uinn-a7{
    padding:0 0.625em;
}
 -->
<div id="listview"  class="ubt bc-border ubb c-wh umar-at1 uinn-a7"></div>

• 第一种script写法

  var lv = appcan.listview({
            selector : "#listview", //选择器，指定body标签中id为listview的容器
            type : "thinLine",      //窄行
            hasIcon : true,         //指定是否有图标
            hasAngle : true,        //指定是否有向右侧的箭头
            hasSubTitle : true,     //指定是否有子标题
            multiLine : 1           //指定主标题文字占的最大行数
        });
        lv.set([{
            icon : 'personal_content/css/myImg/myImg1.png',         //指定图标
            title : '我的相册',                                     //指定标题文字
            subTitle : '备注文字'                                   //指定子标题文字
        }, {
            icon : 'personal_content/css/myImg/myImg2.png',
            title : '我的收藏',
            subTitle : ''
        }, {
            icon : 'personal_content/css/myImg/myImg3.png',
            title : '我的银行卡',
            subTitle : ''
        }]);
lv.on("click",function(obj,data,subObj){
        console.log(obj);                                            //列表条目DOM对象
        console.log(data);                                           //列表条目对应数据源对象
        console.log(subObj);                                         //列表条目点击时的子元素DOM对象例如图片
        appcan.window.open(data.pagename,data.pageurl,10);           //通过此方法打开对应的界面
    })

• 第二种script写法

var arrData = [{
            'tupian' : 'myWorkDOTO_content/css/myImg/myImg1.png',
            'biaoti' : '我的相册',
            'zibiaoti' : '备注文字',
        }, {
            'tupian' : 'myWorkDOTO_content/css/myImg/myImg2.png',
            'biaoti' : '我的收藏',
            'zibiaoti' : '',
        }, {
            'tupian' : 'myWorkDOTO_content/css/myImg/myImg3.png',
            'biaoti' : '我的银行卡',
            'zibiaoti' : '',
        }];
        var listData = [];
        for (var i = 0,
            len = arrData.length; i < len; i++) {
            var list = {
                title : arrData[i].biaoti,
                icon : arrData[i].tupian,
                subTitle : arrData[i].zibiaoti
            }
            listData.push(list);
        }
        var lv = appcan.listview({
            selector : "#listview",
            type : "thinLine",
            hasIcon : true,
            hasAngle : true,
            hasSubTitle : true,
            multiLine : 1
        });

        lv.set(listData);
        lv.on('click', function(ele, context, obj, subobj) {
        })