如何更新通过nativeObj.View创建的view控件教程

需求说明

此教程将针对使用new plus.nativeObj.View() 创建的view对象如何更新作出详细说明；

创建示例

var currWV = plus.webview.currentWebview(),  
    leftPos =  Math.ceil((window.innerWidth - 60) / 2);  

var drawNativeIcon = new plus.nativeObj.View('tabIcon', {  
    bottom: '10px',  
    left: leftPos + 5 + 'px',  
    width: '50px',  
    height: '50px',  
    position:'dock'   //此种停靠方式表明该控件应浮在窗口最上层，以免被其他窗口遮住  
}, [{  
    tag: 'rect',  
    id: 'iconBg',  
    position: {  
        top: '0px',  
        left: '0px',  
        width: '50px',  
        height: '100%'  
    },  
    rectStyles: {  
        color: '#d74b28',  
        size: '50px',  
        radius:'50%'  
    }  
},{  
    tag: 'font',  
    id: 'icon',  
    text: '\ue600',  //此为字体图标Unicode码'\e600'转换为'\ue600'  
    position: {  
        top: '0px',  
        left: '0px',  
        width: '50px',  
        height: '100%'  
    },  
    textStyles: {  
        fontSrc: '_www/fonts/iconfont.ttf',  
        align:'center',  
        color: '#fff',  
        size: '30px'  
    }  
}]);  

currWV.append(drawNativeIcon);

实现更新方法

使用nativeObj提供的方法更新

通过 nativeObj 提供的 draw/drawBitmap/drawRect/drawText 方法对指定id重新绘制

说明：在当前View控件之上绘制指定的内容，可一次指定绘制多个元素，绘制元素可以是图片/矩形区域/文本， 即将多次调用drawBitmap/drawRect/drawText方法合并调用一次draw方法来实现， 推荐使用draw方法来替换多次调用drawBitmap/drawRect/drawText。

// 当前view控件需要更新的tags  
drawNativeIcon.draw(tags);  

// 更新指定id  
drawNativeIcon.drawRect(styles, position, id) //绘制元素为矩形区域  
drawNativeIcon.drawBitmap(src, sprite, position, id)  //绘制元素为图片  
drawNativeIcon.drawText(text, position, styles, id)  //绘制元素为文本，包括字体图标  

// 比如更新drawNativeIcon 控件的纯色背景颜色  
drawNativeIcon.drawRect({  
                    color: '#0ff',  
                    radius: '50%'  
                }, {}, 'iconBg');  

// 比如更新drawNativeIcon 控件的字体图标颜色  
drawNativeIcon.drawText('\ue600', {}, {  
                    color: '#ccc',  
                    fontSrc: '_www/fonts/iconfont.ttf',  
                    size: '30px'  
                }, 'icon');  

// 使用draw方法  
drawNativeIcon.draw([  
    {  
        id: 'iconBg',  
        tag:'rect',  
        rectStyles: {  
            color: '#ff0',    
            size: '50px',  
            radius: '50%'  
        }  
    }, {  
        id: 'icon',  
        tag:'font',  
        text: '\ue600', //此为字体图标Unicode码'\e600'转换为'\ue600'  
        textStyles: {  
            fontSrc: '_www/fonts/iconfont.ttf',  
            align: 'center',  
            color: '#000',  
            size: '30px'  
        }  
    }  
])  

说明：
1.position 的默认值为 {top:'0px',left:'0px',width:'100%',height:'100%'},如果与默认值相同，可以传空对象。
2.需要更新的tag 如果与默认值不相同，需要重新传值。

使用webview提供的方法更新

此方法使用 webview 提供的updateSubNViews()更新控件,是集成了nativeObj方法给webview提供一个直接操作原生view控件的方法。通过要更新view控件中的id属性值匹配子View控件更新绘制内容，如果没有查找到对应id的子View控件则忽略。 此操作仅更新子View控件上绘制的内容，不会添加或删除原生子View控件对象。

var currWV = plus.webview.currentWebview();  

//比如更新控件颜色  
currWV.updateSubNViews([{  
    id: 'tabIcon',  
    tags: [{  
        id: 'iconBg',  
        rectStyles: {  
            color: '#ff0',    
            size: '50px',  
            radius: '50%'  
        }  
    }, {  
        id: 'icon',  
        text: '\ue600', //此为字体图标Unicode码'\e600'转换为'\ue600'  
        textStyles: {  
            fontSrc: '_www/fonts/iconfont.ttf',  
            align: 'center',  
            color: '#000',  
            size: '30px'  
        }  
    }]  
}])  

说明：
1.position 的默认值为 {top:'0px',left:'0px',width:'100%',height:'100%'},如果与默认值相同，可以不传。
2.需要更新的tag 如果与默认值不相同，需要重新传值。

总结：
1.以上提供两种方式更新此类view控件，实现方法基本类似，开发者可根据使用场景选择恰当的方式。
2.此类方法创建的view控件与通过subNViews节点配置方法实现的效果一样，区别在于subNViews配置需要在创建webview时就引入。但是这样配置的信息就可以在页面中通过以下方式获取到view控件的相应信息。对于处理多个view控件的自动更新方便很多，比如首页底部选项卡

var nviews = currWV.getStyle().subNViews(); //返回配置的view控件的所有信息

3.关于如何更新subNViews节点配置的view控件。请下载参考教程 中上传的附件demo。