AppCan前端速度優化方案

weixin_33912246發表於2016-10-11
APPPCA前端優化

AppCan前端速度優化方案

一. 開啟硬體加速

開啟硬體加速會極大提升頁面切換速度

  1. 開啟方法是在config.xml檔案中配置

     <hardware>true</hardware>

  2. 某些場景下硬體加速會與業務邏輯衝突，解決方案為：全域性開啟硬體加速保證速度，在特定場景關閉硬體加速，保證業務邏輯正常；程式碼如下，詳見Demo

     var extras = {
     extraInfo: {//網頁配置
         hardware: 0//是否開啟硬體加速，0：否，1：開啟（僅Android）
     }
 };
 //須直接使用uexWindow.open方法，文件地址：http://newdocx.appcan.cn/newdocx/docx?type=1390_1249#open
 uexWindow.open('singlePage_normal', '0', 'singlePage_normal.html', 10, '', '', 0, 500, JSON.stringify(extras));

二. 單頁面(webview)改造

單webview改造會明顯提升執行速度，且只有單webview時，才能實現開啟新頁面時input自動彈出鍵盤的功能

1.1、 依賴

須引入

  • ui-base.css
  • appcan.js
  • appcan.control.js
    **

需要頁面彈動時引入，可實現下拉重新整理和下載載入功能

  • appcan.scrollbox.js

需要tab選項卡時引入，常用於主介面，可免去預載入處理

  • template.import.js
  • appcan.tab.js

1.2、普通單頁面

模板程式碼如下，根據註釋，將對應內容填入對應區域即可：

詳細見Demo中的singlePage_normal.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">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="page_0" class="bc-bg" data-control="PAGE">

    <!--header開始-->
    <div id="header" class="uh bc-head ub ubb bc-border bc-text-head" data-control="HEADER">
        <!--左邊-->
        <div class="nav-btn" id="nav-left">
            <!--返回按鈕圖示-->
            <div class="ub ub-img tagimg tagwh"></div>
        </div>
        <!--中間-->
        <h1 id="title" class="ut ub-f1 ulev-3 ut-s tx-c">普通單頁面</h1>
        <!--右邊-->
        <div class="nav-btn" id="nav-right">右邊</div>
    </div>
    <!--header結束-->

    <!--content開始-->
    <div id="content" data-control="CONTENT">
        <div id="scrollBox" class="" data-control="ScrollBOX" data-bounce="1">
            <div data-control="BounceBox">

                <!--下拉重新整理控制元件-->
                <div class="box_bounce ub ub-ver ub-pc">
                    <div class="ub-f1"></div>
                    <!--正在下拉-->
                    <div id="draging" class="bounce_status"></div>
                    <!--觸發下拉重新整理的界限-->
                    <div id="dragToReload" class="bounce_status"></div>
                    <!--下拉重新整理回撥觸發後-->
                    <div id="releaseToReload" class="bounce_status"></div>
                </div>

                <!--內容區域，在這裡放介面的HTML程式碼-->

                <!--內容區域結束-->

            </div>
        </div>
    </div>
    <!--content結束-->

</div>
<script src="js/appcan.js"></script>
<script src="js/appcan.control.js"></script>
<script src="js/appcan.scrollbox.js"></script>
</body>
<script>

    /**
     * 下拉重新整理和上拉載入
     * Scroll BOX function DEMO START
     */
    (function ($) {
        //初始化下拉重新整理
        initPullDownRefresh(
                //下拉重新整理的回撥
                function () {
                    console.log("下拉重新整理");
                    endPullDownRefreshLately(500);
                }
                //上拉到底部的回撥
                , function () {
                    console.log("上拉載入");
                }
                //是否顯示提示語
                , true
        );
    })($);

    //外掛載入完成的回撥
    appcan.ready(function () {

        console.log("appcan.ready");

        //手動呼叫下拉重新整理
        pullDownRefresh();

    });

    //導航欄點選事件
    appcan.button(".nav-btn", "btn-act", function () {
        //左側
        this.id == "nav-left" && appcan.window.close(-1);
        //右側
        //this.id == "nav-right" &&;
    });

</script>
</html>

1.3、帶有tab欄的單頁面

模板程式碼如下，根據註釋，將對應內容填入對應區域即可：

詳細見Demo中的singlePage_tab.html檔案和singlePage_tab_no_header.html檔案

