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.頭部
<!--header開始-->
<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>
<!--header結束--><!--content開始-->
//3.內容部分
<div id="content" class="ub-f1 tx-l ">
</div>
<!--content結束-->
</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",
弄成Null 字元串,第二種是:
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>
