APPCAN学习笔记006_创建第一个APPCAN应用

来源：互联网发布：linux alarm 编辑：程序博客网时间：2024/05/15 19:13

1.创建一个AppCan应用
这次,咱们主要说一个天气APP的制作:
咱们主要说,新建项目,
首页布局及列表数据添加

2、开发环境
在AppCan的官方网站上创建应用，并在IDE中开发完成后，到官网上进行打包。
1）、注册并登陆AppCan应用管理系统（http://dashboard.appcan.cn/app ）。
2）、点击创建应用。
3）、输入你的应用名称，和应用描述，然后保存。
4）、点击【开发】按钮，进入天气应用的详细信息。
AppCan官网下载并安装AppCan IDE 安装下载
5）、打开AppCan IDE，并用刚才注册的用户登陆
6）、登录进入IDE
7）、点击新建项目
8）、选择同步AppCan 项目，点击下一步。
9）、选择天气点击完成。
10）、整个应用创建完成了。
----------------------------------
注意,这个需要发布的时候,需要在官网上获取appcanid
需要上面那样操作,如果不需要发布的话,只在本地测试,咱们可以这样做

打开appcan的ide工具,然后选择:
文件新建appcan项目:
填写项目名称:
weather-demo
应用名称:
weather-demo

由于是测试的项目,所以这里咱们:
这里应用的id可以随便写一写:
如果,咱们是一个需要发布的服务器项目,这里需要登录
appcan官网,获取应用id和id和应用key
这里应用id:11111
应用key:11111111

然后选择空模板:
选择默认的模板主题.

然后点击完成.
-----------------------------
首先打开:
index.html看看:
<!DOCTYPE html>
<html class="um landscape min-width-240px min-width-320px min-width-480px min-width-768px min-width-1024px">
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<link rel="stylesheet" href="css/fonts/font-awesome.min.css">
<link rel="stylesheet" href="css/ui-box.css">
<link rel="stylesheet" href="css/ui-base.css">
<link rel="stylesheet" href="css/ui-color.css">
<link rel="stylesheet" href="css/appcan.icon.css">
<link rel="stylesheet" href="css/appcan.control.css">
</head>
<body class="um-vp" ontouchstart>
<div id="page_0" class="up ub ub-ver bc-bg" tabindex="0">
//1.头部

<div id="header" class="uh bc-text-head ub bc-head">
<div class="nav-btn" id="nav-left"></div>
//2.这里标题咱们修改一下,把AppCan改成AppCan天气
<h1 class="ut ub-f1 ulev-3 ut-s tx-c" tabindex="0">AppCan</h1>
<div class="nav-btn" id="nav-right">



</div>
</div>

//3.内容部分
<div id="content" class="ub-f1 tx-l ">

</div>


</div>
//4.以下应该是页脚了.
<script src="js/appcan.js"></script>
<script src="js/appcan.control.js"></script>
</body>
<script>
appcan.ready(function() {
var titHeight = $('#header').offset().height;
appcan.frame.open("content", "index_content.html", 0, titHeight);
window.onorientationchange = window.onresize = function() {
appcan.frame.resize("content", 0, titHeight);
}
});
</script>
</html>

默认的index.html他的结构.

这个时候可以在index.html上右键,然后选择
预览,可以看到效果.

可以看到预览的是index.html,但是index.html中显示的应该是:
仅仅定义了头部和脚部的信息,其他部分,应该引用的index_content.html
中的内容.

<div id="content" class="ub-f1 tx-l ">
这里的内容,应该是引用的index_content.html中的.
</div>

---------------------
好,由于,咱们有一个列表,在index_content.html中,咱们插入一个控件
选择IDE导航中的,APPCAN中的插入控件,然后选择列表,图文列表
这里咱们天气app的城市天气列表是有图片有文字的.

好,选择插入以后,可以看到图片列表的html代码和js代码,都已经插入了
index_content.html中:

<!DOCTYPE html>
<html class="um landscape min-width-240px min-width-320px min-width-480px min-width-768px min-width-1024px">
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<link rel="stylesheet" href="css/fonts/font-awesome.min.css">
<link rel="stylesheet" href="css/ui-box.css">
<link rel="stylesheet" href="css/ui-base.css">
<link rel="stylesheet" href="css/ui-color.css">
<link rel="stylesheet" href="css/appcan.icon.css">
<link rel="stylesheet" href="css/appcan.control.css">
</head>
<body class="um-vp bc-bg" ontouchstart>
//1.可以看到插入的部分就是这些
//
<div id="listview" class="ubt bc-border sc-bg">

</div>

<script src="js/appcan.js"></script>
<script src="js/appcan.control.js"></script>
<script src="js/appcan.listview.js"></script>
</body>
<script>
appcan.ready(function() {
appcan.initBounce();
})

var lv = appcan.listview({
selector : "#listview",
type : "thinLine",
hasIcon : true,
hasAngle : true,
hasSubTitle : true,
multiLine : 1,
});
//2.这里给他指定了有两条数据
//
lv.set([{
title : "临时数据",
icon:"./css/res/appcan_s.png",
subTitle:"12:05",
id:"1"
}, {
title : "临时数据",
icon:"./css/res/appcan_s.png",
subTitle:"12:05",
id:"2"
}])
lv.on("click",function(ele,obj,curEle){
})
</script>
</html>
---------------------------------
好,去预览界面看看,可以看到预览界面已经有两条数据了
对吧,咱们把数据复制,一下多弄几条,并且改成城市名称

