DCloud_UNI_CHB
DCloud_UNI_CHB
  • 发布:2017-08-25 22:29
  • 更新:2019-08-22 09:26
  • 阅读:14267

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

分类:wap2app

在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 关注 分享
雪之梦技术驿站 Trust

要回复文章请先登录注册

1612565136@qq.com

1612565136@qq.com

这个排版太敷衍了吧
2019-08-22 09:26
雪之梦技术驿站

雪之梦技术驿站

这都可以,服
2017-08-26 18:25