模板
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 != '\n\n'}}> <text>{{item.text}}</text> </block>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
