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) {
        })