模板标签 - NView模板 - wap2app教程

分类：wap2app

wap2app NView模板

在NView模板中，仅允许使用有限的标签（可以认为是HTML的子集），标签嵌套顺序及支持的属性，均有较为严格的限制。一个NView模板文件，固定结构如下：

<template>  
    <nviews cachemaxage="86400">  
        <!--nview控件-->  
    </nviews>  
</template>  
<script>  
    module.exports = {  
        //通过JS处理数据  
    };  
</script>

template/nviews/script这些是表示特定结构的标签，并不生成UI元素；另外还有一些标签，如font/button等，则会生成相应的UI元素。

大多数标签都是可以通过属性设置的元素的样式，比如位置、边框等。我们讲大多数模板标签均具备的属性，称为标签通用属性，主要包括id/onclick/style三个属性，详细说明参考这里。本文在介绍模板标签时，除非该标签有特殊限制，否则不会介绍通用属性。

a标签在原生view上绘制一个超链接（底部带下划线的文本），目前标签仅支持在容器下使用。

属性

位于流式布局容器richtext标签下时，支持id、style属性，不支持onclick属性；style中可以定义font样式，详细参考模板样式；不支持align、background、position样式。

richtext容器下的a标签，还支持href属性，但点击不会触发页面跳转。若需处理a标签的跳转，则需监听richtext容器的onclick事件，通过点击回调中获取点击目标对象的href属性，然后通过JS API实现窗口跳转。

子标签

标签下不支持嵌套子标签。

br标签用于插入一个简单的换行符，类似于HTML5中的br标签，目前仅可以在richtext容器下使用。

br标签不支持任何属性及子标签。

用于在原生View上绘制按钮，button标签内部仅支持放置文字，按钮文字上下、左右居中显示。 ### 属性处于canvas和richtext容器下时，支持属性不同。 **canvas** button位于绝对布局容器canvas标签下时，支持id、onclick、style通用属性；style中可以定义background、border、font、position样式，详细参考[模板样式](http://ask.dcloud.net.cn/article/12790)。 **richtext** 暂不支持、即将支持。 ### 子标签 button标签下不支持嵌套子标签。 ## 表示绝对布局容器，默认和父容器nview具备相同的宽高，子节点全部为绝对定位，关于绝对布局参考[模板布局](http://ask.dcloud.net.cn/article/12784). ### 属性 canvas支持id、onclick、style通用属性，style属性中支持background、position样式定义，详细参考[模板样式](http://ask.dcloud.net.cn/article/12790) ### 子标签 canvas标签下允许使用a、button、font、img、input、hr标签； ## 用于在原生View上绘制文本， ### 属性 font处于canvas和richtext容器下时，支持属性不同。 **canvas** font位于绝对布局容器canvas标签下时，支持id、onclick、style通用属性；style中可以定义align、background、font、position样式，详细参考[模板样式](http://ask.dcloud.net.cn/article/12790) **richtext** font位于流式布局容器richtext标签下时，支持id、style属性，不支持onclick属性；style中可以定义align、font样式，详细参考[模板样式](http://ask.dcloud.net.cn/article/12790)；不支持background、position样式。 ### 子标签 font标签下不支持嵌套子标签。 ##

