AppCan前端速度优化方案

AppCan前端速度优化方案

---

一. 开启硬件加速

开启硬件加速会极大提升页面切换速度

1. 开启方法是在config.xml文件中配置

    true
   

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文件

    
    
    
    
    
    
    
    
    
    




    
    

        
        

            
            

        
        
        
普通单页面
        
        
右边
    
    

    
    

        

            


                
                

                    

                    
                    

                    
                    

                    
                    

                

                

                

            
        
    
    

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属性

    
    
    
    
    
    
    
    
    
    
    




    
    

        
        

            
            

        
        
        
带有tab栏的单页面
        
        
右边
    
    

    
    

        

            

                

                    

                    

                        下拉更新......
                    
                    

                        松手更新......
                    
                    

                        更新中......
                    
                

                
                


                
                


                
                


                
                

            
        

    
    
    

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。