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) {
})
AppCan学习笔记--数据存储及listview简单应用的更多相关文章
- AppCan学习笔记----Request和登录功能简单实现
appcan.ajax(options) 实现appcan中网络数据的上传和获取 发起一个ajax请求,并获取相应的内容 常用参数 options.type: 请求的类型,包括GET.POST等 op ...
- iOS学习笔记--数据存储
iOS应用数据存储的常用方式 XML属性列表(plist)归档 Preference(偏好设置) NSKeyedArchiver归档(NSCoding) SQLite3 Core Data 1. XM ...
- APPCAN学习笔记004---AppCan与Hybrid,appcan概述
APPCAN学习笔记004---AppCan与Hybrid,appcan概述 技术qq交流群:JavaDream:251572072 本节讲了appcan的开发流程,和开发工具 笔记不做具体介绍了,以 ...
- SQL反模式学习笔记12 存储图片或其他多媒体大文件
目标:存储图片或其他多媒体大文件 反模式:图片存储在数据库外的文件系统中,数据库表中存储文件的对应的路径和名称. 缺点: 1.文件不支持Delete操作.使用SQL语句删除一条记录时,对应的文 ...
- Flutter学习笔记(25)--ListView实现上拉刷新下拉加载
如需转载,请注明出处:Flutter学习笔记(25)--ListView实现上拉刷新下拉加载 前面我们有写过ListView的使用:Flutter学习笔记(12)--列表组件,当列表的数据非常多时,需 ...
- APPCAN学习笔记001---app高速开发AppCan.cn平台概述
1.APPCAN学习笔记---app高速开发AppCan.cn平台概述 1. 平台概述 技术qq交流群:JavaDream:251572072 AppCan.cn开发平台是基于HTML5技术的跨平台移 ...
- 学习笔记:利用GDI+生成简单的验证码图片
学习笔记:利用GDI+生成简单的验证码图片 /// <summary> /// 单击图片时切换图片 /// </summary> /// <param name=&quo ...
- APPCAN学习笔记003---原生开发与HTML5技术
APPCAN学习笔记003---原生开发与HTML5技术 技术qq交流群:JavaDream:251572072 1.HTML5的优势: HTML5强悍牢固的骨架 CSS3精致到每一个毛孔的皮 ...
- Directx11学习笔记【一】 最简单的windows程序HelloWin
声明:本系列教程代码有部分来自dx11龙书及dx11游戏编程入门两本书,后面不再说明 首先,在vs2013中创建一个空的解决方案Dx11Demo,以后的工程都会放在这个解决方案下面.然后创建一个win ...
随机推荐
- jQuery最基础最全面的选择器大览
一.基本选择器 1.标签选择器 (element):根据给定的标签名匹配元素 eg:$("h2")选取所有h2元素 --- 返回元素集合 2.类选择器 (.class):根 ...
- 编译安装PHP的参数 --with-mysql --with-mysqli --with-apxs2默认路径
编译安装PHP时指定如下几个参数说明: --with-apxs2=/usr/local/apache/bin/apxs //整合apache,apxs功能是使用mod_so中的LoadModule指令 ...
- 不需要sql进行计算数据的平均值、最大值、最小值、和
介绍下SqlServer.前端js.后台C#三个阶段对均值.最大值.最小值.和计算int[] jisuan = {0, 1, 3, 5, 7,8 }; List<int> jisuan2 ...
- 如何在Windows7上完全卸载Oracle 11g(转)
http://blog.csdn.net/haishu_zheng/article/details/19180081
- JQ下的常见插件
插件的概述:插件是以 jQuery 的核心代码为基础,编写出复合一定规范的应用程序.也就是说,插件也是 jQuery 代码,通过 js 文件引入的方式植入即可. 插件的种类很多,达上千种,主要大致可以 ...
- iOS并发编程笔记【转】
线程 使用Instruments的CPU strategy view查看代码如何在多核CPU中执行.创建线程可以使用POSIX 线程API,或者NSThread(封装POSIX 线程API).下面是并 ...
- Extjs扩展:封装Plupload
关于Plupload Plupload是一个web文件上传组件,支持通过HTML5.Silverlight.Flash或者普通的form来上传文件,提供了过滤文件类型.设置上传文件大小.上传进度.针对 ...
- UI控件(UIWebView)
本文主要记录UIWebView三方面内容: 1.基本的加载网页链接或文件: 2.网页js调用原生,也就是Cordova混合架构的原理: 3.原生调用js程序: 原生部分主要代码: @implement ...
- Linux 定时任务
200 ? "200px" : this.width)!important;} --> 介绍 本篇主要介绍Linux定时任务命令crontab的用法,crontab是定时任务 ...
- 巧用transform实现HTML5 video标签视频比例拉伸
前言 原文地址 曾几何时,项目中有碰到视频比例拉伸的需求,但是发现这个看似再普通不过的一个需求,找遍全网至今都没有找到解决方法.因为强制给video标签设置width和height的话只会将video ...