Android 混合式开发AppCan介绍

     Android程序员开发已从最早的异常火热到现在已经逐渐趋向稳定,目前企业针对Android开发工程师的要求要求已逐步提高,现在想从众多的面试者中脱颖而出,必须打好坚实的代码基础。

   今天为大家介绍一款目前国内较流行的混合开发平台:AppCan

   先来看一下AppCan简介

   广义上,AppCan是一套完整庞大的、云端一体的移动PaaS平台,拥有覆盖移动应用全生命周期的产品体系,同时服务2D开发者(工具)、2B企业(移动化、数字化)、2G政府(双创),是国内移动平台技术的领跑者。

技术原理

AppCan是基于HTML5技术的Hybird跨平台移动应用开发工具。

开发者利用HTML5+CSS3+JavaScript技术,通过AppCan IDE集成开发系统、云端打包器等,快速开发出Android、iOS、WP平台上的移动应用。

创建一个AppCan应用

1、应用简介

该应用会一步一步给你演示怎么开发一个AppCan应用。该应用包含最常用的插件,windowrequestfile等。另外教会你使用AppCan应用开发平台,AppCan IDE等相关知识。

开始使用API>>

2、开发环境

AppCan的官方网站上创建应用,并在IDE中开发完成后,到官网上进行打包。

1)、注册并登陆AppCan应用管理系统

http://dashboard.appcan.cn/app )。

Android 混合式开发AppCan介绍_第1张图片

2)、点击创建应用。

3)、 输入你的应用名称,和应用描述,然后保存。

Android 混合式开发AppCan介绍_第2张图片

4)、点击【开发】按钮,进入天气应用的详细信息。

Android 混合式开发AppCan介绍_第3张图片

AppCan官网下载并安装AppCan IDE 安装下载

5)、打开AppCan IDE,并用刚才注册的用户登陆

Android 混合式开发AppCan介绍_第4张图片

6)、登录进入IDE

Android 混合式开发AppCan介绍_第5张图片

7)、点击新建项目

Android 混合式开发AppCan介绍_第6张图片

8)、选择同步AppCan 项目,点击下一步。

Android 混合式开发AppCan介绍_第7张图片

9)、选择天气点击完成。

Android 混合式开发AppCan介绍_第8张图片

10)、整个应用创建完成了。

3、应用开发

1) 、打开index.html页面加入应用头部,我们的头部都是统一的,所以加入一下代码

 Android 混合式开发AppCan介绍_第9张图片

删除默认的背景图片,你也可也在css中修改,index/css/main.css

2)、 打开index_content.html页面这个是我们的内容页面。因为这是天气列表内容页,引入列表控件的js文件、css文件(appcan.listview.jsappcan.control.css,body中插入一个容器元素来显示列表内容。

3)、用listview控件添加列表内容我们添加六个城市,listviewicon我们放置天气状况,设置天气列表,刚开始我们我们用默认图片,等列表加载完成之后我们 用appcan.request.ajax()方法异步请求真正的天气列表数据。

 Android 混合式开发AppCan介绍_第10张图片

Android 混合式开发AppCan介绍_第11张图片

 

列表添加完成,异步获取天气状况,我们用百度的天气api

 Android 混合式开发AppCan介绍_第12张图片

添加点击事件,当点击的时候保存点击的城市,并打开详情页面。

 Android 混合式开发AppCan介绍_第13张图片

4)、我们添加一个方法当页面下拉的时候完成刷新动作,appcan sdk中已经封装好了该方法

 Android 混合式开发AppCan介绍_第14张图片

5)、到此我们就完成了整个城市列表的内容了下面就是完成的内容。

6)、新增天气详情页面detail.htmldetail_content.html两个页面detail.html页面里面我们加一个标题和页尾,标题加一个返回按钮

返回按钮开始 -->

返回按钮结束 -->

 

 

 

 

www.appcan.cn

正益无线(北京)科技有限公司

7)、我们用button控件来给返回按钮加上事件

 appcan.button(".nav-btn", "btn-act", function() {

            appcan.window.close(-1);

        });

8)、获取当前城市并设置当前状态页面,标题的内容

var city = appcan.locStorage.val('city');

         $('.detail-title').html(decodeURI(city)+'天气详情');

9)、现在添加城市天气详情页面,因为天气为三天的天气,所以我们这里可以用列表控件,先生成列表数据,三天天气都大致相同,我们定义一个模版。

 

<%-weather_data.temperature%>

<%-weather_data.wind%>

<%-weather_data.weather%>

">

<%-weather_data.date%>

 

10)、新增更新天气函数,来更新天气数据

Android 混合式开发AppCan介绍_第15张图片

 

11)、执行更新数据,在更新数据前先打开一个提示框表明正在加载数据,当数据加载成功删除提示框,把获取的数据传给更新列表函数进行渲染

 Android 混合式开发AppCan介绍_第16张图片

12)初始化页面,获取传来的城市然后根据该城市更新页面数据

    appcan.ready(function(){

        appcan.initBounce();

        var city = appcan.locStorage.val('city');

        updateInfo(city);

 

    })

4、应用打包

开发完成打包应用有两种方式,一种是本地打包,一种是线上打包。

4.1、本地打包(仅供测试使用)

1)、点击发行

Android 混合式开发AppCan介绍_第17张图片

或者右键点击phone,然后点击生成安装包

Android 混合式开发AppCan介绍_第18张图片

2)、可以修改应用名称,上传图标,我们使用默认的然后点击下一步

Android 混合式开发AppCan介绍_第19张图片

3)、选择要生成的平台,启动画面点击下一步

Android 混合式开发AppCan介绍_第20张图片

4)、选择需要的插件然后点击完成。等待打包如果打包完成就会自动打开应用目录。

Android 混合式开发AppCan介绍_第21张图片

4.2、线上打包

1)、点击右键把代码提交的服务器

 Android 混合式开发AppCan介绍_第22张图片

2)、选择要提交的文件。点击ok

Android 混合式开发AppCan介绍_第23张图片

3)、选择应用进入详情页面,并点击应用开发,进入应用开发页面

Android 混合式开发AppCan介绍_第24张图片

4)、点击应用打包,点击图标设置可以修改图标,点击启动页面可以修改启动页面,然后选择插件,证书,最后点击云端打包。

5)、选择平台和版本号,点击生成安装包。

Android 混合式开发AppCan介绍_第25张图片

6)、等待打包完成,可以下载生成的安装包了,点击下一步进入应用详情页面。

 Android 混合式开发AppCan介绍_第26张图片

Android 混合式开发AppCan介绍_第27张图片

 

以上就是今天要介绍的内容,谢谢。

你可能感兴趣的:(移动开发,javascript,开发工具,ViewUI)