需要注意的地方：

  • 每個tab.html的css和js都要在主頁面被引入
  • 如果不需要導航欄header，先刪除header的部分，還需要將data-control="CONTENT"修改為data-control="CONTENT_NO_HEADER"，原理很簡單，即為去掉CONTENT的padding-top = 2.75em屬性
<!DOCTYPE html>
<html class="um landscape min-width-240px min-width-320px min-width-480px min-width-768px min-width-1024px">
<head>
    <title>帶有tab欄的單頁面</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">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/main.css">
</head>
<body>
<div id="page_0" class="bc-bg" tabindex="0" data-control="PAGE">

    <!--header開始-->
    <div id="header" class="uh bc-head ub ubb bc-border bc-text-head" data-control="HEADER">
        <!--左邊-->
        <div class="nav-btn" id="nav-left">
            <!--返回按鈕圖示-->
            <div class="ub ub-img tagimg tagwh"></div>
        </div>
        <!--中間-->
        <h1 id="title" class="ut ub-f1 ulev-3 ut-s tx-c">帶有tab欄的單頁面</h1>
        <!--右邊-->
        <div class="nav-btn" id="nav-right">右邊</div>
    </div>
    <!--header結束-->

    <!--header結束--><!--content開始-->
    <div id="content" class="" data-control="CONTENT">
        <div class="" data-control="ScrollBOX" data-bounce="1">
            <div data-control="BounceBox">
                <div class="box_bounce ub ub-ver ub-pc">
                    <div class="ub-f1"></div>
                    <div class="bounce_status">
                        下拉更新......
                    </div>
                    <div class="bounce_status">
                        鬆手更新......
                    </div>
                    <div class="bounce_status">
                        更新中......
                    </div>
                </div>

                <!--內容區域，在這裡放介面的HTML程式碼-->
                <div class="tab_pane active" data-import="tab1.html">

                </div>
                <div class="tab_pane" data-import="tab2.html">

                </div>
                <div class="tab_pane" data-import="tab3.html">

                </div>
                <!--內容區域結束-->

            </div>
        </div>

    </div>
    <!--content結束-->
    <div id="tabview" class="uf sc-bg ubt sc-border-tab" data-control="FOOTER"></div>

</div>
<script src="js/appcan.js"></script>
<script src="js/appcan.control.js"></script>
<script src="js/appcan.listview.js"></script>
<script src="js/appcan.scrollbox.js"></script>
<script src="js/template.import.js"></script>
<script src="js/appcan.tab.js"></script>
</body>
<script>

    //外掛載入完成的回撥
    appcan.ready(function () {

    });

    //導航欄點選事件
    appcan.button(".nav-btn", "btn-act", function () {
        //左側
        this.id == "nav-left" && appcan.window.close(-1);
        //右側
        //this.id == "nav-right" &&;
    });

    //按鈕點選事件
    appcan.button(".btn", "btn-act", function () {
    });

    /**
     * 下拉重新整理和上拉載入
     * Scroll BOX function DEMO START
     */
    (function ($) {
        //初始化下拉重新整理
        initPullDownRefresh(
                //下拉重新整理的回撥
                function () {
                    console.log("下拉重新整理");
                    endPullDownRefreshLately(500);
                }
                //上拉到底部的回撥
                , function () {
                    console.log("上拉載入");
                    //新增資料
                    addData();
                }
                //是否顯示提示語
                , true
        );
    })($);

    /**
     * 底部tab欄點選事件
     * Scroll BOX function DEMO END
     */
    var tabview = appcan.tab({
        selector: "#tabview",
        hasIcon: true,
        hasAnim: true,//控制是否有下方滑塊和動畫
        hasLabel: false,
        hasBadge: false,
        data: [{
            label: "QQ",
            "icon": "fa-qq"
        }, {
            label: "微軟",
            "icon": "fa-windows"
        }, {
            label: "微信",
            "icon": "fa-weixin"
        }]
    });
    tabview.on("click", function (obj, index) {
        $(".tab_pane").removeClass("active");
        $($(".tab_pane")[index]).addClass("active");
    });

</script>
</html>

2、API概覽

2.1 方法:

初始化下拉重新整理和上拉載入

initPullDownRefresh(pullDownRefreshCallback, pullUpLoadingCallback, isShowTips)

說明:

初始化下拉重新整理和上拉載入