咱们看看:
index_content.html
<!DOCTYPE html>
<html class="um landscape min-width-240px min-width-320px min-width-480px min-width-768px min-width-1024px">
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<link rel="stylesheet" href="css/fonts/font-awesome.min.css">
<link rel="stylesheet" href="css/ui-box.css">
<link rel="stylesheet" href="css/ui-base.css">
<link rel="stylesheet" href="css/ui-color.css">
<link rel="stylesheet" href="css/appcan.icon.css">
<link rel="stylesheet" href="css/appcan.control.css">
</head>
<body class="um-vp bc-bg" ontouchstart>
<div id="listview" class="ubt bc-border sc-bg">

</div>

<script src="js/appcan.js"></script>
<script src="js/appcan.control.js"></script>
<script src="js/appcan.listview.js"></script>
</body>
<script>
appcan.ready(function() {
appcan.initBounce();
})

var lv = appcan.listview({
selector : "#listview",
type : "thinLine",
hasIcon : true,
hasAngle : true,
hasSubTitle : true,
multiLine : 1,
});
//1.这里多copy几个数据项,并且把,title改成相应的城市名称
//
lv.set([{
title : "北京",
icon:"./css/res/appcan_s.png",
subTitle:"12:05",
id:"1"
}, {
title : "上海",
icon:"./css/res/appcan_s.png",
subTitle:"12:05",
id:"2"
}, {
title : "昆明",
icon:"./css/res/appcan_s.png",
subTitle:"12:05",
id:"2"
}, {
title : "西安",
icon:"./css/res/appcan_s.png",
subTitle:"12:05",
id:"2"
}, {
title : "沈阳 ",
icon:"./css/res/appcan_s.png",
subTitle:"12:05",
id:"2"
}, {
title : "哈尔滨",
icon:"./css/res/appcan_s.png",
subTitle:"12:05",
id:"2"
}, {
title : "三亚",
icon:"./css/res/appcan_s.png",
subTitle:"12:05",
id:"2"
}, {
title : "深圳",
icon:"./css/res/appcan_s.png",
subTitle:"12:05",
id:"2"
}])
lv.on("click",function(ele,obj,curEle){
})
</script>
</html>
---------------------
好,然后咱们看看效果,可以看到
各个城市名称,已经列表显示了,而且右边
显示了对应的时间对吧.这个咱们不需要可以去掉

这里有两种做法,第一种是把 subTitle:"12:05",
弄成空字符串,第二种是:
index_content.html

这里:
var lv = appcan.listview({
selector : "#listview",
type : "thinLine",
hasIcon : true,
hasAngle : true,
hasSubTitle : true,//1.把这个设置成false就可以了.
multiLine : 1,
});

好,设置以后,咱们再看看效果.
这样就没问题了.

下面是index_content.html的整个代码:
<!DOCTYPE html>
<html class="um landscape min-width-240px min-width-320px min-width-480px min-width-768px min-width-1024px">
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<link rel="stylesheet" href="css/fonts/font-awesome.min.css">
<link rel="stylesheet" href="css/ui-box.css">
<link rel="stylesheet" href="css/ui-base.css">
<link rel="stylesheet" href="css/ui-color.css">
<link rel="stylesheet" href="css/appcan.icon.css">
<link rel="stylesheet" href="css/appcan.control.css">
</head>
<body class="um-vp bc-bg" ontouchstart>
<div id="listview" class="ubt bc-border sc-bg">

</div>

<script src="js/appcan.js"></script>
<script src="js/appcan.control.js"></script>
<script src="js/appcan.listview.js"></script>
</body>
<script>
appcan.ready(function() {
appcan.initBounce();
})

var lv = appcan.listview({
selector : "#listview",
type : "thinLine",
hasIcon : true,
hasAngle : true,
hasSubTitle : true,
multiLine : 1,
});
lv.set([{
title : "北京",
icon:"./css/res/appcan_s.png",
subTitle:"12:05",
id:"1"
}, {
title : "上海",
icon:"./css/res/appcan_s.png",
subTitle:"12:05",
id:"2"
}, {
title : "昆明",
icon:"./css/res/appcan_s.png",
subTitle:"12:05",
id:"2"
}, {
title : "西安",
icon:"./css/res/appcan_s.png",
subTitle:"12:05",
id:"2"
}, {
title : "沈阳 ",
icon:"./css/res/appcan_s.png",
subTitle:"12:05",
id:"2"
}, {
title : "哈尔滨",
icon:"./css/res/appcan_s.png",
subTitle:"12:05",
id:"2"
}, {
title : "三亚",
icon:"./css/res/appcan_s.png",
subTitle:"12:05",
id:"2"
}, {
title : "深圳",
icon:"./css/res/appcan_s.png",
subTitle:"12:05",
id:"2"
}])
lv.on("click",function(ele,obj,curEle){
})
</script>
</html>

0 0