AppCan前端速度优化方案

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。

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容