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简单应用的更多相关文章

  1. AppCan学习笔记----Request和登录功能简单实现

    appcan.ajax(options) 实现appcan中网络数据的上传和获取 发起一个ajax请求,并获取相应的内容 常用参数 options.type: 请求的类型,包括GET.POST等 op ...

  2. iOS学习笔记--数据存储

    iOS应用数据存储的常用方式 XML属性列表(plist)归档 Preference(偏好设置) NSKeyedArchiver归档(NSCoding) SQLite3 Core Data 1. XM ...

  3. APPCAN学习笔记004---AppCan与Hybrid,appcan概述

    APPCAN学习笔记004---AppCan与Hybrid,appcan概述 技术qq交流群:JavaDream:251572072 本节讲了appcan的开发流程,和开发工具 笔记不做具体介绍了,以 ...

  4. SQL反模式学习笔记12 存储图片或其他多媒体大文件

    目标:存储图片或其他多媒体大文件 反模式:图片存储在数据库外的文件系统中,数据库表中存储文件的对应的路径和名称. 缺点:     1.文件不支持Delete操作.使用SQL语句删除一条记录时,对应的文 ...

  5. Flutter学习笔记(25)--ListView实现上拉刷新下拉加载

    如需转载,请注明出处:Flutter学习笔记(25)--ListView实现上拉刷新下拉加载 前面我们有写过ListView的使用:Flutter学习笔记(12)--列表组件,当列表的数据非常多时,需 ...

  6. APPCAN学习笔记001---app高速开发AppCan.cn平台概述

    1.APPCAN学习笔记---app高速开发AppCan.cn平台概述 1. 平台概述 技术qq交流群:JavaDream:251572072 AppCan.cn开发平台是基于HTML5技术的跨平台移 ...

  7. 学习笔记:利用GDI+生成简单的验证码图片

    学习笔记:利用GDI+生成简单的验证码图片 /// <summary> /// 单击图片时切换图片 /// </summary> /// <param name=&quo ...

  8. APPCAN学习笔记003---原生开发与HTML5技术

    APPCAN学习笔记003---原生开发与HTML5技术 技术qq交流群:JavaDream:251572072 1.HTML5的优势:   HTML5强悍牢固的骨架   CSS3精致到每一个毛孔的皮 ...

  9. Directx11学习笔记【一】 最简单的windows程序HelloWin

    声明:本系列教程代码有部分来自dx11龙书及dx11游戏编程入门两本书,后面不再说明 首先,在vs2013中创建一个空的解决方案Dx11Demo,以后的工程都会放在这个解决方案下面.然后创建一个win ...

随机推荐

  1. 实验mongodb使用gridfs存放一个大文件

    1.启动mongoDB 2.使用gridfs存放大文件 3.观察fs.chunks和fs.files的情况 命令 db.fs.chunks.find()查到的是一些二进制文件:

  2. 内存不足时,调用ajax报的错

    在error中遍历出来的异常   很难见

  3. WebClient 数据传输

    数据提交 post  ,get public string WebClientPost(string PostData, string PostUrl, string Type) { string p ...

  4. 判断是否为mac电脑 、还是windows操作系统

    /** * 是否为mac系统(包含iphone手机) * */ var isMac = function() { return /macintosh|mac os x/i.test(navigator ...

  5. iOS中assign、copy 、retain等关键字的含义

    iOS中assign.copy .retain等关键字的含义  转自:http://my.oschina.net/majiage/blog/267409 assign: 简单赋值,不更改索引计数cop ...

  6. UWP图片编辑器(涂鸦、裁剪、合成)

    一.编辑器简介 写这个控件之前总想找一找开源的,可以偷下懒省点事.可是各种地方都搜遍了也没有找到. 于是,那就做第一个吃螃蟹的人吧! 控件主要有三个功能:涂鸦.裁剪.合成. 涂鸦:主要是用到了InkT ...

  7. Java多线程7:死锁

    前言 死锁单独写一篇文章是因为这是一个很严重的.必须要引起重视的问题.这不是夸大死锁的风险,尽管锁被持有的时间通常很短,但是作为商业产品的应用程序每天可能要执行数十亿次获取锁->释放锁的操作,只 ...

  8. C#事件

    事件(event),这个词儿对于初学者来说,往往总是显得有些神秘,不易弄懂.而这些东西却往往又是编程中常用且非常重要的东西.大家都知道windows消息处理机制的重要,其实C#事件就是基于window ...

  9. WCF 安全性 之 自定义证书验证

    案例下载 http://download.csdn.net/detail/woxpp/4113172 客户端调用代码 通过代理类 代理生成 参见 http://www.cnblogs.com/woxp ...

  10. for 循环打印图形

    public class For { public static void main(String[] args) { //"使用双层for循环打印图形时,外层管行,内层管列",那 ...