hr标签在原生view上创建一条水平分割线，从而可以将展示内容分割成各个部分。 ### 属性 hr标签支持id、style通用属性，不支持onclick属性； hr标签的style属性可以定义align(水平对齐)、border、position中的宽高（width/height），width支持绝对像素值和百分比，百分比是根据父容器宽度自动计算。另外，hr处于canvas容器下时，还支持position中的left/top等坐标位置设置；处于richtext容器下是流式布局，不支持left/top等坐标设置。 ### 子标签 hr标签下不支持嵌套子标签。 ## imageslider是原生渲染的图片轮播组件，不允许嵌套子标签。imageslider支持id、style通用属性，style属性中可以设置background、position样式，具体参考[NView模板样式](http://ask.dcloud.net.cn/article/12790)；另外，imageslider还支持images、loop、fullscreen属性，详细说明如下。 **images** 配置轮播组件的图片信息，具体信息包括： * src: 图片地址，支持本地地址（相对地址、绝对路径、RelativeURL、本地路径URL）；也支持网络地址（http://或https://）； * align: 图片水平对齐方式，仅在图片显示的宽度与图片轮播控件宽度不一致时有效，可取值： "left" - 图片在轮播控件中水平居左对齐； "center" - 图片在轮播控件中水平居中对齐； "right" - 图片在轮播控件中水平居右对齐。默认值为"center"。 * height: 图片显示的高度，可取值：像素值，如"100px"；百分比，如"10%"，现对于图片轮播控件的高度；自动计算"auto"，如果指定图片宽度（width），则按图片实际大小等比缩放图片高度值，如果没有指定宽度（width值为"auto"）则自动缩放图片至可完整显示。 * width: 图片显示的宽度，可取值：像素值，如"100px"；百分比，如"10%"，相对于图片轮播控件的宽度；自动计算"auto"，如果指定图片高度（height），则按图片实际大小等比缩放图片宽度值，如果没有指定高度（height值为"auto"）则自动缩放图片至可完整显示。默认值为"auto"。 * verticalAlign: 图片垂直对齐方式，仅在图片显示的高度与图片轮播控件宽度不一致时有效，可取值： "top" - 图片在轮播控件中垂直居顶对齐； "middle" - 图片在轮播控件中垂直居中对齐； "bottom" - 图片在轮播控件中垂直居底对齐。默认值为"middle"。因为配置信息较为复杂，这里需要使用NView模板的[插值方式](http://ask.dcloud.net.cn/article/12759)赋值，如下是一个示例： ```html ``` 如上images属性值中，外层{}表示当前为JavaScript表达式，内部的[]表示当前为一个Array数组，数组中的每个元素是{}包裹的json对象； **loop** 设置轮播图片是否可循环播放，可取值： * true - 支持循环轮播； * false - 不支持循环轮播默认值为false。 **fullscreen** 用户点击轮播图片时，是否全屏显示图片，可取值： * true - 全屏显示，用户点击轮播图片时全屏显示； * false - 不可全屏显示，用户点击轮播图片时无响应。默认值为true。 ### 子标签 imageslider不支持嵌套子标签。 ## 用于在原生View上绘制图片。 ### 属性除了通用标签属性，img还支持src属性，用于设置图片资源路径。 img处于canvas和richtext容器下时，支持的通用属性不同。 **canvas** img位于绝对布局容器canvas标签下时，支持id、onclick、style通用属性；style中可以定义position样式，详细参考[模板样式](http://ask.dcloud.net.cn/article/12790) **richtext** img位于流式布局容器richtext标签下时，支持id、style属性，不支持onclick属性；style中仅支持position样式中的width、height属性，不支持left、top等坐标样式，详细参考[模板样式](http://ask.dcloud.net.cn/article/12790)。 ### 子标签 img标签下不支持嵌套子标签。 ## 标签可以在原生View上绘制输入框，输入文本内容在指定区域水平向左、垂直居中显示。目前input标签仅支持在canvas容器下使用，richtext容器下无法使用。 ### 属性 input标签支持id、style通用属性，style属性中支持设置font中的font-size样式、border边框样式；input标签不支持onclick属性；另外，input标签还支持type、placeholder、oncomplete属性。 **type** type属性设置输入框类型，可取值： * email - 邮箱地址输入框； * number - 数字输入框； * search - 搜索文本输入框； * tel - 电话号码输入框； * text - 普通文本输入框； * url - URL地址输入框。 **placeholder** 设置输入框的提示文本，当用户未输入内容时显示在编辑框中（灰色文字）。 **oncomplete** 弹出软键盘完成输入后，点击软键盘上的“完成”、“前往”按钮时触发，如下为示例： ```html module.exports = { methods: { //inpu输入完成的回调 handleInput:function(){ plus.nativeUI.toast("input complete"); } } }; ``` ### 子标签 input标签下不支持嵌套子标签。 ## item表示list组件下的列表项，参考[NView模板绘制原生列表教程](http://ask.dcloud.net.cn/article/12803) ## list是NView模板封装的列表组件，参考[NView模板绘制原生列表教程](http://ask.dcloud.net.cn/article/12803) ## nviews位于template节点下，一个NView模板文件有且仅有一个nviews节点； ### 属性 nviews仅支持cachemaxage一个属性。 **cachemaxage** subNView缓存时间，单位为秒，默认为1天（86400秒）；wap2app会将subNView的计算结果缓存起来，在缓存期内再次打开同一页面时，将直接使用缓存数据渲染subNView，而不会再次发起网络请求。 ### 子节点 nviews节点下只允许嵌套使用nview一种标签，数量不限。 ## nview表示一个布局容器，类似于HTML5中的div标签，但不支持nview标签的互相嵌套。 ### 属性 nview支持id、onclick、style通用属性，style属性中支持background、position样式，详细参考[模板样式](http://ask.dcloud.net.cn/article/12790)。另外，nview标签还支持intercept、autoclose属性，详细定义参考下文描述。 **intercept** nview事件拦截配置，详细参考[事件监听 - NView模板](http://ask.dcloud.net.cn/docs/#http://ask.dcloud.net.cn/article/12760)文章中的事件拦截章节。 **autoclose** nview是否自动关闭，默认为false，即不关闭；开发者可以通过配置autoclose="loaded"实现下层webview加载完毕后，自动关闭上层的nview控件。 **Tips：**subNView作为webview的子控件，在webview上层使用原生技术，提前渲染，在窗口动画期间就完成主要内容的渲染工作；若下层webview加载的HTML页面完全渲染结束，则subNView的主要工作已完成，是否继续存在则可以根据具体场景而定。若subNView上部分元素需要响应用户的点击操作，则通常有三种方法： * 配置相应元素的onclick属性，编写对应的触发函数 * 设置nview的intercept属性为false，将触屏事件透传给下层的webview，由dom元素响应事件，此种方案可能出现半屏遮罩的问题（webview的全屏div遮罩，但无法遮住上层的subNView控件）。 * 配置nview的autoclose属性，在webview加载完毕后自动关闭subNView，则用户触屏时就直接触发dom元素的响应事件 ### 子节点节点下允许使用、、、4个标签。 ## 表示流式布局容器，默认和父容器nview具备相同的宽高，子节点全部为流式布局。关于流式布局参考[模板布局](http://ask.dcloud.net.cn/article/12784). ### 属性 richtext支持id、onclick、style通用属性，style属性中支持background、position样式定义，详细参考[模板样式](http://ask.dcloud.net.cn/article/12790)。 //TODO richtext点击事件描述 ### 子标签 richtext标签下允许使用font、img、a、br、hr标签； ## script节点下可以进行数据计算，一个模板文件仅允许出现一个script节点，默认代码如下： ```html module.exports = { data: { //默认数据 }, init: function(url) { //动态初始化数据 }, methods: { //方法 } }; ``` script标签不支持设置任何属性，也不允许嵌套子标签。 ## 模板标签根节点，一个NView模板文件有且仅有一个template节点，不支持设置属性； template节点下仅允许嵌套nviews标签，且仅允许嵌套一个nviews标签。

2 赞关注分享