引數:

| 引數名稱 | 引數型別 | 說明 |
| ----- | ----- | ----- | ----- |
| pullDownRefreshCallback| function| 下拉重新整理的回撥 |
| pullUpLoadingCallback| function| 上拉到底部的回撥 |
| isShowTips| boolean| 是否顯示提示語，true顯示；false不顯示，只有彈動效果 |

示例:

    /**
     * 下拉重新整理和上拉載入
     * Scroll BOX function DEMO START
     */
    (function ($) {
        //初始化下拉重新整理
        initPullDownRefresh(
                //下拉重新整理的回撥
                function () {
                    console.log("下拉重新整理");
                }
                //上拉到底部的回撥
                , function () {
                    console.log("上拉載入");
                }
                //是否顯示提示語
                , true
        );
    })($);

注意事項

  1. 呼叫該方法初始化下拉重新整理和上拉載入時須放在(function ($) {})($)之間，否則無效果

  2. 如不想呼叫下拉重新整理，不呼叫該方法或者刪除appcan.scrollbox.js都可以；

  3. 提示語即是下拉重新整理的樣式，為了統一風格，將其寫在appcan.scrollbox.js中已便複用，如不滿意，可以在appcan.scrollbox.js中自行修改

/**
 * 初始化下拉重新整理
 *
 * @param pullDownRefreshCallback 下拉重新整理的回撥
 * @param pullUpLoadingCallback 上拉到底部的回撥
 * @param isShowTips 是否顯示提示語
 */
function initPullDownRefresh(pullDownRefreshCallback, pullUpLoadingCallback, isShowTips) {
    var $el = $("body");
    var isShowTipsCurrent = true;
    if (isShowTips != null) {
        isShowTipsCurrent = isShowTips;
    }
    scrollViewInstance = $.scrollbox($el);
    scrollViewInstance.on("releaseToReload", pullDownRefreshCallback
    ).on("onReloading", function (a) {//if onreloading status, drag will trigger this event
    }).on("dragToReload", function () {//到達下拉重新整理的邊界 drag over 30% of bounce height,will trigger this event
    }).on("draging", function (percent) {//正在下拉on draging, this event will be triggered.
    }).on("scrollbottom", pullUpLoadingCallback);

    if (isShowTipsCurrent == false) {
        return;
    }

    //這裡可以定義下拉的樣式
    $('#draging').html('下拉重新整理');
    $('#dragToReload').html('釋放更新');
    $('#releaseToReload').html('載入中');
}

主動呼叫下拉重新整理

pullDownRefresh()

說明:

主動呼叫下拉重新整理

引數:

無

示例:

    //外掛載入完成的回撥
    appcan.ready(function () {
        console.log("appcan.ready");
        //手動呼叫下拉重新整理
        pullDownRefresh();
    });

結束下拉重新整理

endPullDownRefresh()

說明:

結束下拉重新整理

引數:

無

示例:

    /**
     * 下拉重新整理和上拉載入
     * Scroll BOX function DEMO START
     */
    (function ($) {
        //初始化下拉重新整理
        initPullDownRefresh(
                //下拉重新整理的回撥
                function () {
                    console.log("下拉重新整理");
                    endPullDownRefresh();
                }
                //上拉到底部的回撥
                , function () {
                    console.log("上拉載入");
                }
                //是否顯示提示語
                , true
        );
    })($);

三.開啟新頁面時input自動獲得焦點並彈出鍵盤

在appcan.ready的回撥中獲得input標籤的焦點，並呼叫uexWindow.showSoftKeyboard()方法即可

呼叫uexWindow.hideSoftKeyboard()隱藏鍵盤

    //外掛載入完成的回撥
    appcan.ready(function () {

        console.log("appcan.ready");

        //input輸入框獲得焦點
        $('#input1').focus();
        //彈出鍵盤,延時彈出體驗更好
        setTimeout(function () {
            uexWindow.showSoftKeyboard();
        }, 500);

    });

詳細見Demo中的singlePage_input_focus.html檔案

注意事項

開啟頁面開啟鍵盤、關閉頁面隱藏鍵盤時推薦增減延時；
經實際測試發現，低端機器開啟頁面同時開啟鍵盤或者關閉頁面同時隱藏鍵盤會出現卡頓、閃屏的現象，增加延時後消失，具體效果見Demo。

相關文章