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 )。

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.jsappcan.control.css,body中插入一個容器元素來顯示列表內容。

<div class="city-list content">

</div>

3)、用listview控件添加列表內容我們添加六個城市,listviewicon我們放置天氣狀況,設置天氣列表,剛開始我們我們用默認圖片,等列表加載完成之后我們 用appcan.request.ajax()方法異步請求真正的天氣列表數據。

 

 

列表添加完成,異步獲取天氣狀況,我們用百度的天氣api

 

添加點擊事件,當點擊的時候保存點擊的城市,並打開詳情頁面。

 

4)、我們添加一個方法當頁面下拉的時候完成刷新動作,appcan sdk中已經封裝好了該方法

 

5)、到此我們就完成了整個城市列表的內容了下面就是完成的內容。

<!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-base.css">

<link rel="stylesheet" href="css/ui-box.css">

<link rel="stylesheet" href="index/css/main.css">

<link rel="stylesheet" href="css/ui-color.css">

<link rel="stylesheet" href="css/appcan.control.css">

</head>

<body class="um-vp" ontouchstart>

<div class="city-list content">

</div>

<script src="js/appcan.js"></script>

<script src="js/plugin/appcan_plugin.js"></script>

<script src="js/appcan.listview.js"></script>

<script>

 

    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);

        });

    })

</script>

</body>

</html>

6)、新增天氣詳情頁面detail.htmldetail_content.html兩個頁面detail.html頁面里面我們加一個標題和頁尾,標題加一個返回按鈕

<!--header開始-->

<div id="header" class="uh t-wh ub c-blu">

<!- 返回按鈕開始 -->

<div class="nav-btn" id="nav-left">

<div class="fa fa-arrow-left ulev2"></div>

</div>

<!- 返回按鈕結束 -->

<h1 class="ut ub-f1 ulev-3 ut-s tx-c" tabindex="0">

<span class="detail-title"></span>

</h1>

 

<div class="nav-btn umw4 ub ub-ac ub-pc">

 

</div>

</div>

<!--header結束--><!--content開始-->

<div id="content" class="ub-f1 tx-l appCan ub-img4">

 

 

</div>

<!--content結束-->

<!--footer-->

<div id="footer" class="uinn-z1">

<div class="tx-c t-93 ulev0 ufm1">www.appcan.cn</div>

<div class="tx-c t-93 ulev-4 umar-at1">正益無線(北京)科技有限公司</div>

</div>

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)、現在添加城市天氣詳情頁面,因為天氣為三天的天氣,所以我們這里可以用列表控件,先生成列表數據,三天天氣都大致相同,我們定義一個模版。

<script type="text/template" id="weather-tmp">

 

<div class="day">

<span class="temperature"><%-weather_data.temperature%></span>

<div>

<span><%-weather_data.wind%></span>

<span><%-weather_data.weather%></span>

</div>

<span class="weather-pic">

<img src="<%-weather_data.dayPictureUrl%>"><br>

<span><%-weather_data.date%></span>

</span>

</div>

 

</script>

10)、新增更新天氣函數,來更新天氣數據

 

11)、執行更新數據,在更新數據前先打開一個提示框表明正在加載數據,當數據加載成功刪除提示框,把獲取的數據傳給更新列表函數進行渲染

 

12)初始化頁面,獲取傳來的城市然后根據該城市更新頁面數據

    appcan.ready(function(){

        appcan.initBounce();

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

        updateInfo(city);

 

    })

4、應用打包

開發完成打包應用有兩種方式,一種是本地打包,一種是線上打包。

4.1、本地打包(僅供測試使用)

1)、點擊發行

或者右鍵點擊phone,然后點擊生成安裝包

2)、可以修改應用名稱,上傳圖標,我們使用默認的然后點擊下一步

3)、選擇要生成的平台,啟動畫面點擊下一步

4)、選擇需要的插件然后點擊完成。等待打包如果打包完成就會自動打開應用目錄。

4.2、線上打包

1)、點擊右鍵把代碼提交的服務器

 

2)、選擇要提交的文件。點擊ok

3)、選擇應用進入詳情頁面,並點擊應用開發,進入應用開發頁面

4)、點擊應用打包,點擊圖標設置可以修改圖標,點擊啟動頁面可以修改啟動頁面,然后選擇插件,證書,最后點擊雲端打包。

5)、選擇平台和版本號,點擊生成安裝包。

6)、等待打包完成,可以下載生成的安裝包了,點擊下一步進入應用詳情頁面。

 

 

以上就是今天要介紹的內容,謝謝。


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com