微信小程序组件wxParse中的模版template使用方法

模板

WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用。

介绍及使用方法：

模版(template)你不陌生吧? 
angularjs中的模版文件 - ng-template 
RN中的模版文件使用 
甚至是移动开发中VM的概念也应该会联想到模版概念

看看微信的模版官方用法

微信小程序官方文档－模版

 着重提一下Mustache的判断语法，不陌生吧 
is 属性可以使用 Mustache 语法，来动态决定具体需要渲染哪个模板： 
不过在微信小程序开发中，能使用的很少，且有自己的规则，大概的条件语句都差不多，可以自己尝试一下

<template name="odd">
<view> odd </view></template><template name="even">
<view> even </view></template><block wx:for="{{[1, 2, 3, 4, 5]}}">
<template is="{{item % 2 == 0 ? 'even' : 'odd'}}"/></block>

模版的引入

详细讲解官方文档 微信小程序官方文档－模版引入42 
着重强调 import 的作用域 
import 有作用域的概念，即只会 import 目标文件中定义的 template，而不会 import 目标文件 import 的 template。 
如：C import B，B import A，在C中可以使用B定义的template，在B中可以使用A定义的template，但是C不能使用A定义的template

<!-- A.wxml --><template name="A"><text> A template </text></template>
<!-- B.wxml --><import src="a.wxml"/><template name="B"><text> B template </text></template>
<!-- C.wxml --><import src="b.wxml"/><template is="A"/>
<!-- Error! Can not use tempalte when not import A. --><template is="B"/>

循环使用测试

我们拿上面的例子来看多做几个， >小技巧:一个模版文件可以写多个模版，只要名字不同即可

在写wxParse的时候，我希望能够通过一个模版来自我循环调用实现，但是因为作用域的问题，不能够进行调用，所以我希望能够呈现三角调用，做下面的例子看看

<template name="A">   <text> A template </text></template><template name="B">   <text> B template </text></template><template name="C">   <text> C template </text></template>

可以循环调用的话输出结果

A templateB templateC templateA templateB templateC template.../循环

实际场景下输出

A templateB templateC template

结论就是，其无法进行循环调用，不仅是传值问题，文档中也有提到。

困难1:无法循环使用模版下，如何处理多级HTML嵌套解析 
回答： 既然不能够实现完美的代码较少的方式，那我们就采用一种笨办法，手动循环出N个模版，因为在时机场景中，尤其是在文章的html中不会出现超过10级的嵌套，那么这样我们可以手动写10个模版，进行循环调用。

实际代码

我们使用下面的代码进行不断的重复，只需要修改template对应指向下一个模版，并不断累加到10个以上，基本上能够解决大部分的html解析问题。 
** 所以，如果你的HTML嵌套级别较高的话，只要按照这个步骤再进行复制模版就可以了。

<template name="wxParse0">
<!--判断是否是标签节点-->
<block wx:if="{{item.node == 'element'}}">
<block wx:if="{{item.tag == 'button'}}">
<button type="default" size="mini" >
<block wx:for="{{item.child}}" wx:for-item="item">
<template is="wxParse1" data="{{item}}"/>
</block>
</button>
</block>
<!--li类型-->
<block wx:elif="{{item.tag == 'li'}}">
<view class="wxParse-li">
<view class="wxParse-li-inner">
<view class="wxParse-li-text">
<text class="wxParse-li-circle"></text>
</view>
<view class="wxParse-li-text">
<block wx:for="{{item.child}}" wx:for-item="item">
<template is="wxParse1" data="{{item}}"/>
</block>
</view>
</view>
</view>
</block>
<!--video类型-->
<block wx:elif="{{item.tag == 'video'}}">
<!--增加video标签支持，并循环添加-->
<view  class="wxParse-{{item.tag}}">
<video class="wxParse-{{item.tag}}-video" src="{{item.attr.src}}"></video>
</view>
</block>
<!--img类型-->
<block wx:elif="{{item.tag == 'img'}}">
<view class="wxParse-{{item.tag}}">
<image src="{{item.attr.src}}" mode="aspectFit"></image>
</view>
</block>
<block wx:else>
<view  class="wxParse-{{item.tag}}">
<block  wx:for="{{item.child}}" wx:for-item="item">
<template is="wxParse1" data="{{item}}"/>
</block>
</view>
</block>
</block>
<!--判断是否是文本节点-->
<block wx:elif="{{item.node == 'text'}}">
<!--如果是，直接进行-->
<block wx:if="{{item.text != '' || item.text != ' ' || item.text != '  ' || item.text != 'nn'}}">
<text>{{item.text}}</text>
</block>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!