Android程序员开发已从最早的异常火热到现在已经逐渐趋向稳定,目前企业针对 Android 开发工程师的要求要求已逐步提高,现在想从众多的面试者中脱颖而出,必须打好坚实的代码基础。
今天为大家介绍一款目前国内较流行的混合开发平台: AppCan。
先来看一下 AppCan的 简介 :
广义上, AppCan是一套完整庞大的、云端一体的移动PaaS平台,拥有覆盖移动应用全生命周期的产品体系,同时服务2D开发者(工具)、2B企业(移动化、数字化)、2G政府(双创),是国内移动平台技术的领跑者。
技术原理
AppCan是基于HTML5技术的Hybird跨平台移动应用开发工具。
开发者利用 HTML5+CSS3+JavaScript技术,通过AppCan IDE集成开发系统、云端打包器等,快速开发出Android、iOS、WP平台上的移动应用。
创建一个 AppCan应用
1、应用简介
该应用会一步一步给你演示怎么开发一个 AppCan应用。该应用包含最常用的插件, window 、 request 、 file 等。另外教会你使用 AppCan 应用开发平台, AppCan IDE 等相关知识。
开始使用 API>>
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)、整个应用创建完成了。
3、应用开发
1) 、打开 index.html 页面加入应用头部,我们的头部都是统一的,所以加入一下代码
删除默认的背景图片,你也可也在 css中修改, index/css/main.css
2)、 打开 index_content.html 页面这个是我们的内容页面。因为这是天气列表内容页,引入列表控件的 js 文件、 css 文件( appcan.listview.js 、 appcan.control.css ) , 在 body 中插入一个容器元素来显示列表内容。
3)、用 listview 控件添加列表内容我们添加六个城市, listview 的 icon 我们放置天气状况,设置天气列表 , 刚开始我们我们用默认图片,等列表加载完成之后我们 用 appcan.request.ajax() 方法异步请求真正的天气列表数据。
列表添加完成,异步获取天气状况,我们用百度的天气 api。
添加点击事件,当点击的时候保存点击的城市,并打开详情页面。
4)、我们添加一个方法当页面下拉的时候完成刷新动作, appcan sdk 中已经封装好了该方法
5)、到此我们就完成了整个城市列表的内容了下面就是完成的内容。
function updateInfo(city,ele){
var weatherUrl = 'http://api.map.baidu.com/telematics/v3/weather?location='+city+'&output=json&ak=hTXrtTGGcljoOMdf2jZcc1yD';
appcan.request.getJSON(weatherUrl,function(data){
if(data.error){
alert('获取天气出错');
}else{
var weatherData = data.results[0].weather_data;
var today = weatherData[0];
$(ele).find('.lis-icon-s').css('background-image','url("'+today.dayPictureUrl+'")');
}
});
}
appcan.ready(function(){
appcan.frame.setBounce(0, function(type) {
//$("#pullstatus"+type).html(!type?"开始下拉":"开始上拖");
}, function(type) {
//$("#pullstatus"+type).html(!type?"下拉超过临界点,产生事件了!":"超过临界点,产生事件了!");
}, function(type) {
$('.city-list li').each(function(i,v){
var data = v.lv_data;
if(!data){
return;
}
updateInfo(encodeURI(data.title),v);
});
appcan.frame.resetBounce(type);
})
var lv = appcan.listview({
selector : ".city-list",
hasIcon : true,
hasAngle : true
});
lv.set([{
title : "北京",
icon:"./css/res/appcan_s.png",
icontitle : "",
},
{
title : "南京",
icon:"./css/res/appcan_s.png",
icontitle : "",
},
{
title : "杭州",
icon:"./css/res/appcan_s.png",
icontitle : "",
},
{
title : "深圳",
icon:"./css/res/appcan_s.png",
icontitle : "",
},
{
title : "上海",
icon:"./css/res/appcan_s.png",
icontitle : "",
},
{
title : "三亚",
icon:"./css/res/appcan_s.png",
icontitle : "",
},
{
title : "昆明",
icon:"./css/res/appcan_s.png",
icontitle : "",
}]);
function openDetail(city){
appcan.window.open({
name:'detail',
data:'detail.html?'+city,
aniId:10
});
appcan.locStorage.val('city',city);
}
lv.on('click', function(ele, obj, subobj) {
openDetail(encodeURI(obj.title));
});
$('.city-list li').each(function(i,v){
var data = v.lv_data;
if(!data){
return;
}
updateInfo(encodeURI(data.title),v);
});
})
6)、新增天气详情页面 detail.html 、 detail_content.html 两个页面 detail.html 页面里面我们加一个标题和页尾,标题加一个返回按钮
返回按钮开始 -->