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. jQuery最基础最全面的选择器大览

    一.基本选择器     1.标签选择器 (element):根据给定的标签名匹配元素 eg:$("h2")选取所有h2元素 --- 返回元素集合 2.类选择器 (.class):根 ...

  2. 编译安装PHP的参数 --with-mysql --with-mysqli --with-apxs2默认路径

    编译安装PHP时指定如下几个参数说明: --with-apxs2=/usr/local/apache/bin/apxs //整合apache,apxs功能是使用mod_so中的LoadModule指令 ...

  3. 不需要sql进行计算数据的平均值、最大值、最小值、和

    介绍下SqlServer.前端js.后台C#三个阶段对均值.最大值.最小值.和计算int[] jisuan = {0, 1, 3, 5, 7,8 }; List<int> jisuan2 ...

  4. 如何在Windows7上完全卸载Oracle 11g(转)

    http://blog.csdn.net/haishu_zheng/article/details/19180081

  5. JQ下的常见插件

    插件的概述:插件是以 jQuery 的核心代码为基础,编写出复合一定规范的应用程序.也就是说,插件也是 jQuery 代码,通过 js 文件引入的方式植入即可. 插件的种类很多,达上千种,主要大致可以 ...

  6. iOS并发编程笔记【转】

    线程 使用Instruments的CPU strategy view查看代码如何在多核CPU中执行.创建线程可以使用POSIX 线程API,或者NSThread(封装POSIX 线程API).下面是并 ...

  7. Extjs扩展:封装Plupload

    关于Plupload Plupload是一个web文件上传组件,支持通过HTML5.Silverlight.Flash或者普通的form来上传文件,提供了过滤文件类型.设置上传文件大小.上传进度.针对 ...

  8. UI控件(UIWebView)

    本文主要记录UIWebView三方面内容: 1.基本的加载网页链接或文件: 2.网页js调用原生,也就是Cordova混合架构的原理: 3.原生调用js程序: 原生部分主要代码: @implement ...

  9. Linux 定时任务

    200 ? "200px" : this.width)!important;} --> 介绍 本篇主要介绍Linux定时任务命令crontab的用法,crontab是定时任务 ...

  10. 巧用transform实现HTML5 video标签视频比例拉伸

    前言 原文地址 曾几何时,项目中有碰到视频比例拉伸的需求,但是发现这个看似再普通不过的一个需求,找遍全网至今都没有找到解决方法.因为强制给video标签设置width和height的话只会将video ...