Android 混合式開發AppCan介紹

時間  2019-11-12
標籤 android 混合 開發 appcan 介紹 欄目 Android 简体版
原文   原文鏈接

     Android程序員開發已從最先的異常火熱到如今已經逐漸趨向穩定，目前企業針對Android開發工程師的要求要求已逐步提升，如今想從衆多的面試者中脫穎而出，必須打好堅實的代碼基礎。css

   今天爲你們介紹一款目前國內較流行的混合開發平臺：AppCan。html

   先來看一下AppCan的簡介：程序員

   廣義上，AppCan是一套完整龐大的、雲端一體的移動PaaS平臺，擁有覆蓋移動應用全生命週期的產品體系，同時服務2D開發者（工具）、2B企業（移動化、數字化）、2G政府（雙創），是國內移動平臺技術的領跑者。面試

技術原理

AppCan是基於HTML5技術的Hybird跨平臺移動應用開發工具。ajax

開發者利用HTML5+CSS3+JavaScript技術，經過AppCan IDE集成開發系統、雲端打包器等，快速開發出Android、iOS、WP平臺上的移動應用。json

建立一個AppCan應用

一、應用簡介

該應用會一步一步給你演示怎麼開發一個AppCan應用。該應用包含最經常使用的插件，window、request、file等。另外教會你使用AppCan應用開發平臺，AppCan IDE等相關知識。api

開始使用API>>服務器

二、開發環境

在AppCan的官方網站上建立應用，並在IDE中開發完成後，到官網上進行打包。app

1）、註冊並登錄AppCan應用管理系統異步

（http://dashboard.appcan.cn/app ）。

2）、點擊建立應用。

3）、 輸入你的應用名稱，和應用描述，而後保存。

4）、點擊【開發】按鈕，進入天氣應用的詳細信息。

AppCan官網下載並安裝AppCan IDE 安裝下載

5）、打開AppCan IDE，並用剛纔註冊的用戶登錄

6）、登陸進入IDE

7）、點擊新建項目

8）、選擇同步AppCan 項目，點擊下一步。

9）、選擇天氣點擊完成。

10）、整個應用建立完成了。

三、應用開發

1) 、打開index.html頁面加入應用頭部，咱們的頭部都是統一的，因此加入一下代碼

 

刪除默認的背景圖片，你也可也在css中修改，index/css/main.css

2）、 打開index_content.html頁面這個是咱們的內容頁面。由於這是天氣列表內容頁，引入列表控件的js文件、css文件（appcan.listview.js、appcan.control.css）,在body中插入一個容器元素來顯示列表內容。

<div class="city-list content">

</div>

3）、用listview控件添加列表內容咱們添加六個城市，listview的icon咱們放置天氣情況，設置天氣列表,剛開始咱們咱們用默認圖片，等列表加載完成以後咱們 用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.html、detail_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.一、本地打包（僅供測試使用）

1）、點擊發行

或者右鍵點擊phone，而後點擊生成安裝包

2）、能夠修改應用名稱，上傳圖標，咱們使用默認的而後點擊下一步

3）、選擇要生成的平臺，啓動畫面點擊下一步

4）、選擇須要的插件而後點擊完成。等待打包若是打包完成就會自動打開應用目錄。

4.二、線上打包

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

 

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

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

4）、點擊應用打包，點擊圖標設置能夠修改圖標，點擊啓動頁面能夠修改啓動頁面，而後選擇插件，證書，最後點擊雲端打包。

5）、選擇平臺和版本號，點擊生成安裝包。

6）、等待打包完成，能夠下載生成的安裝包了，點擊下一步進入應用詳情頁面。

 

 

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

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程