字体图标绘制原生view控件

概述

这篇教程将向大家介绍新发布的 HTML 5+ SDK 新增的webview窗口如何使用 字体图标 绘制原生view控件的功能（绘制view控件的内容不仅限于字体图标，详情请参考plus.nativeObj.view）

早在之前 sdk 就已经支持添加原生标题栏 navigationbar,现在调整了navigationbar为 titleNView ,与 subNViews 统一理念，并补充 buttons 配置，方便配置右侧按钮.

这里的 titleNView 与 subNViews 都属于原生view 控件，titleNView 指的是原生标题栏view控件，subNViews 指的是该页面所有的原生view 控件，包括titleNView.

// 获取该webview 所有原生控件   
plus.webview.currentWebview().getSubNViews()  // 返回数组

实现方法

下面就以subNViews为例来说明一下字体图标的绘制原生view控件的方法。

1.找到相应字体图标编码，以下以mui字体图标作为示例介绍。

作为开发者，同学们都有自己的方法去拿到图标编码，这里简单介绍几种方法：

a：前往mui官网文档 —> ui组件 icon(图标) —> 找到图标单击复制类名 —> 到mui.css 查找该类名，获取相应before伪元素中content 属性中的编码字符串，比如：'\e502'.

b：打开浏览器调试器，自行查找元素的相应伪元素before，获取style样式中content属性值。

这里需要注意的是，拿到编码字符串，需要把它变成原生层能解析的ASCII编码，也就是在e前面加u字符，比如：’\e502‘ —> '\ue502'.

2.根据以下方法配置图标路径，大小，位置，颜色等信息。


var styles = {  
    subNViews: [  
        {  
            id: 'view',  
            styles: {       // 该view控件的位置 大小等信息  
                bottom:'0',  
                left:'0',  
                width:'100%',  
                height:'50px',  
                backgroundColor:'#fff'  
            },  
            tags: [  
                {                     // 图标的大小 位置 颜色等信息  
                    tag:'font',  
                    id:'viewTag',  
                    text:'\ue500',   // 由'\e500'转换为原生层识别的ASCII编码  
                    position: {      // 相对view 控件的位置 大小等信息  
                        top:'0',  
                        left:'0',  
                        width:'100%',  
                        height:'100%'  
                    },  
                    textStyles: {  
                        fontSrc:'_www/fonts/mui.ttf',   // _www代表根目录  
                        align:'center',  
                        size:'24px'  
                    }  
                }  
            ]  
        }  
    ]  
}  

plus.webview.create(url,id,styles,aniShow,duration);

说明：