脚本之家

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

上一篇
微信小程序 仿jQuery插件 DOM操作插件
下一篇
微信小程序五星级评分效果

黑猫白猫抓住老鼠就是好猫,本文主要探讨一下在开发微信小程序富文本解析wxParse Alpha0.1-支持HTML及markdown解析过程中想要循环使用template的思路,却无法实现,后来使用笨办法的历程 ,希望这个过程在你的微信小程序开发中给你带来一点小灵感!

与本文相关

可能是第一个微信小程序富文本解析组件
github地址:https://github.com/icindy/wxParse

搭配下面代码后再看文章更佳!!!wxParse的模版文件

https://github.com/icindy/wxParse/blob/master/wxParse/wxParse.wxml

<!--**    
* author: Di (微信小程序开发工程师)    
* organization: WeAppDev(微信小程序开发论坛)(http://weappdev.com)    
*               垂直微信小程序开发交流社区    
*    
* github地址: https://github.com/icindy/wxParse    
*    
* for: 微信小程序富文本解析    
* detail : http://weappdev.com/t/wxParse-alpha0-1-html-markdown/184    
*/-->    
<!--基础元素-->    
<template name="wxParseVideo">    
<!--增加video标签支持,并循环添加-->    
<view class="{{item.classStr}} wxParse-{{item.tag}}" style="{{item.styleStr}}">    
<video class="{{item.classStr}} wxParse-{{item.tag}}-video" src="{{item.attr.src}}"></video>    
</view>    
</template>    
<template name="wxParseImg">    
<image class="{{item.classStr}} wxParse-{{item.tag}}" data-from="{{item.from}}" data-src="{{item.attr.src}}" data-idx="{{item.imgIndex}}" src="{{item.attr.src}}" mode="aspectFit" bindload="wxParseImgLoad" bindtap="wxParseImgTap" mode="widthFix" style="width:{{item.width}}px;"    
/>    
</template>    
<template name="WxEmojiView">    
<view class="WxEmojiView wxParse-inline" style="{{item.styleStr}}">    
<block wx:for="{{item.textArray}}" wx:key="">    
<block class="{{item.text == '\n' ? 'wxParse-hide':''}}" wx:if="{{item.node == 'text'}}">{{item.text}}</block>    
<block wx:elif="{{item.node == 'element'}}">    
<image class="wxEmoji" src="{{item.baseSrc}}{{item.text}}" />    
</block>    
</block>    
</view>    
</template>    
<template name="wxParseBr">    
<text>n</text>    
</template>    
<!--入口模版-->    
<template name="wxParse">    
<block wx:for="{{wxParseData}}" wx:key="">    
<template is="wxParse0" data="{{item}}" />    
</block>    
</template>    
<!--循环模版-->    
<template name="wxParse0">    
<!--<template is="wxParse1" data="{{item}}" />-->    
<!--判断是否是标签节点-->    
<block wx:if="{{item.node == 'element'}}">    
<block wx:if="{{item.tag == 'button'}}">    
<button type="default" size="mini">    
<block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="">    
<template is="wxParse1" data="{{item}}" />    
</block>    
</button>    
</block>    
<!--li类型-->    
<block wx:elif="{{item.tag == 'li'}}">    
<view class="{{item.classStr}} wxParse-li" style="{{item.styleStr}}">    
<view class="{{item.classStr}} wxParse-li-inner">    
<view class="{{item.classStr}} wxParse-li-text">    
<view class="{{item.classStr}} wxParse-li-circle"></view>    
</view>    
<view class="{{item.classStr}} wxParse-li-text">    
<block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="">    
<template is="wxParse1" data="{{item}}" />    
</block>    
</view>    
</view>    
</view>    
</block>    
<!--video类型-->    
<block wx:elif="{{item.tag == 'video'}}">    
<template is="wxParseVideo" data="{{item}}" />    
</block>    
<!--img类型-->    
<block wx:elif="{{item.tag == 'img'}}">    
<template is="wxParseImg" data="{{item}}" />    
</block>    
<!--a类型-->    
<block wx:elif="{{item.tag == 'a'}}">    
<view bindtap="wxParseTagATap" class="wxParse-inline {{item.classStr}} wxParse-{{item.tag}}" data-src="{{item.attr.href}}" style="{{item.styleStr}}">    
<block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="">    
<template is="wxParse1" data="{{item}}" />    
</block>    
</view>    
</block>    
<block wx:elif="{{item.tag == 'table'}}">    
<view class="{{item.classStr}} wxParse-{{item.tag}}" style="{{item.styleStr}}">    
<block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="">    
<template is="wxParse1" data="{{item}}" />    
</block>    
</view>    
</block>    
<block wx:elif="{{item.tag == 'br'}}">    
<template is="wxParseBr"></template>    
</block>    
<!--其他块级标签-->    
<block wx:elif="{{item.tagType == 'block'}}">    
<view class="{{item.classStr}} wxParse-{{item.tag}}" style="{{item.styleStr}}">    
<block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="">    
<template is="wxParse1" data="{{item}}" />    
</block>    
</view>    
</block>    
<!--内联标签-->    
<view wx:else class="{{item.classStr}} wxParse-{{item.tag}} wxParse-{{item.tagType}}" style="{{item.styleStr}}">    
<block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="">    
<template is="wxParse1" data="{{item}}" />    
</block>    
</view>    
</block>    
<!--判断是否是文本节点-->    
<block wx:elif="{{item.node == 'text'}}">    
<!--如果是,直接进行-->    
<template is="WxEmojiView" data="{{item}}" />    
</block>    
</template>    
<!--循环模版-->    
<template name="wxParse1">    
<!--<template is="wxParse2" data="{{item}}" />-->    
<!--判断是否是标签节点-->    
<block wx:if="{{item.node == 'element'}}">    
<block wx:if="{{item.tag == 'button'}}">    
<button type="default" size="mini">    
<block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="">    
<template is="wxParse2" data="{{item}}" />    
</block>    
</button>    
</block>    
<!--li类型-->    
<block wx:elif="{{item.tag == 'li'}}">    
<view class="{{item.classStr}} wxParse-li" style="{{item.styleStr}}">    
<view class="{{item.classStr}} wxParse-li-inner">    
<view class="{{item.classStr}} wxParse-li-text">    
<view class="{{item.classStr}} wxParse-li-circle"></view>    
</view>    
<view class="{{item.classStr}} wxParse-li-text">    
<block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="">    
<template is="wxParse2" data="{{item}}" />    
</block>    
</view>    
</view>    
</view>    
</block>    
<!--video类型-->    
<block wx:elif="{{item.tag == 'video'}}">    
<template is="wxParseVideo" data="{{item}}" />    
</block>    
<!--img类型-->    
<block wx:elif="{{item.tag == 'img'}}">    
<template is="wxParseImg" data="{{item}}" />    
</block>    
<!--a类型-->    
<block wx:elif="{{item.tag == 'a'}}">    
<view bindtap="wxParseTagATap" class="wxParse-inline {{item.classStr}} wxParse-{{item.tag}}" data-src="{{item.attr.href}}" style="{{item.styleStr}}">    
<block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="">    
<template is="wxParse2" data="{{item}}" />    
</block>    
</view>    
</block>    
<block wx:elif="{{item.tag == 'br'}}">    
<template is="wxParseBr"></template>    
</block>    
<!--其他块级标签-->    
<block wx:elif="{{item.tagType == 'block'}}">    
<view class="{{item.classStr}} wxParse-{{item.tag}}" style="{{item.styleStr}}">    
<block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="">    
<template is="wxParse2" data="{{item}}" />    
</block>    
</view>    
</block>    
<!--内联标签-->    
<view wx:else class="{{item.classStr}} wxParse-{{item.tag}} wxParse-{{item.tagType}}" style="{{item.styleStr}}">    
<block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="">    
<template is="wxParse2" data="{{item}}" />    
</block>    
</view>    
</block>    
<!--判断是否是文本节点-->    
<block wx:elif="{{item.node == 'text'}}">    
<!--如果是,直接进行-->    
<template is="WxEmojiView" data="{{item}}" />    
</block>    
</template>    
<!--循环模版-->    
<template name="wxParse2">    
<!--<template is="wxParse3" data="{{item}}" />-->    
<!--判断是否是标签节点-->    
<block wx:if="{{item.node == 'element'}}">    
<block wx:if="{{item.tag == 'button'}}">    
<button type="default" size="mini">    
<block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="">    
<template is="wxParse3" data="{{item}}" />    
</block>    
</button>    
</block>    
<!--li类型-->    
<block wx:elif="{{item.tag == 'li'}}">    
<view class="{{item.classStr}} wxParse-li" style="{{item.styleStr}}">    
<view class="{{item.classStr}} wxParse-li-inner">    
<view class="{{item.classStr}} wxParse-li-text">    
<view class="{{item.classStr}} wxParse-li-circle"></view>    
</view>    
<view class="{{item.classStr}} wxParse-li-text">    
<block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="">    
<template is="wxParse3" data="{{item}}" />    
</block>    
</view>    
</view>    
</view>    
</block>    
<!--video类型-->    
<block wx:elif="{{item.tag == 'video'}}">    
<template is="wxParseVideo" data="{{item}}" />    
</block>    
<!--img类型-->    
<block wx:elif="{{item.tag == 'img'}}">    
<template is="wxParseImg" data="{{item}}" />    
</block>    
<!--a类型-->    
<block wx:elif="{{item.tag == 'a'}}">    
<view bindtap="wxParseTagATap" class="wxParse-inline {{item.classStr}} wxParse-{{item.tag}}" data-src="{{item.attr.href}}" style="{{item.styleStr}}">    
<block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="">    
<template is="wxParse3" data="{{item}}" />    
</block>    
</view>    
</block>    
<block wx:elif="{{item.tag == 'br'}}">    
<template is="wxParseBr"></template>    
</block>    
<!--其他块级标签-->    
<block wx:elif="{{item.tagType == 'block'}}">    
<view class="{{item.classStr}} wxParse-{{item.tag}}" style="{{item.styleStr}}">    
<block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="">    
<template is="wxParse3" data="{{item}}" />    
</block>    
</view>    
</block>    
<!--内联标签-->    
<view wx:else class="{{item.classStr}} wxParse-{{item.tag}} wxParse-{{item.tagType}}" style="{{item.styleStr}}">    
<block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="">    
<template is="wxParse3" data="{{item}}" />    
</block>    
</view>    
</block>    
<!--判断是否是文本节点-->    
<block wx:elif="{{item.node == 'text'}}">    
<!--如果是,直接进行-->    
<template is="WxEmojiView" data="{{item}}" />    
</block>    
</template>    
<!--循环模版-->    
<template name="wxParse3">    
<!--<template is="wxParse4" data="{{item}}" />-->    
<!--判断是否是标签节点-->    
<block wx:if="{{item.node == 'element'}}">    
<block wx:if="{{item.tag == 'button'}}">    
<button type="default" size="mini">    
<block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="">    
<template is="wxParse4" data="{{item}}" />    
</block>    
</button>    
</block>    
<!--li类型-->    
<block wx:elif="{{item.tag == 'li'}}">    
<view class="{{item.classStr}} wxParse-li" style="{{item.styleStr}}">    
<view class="{{item.classStr}} wxParse-li-inner">    
<view class="{{item.classStr}} wxParse-li-text">    
<view class="{{item.classStr}} wxParse-li-circle"></view>    
</view>    
<view class="{{item.classStr}} wxParse-li-text">    
<block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="">    
<template is="wxParse4" data="{{item}}" />    
</block>    
</view>    
</view>    
</view>    
</block>    
<!--video类型-->    
<block wx:elif="{{item.tag == 'video'}}">    
<template is="wxParseVideo" data="{{item}}" />    
</block>    
<!--img类型-->    
<block wx:elif="{{item.tag == 'img'}}">    
<template is="wxParseImg" data="{{item}}" />    
</block>    
<!--a类型-->    
<block wx:elif="{{item.tag == 'a'}}">    
<view bindtap="wxParseTagATap" class="wxParse-inline {{item.classStr}} wxParse-{{item.tag}}" data-src="{{item.attr.href}}" style="{{item.styleStr}}">    
<block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="">    
<template is="wxParse4" data="{{item}}" />    
</block>    
</view>    
</block>    
<block wx:elif="{{item.tag == 'br'}}">    
<template is="wxParseBr"></template>    
</block>    
<!--其他块级标签-->    
<block wx:elif="{{item.tagType == 'block'}}">    
<view class="{{item.classStr}} wxParse-{{item.tag}}" style="{{item.styleStr}}">    
<block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="">    
<template is="wxParse4" data="{{item}}" />    
</block>    
</view>    
</block>    
<!--内联标签-->    
<view wx:else class="{{item.classStr}} wxParse-{{item.tag}} wxParse-{{item.tagType}}" style="{{item.styleStr}}">    
<block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="">    
<template is="wxParse4" data="{{item}}" />    
</block>    
</view>    
</block>    
<!--判断是否是文本节点-->    
<block wx:elif="{{item.node == 'text'}}">    
<!--如果是,直接进行-->    
<template is="WxEmojiView" data="{{item}}" />    
</block>    
</template>    
<!--循环模版-->    
<template name="wxParse4">    
<!--<template is="wxParse5" data="{{item}}" />-->    
<!--判断是否是标签节点-->    
<block wx:if="{{item.node == 'element'}}">    
<block wx:if="{{item.tag == 'button'}}">    
<button type="default" size="mini">    
<block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="">    
<template is="wxParse5" data="{{item}}" />    
</block>    
</button>    
</block>    
<!--li类型-->    
<block wx:elif="{{item.tag == 'li'}}">    
<view class="{{item.classStr}} wxParse-li" style="{{item.styleStr}}">    
<view class="{{item.classStr}} wxParse-li-inner">    
<view class="{{item.classStr}} wxParse-li-text">    
<view class="{{item.classStr}} wxParse-li-circle"></view>    
</view>    
<view class="{{item.classStr}} wxParse-li-text">    
<block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="">    
<template is="wxParse5" data="{{item}}" />    
</block>    
</view>    
</view>    
</view>    
</block>    
<!--video类型-->    
<block wx:elif="{{item.tag == 'video'}}">    
<template is="wxParseVideo" data="{{item}}" />    
</block>    
<!--img类型-->    
<block wx:elif="{{item.tag == 'img'}}">    
<template is="wxParseImg" data="{{item}}" />    
</block>    
<!--a类型-->    
<block wx:elif="{{item.tag == 'a'}}">    
<view bindtap="wxParseTagATap" class="wxParse-inline {{item.classStr}} wxParse-{{item.tag}}" data-src="{{item.attr.href}}" style="{{item.styleStr}}">    
<block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="">    
<template is="wxParse5" data="{{item}}" />    
</block>    
</view>    
</block>    
<block wx:elif="{{item.tag == 'br'}}">    
<template is="wxParseBr"></template>    
</block>    
<!--其他块级标签-->    
<block wx:elif="{{item.tagType == 'block'}}">    
<view class="{{item.classStr}} wxParse-{{item.tag}}" style="{{item.styleStr}}">    
<block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="">    
<template is="wxParse5" data="{{item}}" />    
</block>    
</view>    
</block>    
<!--内联标签-->    
<view wx:else class="{{item.classStr}} wxParse-{{item.tag}} wxParse-{{item.tagType}}" style="{{item.styleStr}}">    
<block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="">    
<template is="wxParse5" data="{{item}}" />    
</block>    
</view>    
</block>    
<!--判断是否是文本节点-->    
<block wx:elif="{{item.node == 'text'}}">    
<!--如果是,直接进行-->    
<template is="WxEmojiView" data="{{item}}" />    
</block>    
</template>    
<!--循环模版-->    
<template name="wxParse5">    
<!--<template is="wxParse6" data="{{item}}" />-->    
<!--判断是否是标签节点-->    
<block wx:if="{{item.node == 'element'}}">    
<block wx:if="{{item.tag == 'button'}}">    
<button type="default" size="mini">    
<block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="">    
<template is="wxParse6" data="{{item}}" />    
</block>    
</button>    
</block>    
<!--li类型-->    
<block wx:elif="{{item.tag == 'li'}}">    
<view class="{{item.classStr}} wxParse-li" style="{{item.styleStr}}">    
<view class="{{item.classStr}} wxParse-li-inner">    
<view class="{{item.classStr}} wxParse-li-text">    
<view class="{{item.classStr}} wxParse-li-circle"></view>    
</view>    
<view class="{{item.classStr}} wxParse-li-text">    
<block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="">    
<template is="wxParse6" data="{{item}}" />    
</block>    
</view>    
</view>    
</view>    
</block>    
<!--video类型-->    
<block wx:elif="{{item.tag == 'video'}}">    
<template is="wxParseVideo" data="{{item}}" />    
</block>    
<!--img类型-->    
<block wx:elif="{{item.tag == 'img'}}">    
<template is="wxParseImg" data="{{item}}" />    
</block>    
<!--a类型-->    
<block wx:elif="{{item.tag == 'a'}}">    
<view bindtap="wxParseTagATap" class="wxParse-inline {{item.classStr}} wxParse-{{item.tag}}" data-src="{{item.attr.href}}" style="{{item.styleStr}}">    
<block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="">    
<template is="wxParse6" data="{{item}}" />    
</block>    
</view>    
</block>    
<block wx:elif="{{item.tag == 'br'}}">    
<template is="wxParseBr"></template>    
</block>    
<!--其他块级标签-->    
<block wx:elif="{{item.tagType == 'block'}}">    
<view class="{{item.classStr}} wxParse-{{item.tag}}" style="{{item.styleStr}}">    
<block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="">    
<template is="wxParse6" data="{{item}}" />    
</block>    
</view>    
</block>    
<!--内联标签-->    
<view wx:else class="{{item.classStr}} wxParse-{{item.tag}} wxParse-{{item.tagType}}" style="{{item.styleStr}}">    
<block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="">    
<template is="wxParse6" data="{{item}}" />    
</block>    
</view>    
</block>    
<!--判断是否是文本节点-->    
<block wx:elif="{{item.node == 'text'}}">    
<!--如果是,直接进行-->    
<template is="WxEmojiView" data="{{item}}" />    
</block>    
</template>    
<!--循环模版-->    
<template name="wxParse6">    
<!--<template is="wxParse7" data="{{item}}" />-->    
<!--判断是否是标签节点-->    
<block wx:if="{{item.node == 'element'}}">    
<block wx:if="{{item.tag == 'button'}}">    
<button type="default" size="mini">    
<block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="">    
<template is="wxParse7" data="{{item}}" />    
</block>    
</button>    
</block>    
<!--li类型-->    
<block wx:elif="{{item.tag == 'li'}}">    
<view class="{{item.classStr}} wxParse-li" style="{{item.styleStr}}">    
<view class="{{item.classStr}} wxParse-li-inner">    
<view class="{{item.classStr}} wxParse-li-text">    
<view class="{{item.classStr}} wxParse-li-circle"></view>    
</view>    
<view class="{{item.classStr}} wxParse-li-text">    
<block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="">    
<template is="wxParse7" data="{{item}}" />    
</block>    
</view>    
</view>    
</view>    
</block>    
<!--video类型-->    
<block wx:elif="{{item.tag == 'video'}}">    
<template is="wxParseVideo" data="{{item}}" />    
</block>    
<!--img类型-->    
<block wx:elif="{{item.tag == 'img'}}">    
<template is="wxParseImg" data="{{item}}" />    
</block>    
<!--a类型-->    
<block wx:elif="{{item.tag == 'a'}}">    
<view bindtap="wxParseTagATap" class="wxParse-inline {{item.classStr}} wxParse-{{item.tag}}" data-src="{{item.attr.href}}" style="{{item.styleStr}}">    
<block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="">    
<template is="wxParse7" data="{{item}}" />    
</block>    
</view>    
</block>    
<block wx:elif="{{item.tag == 'br'}}">    
<template is="wxParseBr"></template>    
</block>    
<!--其他块级标签-->    
<block wx:elif="{{item.tagType == 'block'}}">    
<view class="{{item.classStr}} wxParse-{{item.tag}}" style="{{item.styleStr}}">    
<block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="">    
<template is="wxParse7" data="{{item}}" />    
</block>    
</view>    
</block>    
<!--内联标签-->    
<view wx:else class="{{item.classStr}} wxParse-{{item.tag}} wxParse-{{item.tagType}}" style="{{item.styleStr}}">    
<block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="">    
<template is="wxParse7" data="{{item}}" />    
</block>    
</view>    
</block>    
<!--判断是否是文本节点-->    
<block wx:elif="{{item.node == 'text'}}">    
<!--如果是,直接进行-->    
<template is="WxEmojiView" data="{{item}}" />    
</block>    
</template>    
<!--循环模版-->    
<template name="wxParse7">    
<!--<template is="wxParse8" data="{{item}}" />-->    
<!--判断是否是标签节点-->    
<block wx:if="{{item.node == 'element'}}">    
<block wx:if="{{item.tag == 'button'}}">    
<button type="default" size="mini">    
<block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="">    
<template is="wxParse8" data="{{item}}" />    
</block>    
</button>    
</block>    
<!--li类型-->    
<block wx:elif="{{item.tag == 'li'}}">    
<view class="{{item.classStr}} wxParse-li" style="{{item.styleStr}}">    
<view class="{{item.classStr}} wxParse-li-inner">    
<view class="{{item.classStr}} wxParse-li-text">    
<view class="{{item.classStr}} wxParse-li-circle"></view>    
</view>    
<view class="{{item.classStr}} wxParse-li-text">    
<block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="">    
<template is="wxParse8" data="{{item}}" />    
</block>    
</view>    
</view>    
</view>    
</block>    
<!--video类型-->    
<block wx:elif="{{item.tag == 'video'}}">    
<template is="wxParseVideo" data="{{item}}" />    
</block>    
<!--img类型-->    
<block wx:elif="{{item.tag == 'img'}}">    
<template is="wxParseImg" data="{{item}}" />    
</block>    
<!--a类型-->    
<block wx:elif="{{item.tag == 'a'}}">    
<view bindtap="wxParseTagATap" class="wxParse-inline {{item.classStr}} wxParse-{{item.tag}}" data-src="{{item.attr.href}}" style="{{item.styleStr}}">    
<block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="">    
<template is="wxParse8" data="{{item}}" />    
</block>    
</view>    
</block>    
<block wx:elif="{{item.tag == 'br'}}">    
<template is="wxParseBr"></template>    
</block>    
<!--其他块级标签-->    
<block wx:elif="{{item.tagType == 'block'}}">    
<view class="{{item.classStr}} wxParse-{{item.tag}}" style="{{item.styleStr}}">    
<block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="">    
<template is="wxParse8" data="{{item}}" />    
</block>    
</view>    
</block>    
<!--内联标签-->    
<view wx:else class="{{item.classStr}} wxParse-{{item.tag}} wxParse-{{item.tagType}}" style="{{item.styleStr}}">    
<block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="">    
<template is="wxParse8" data="{{item}}" />    
</block>    
</view>    
</block>    
<!--判断是否是文本节点-->    
<block wx:elif="{{item.node == 'text'}}">    
<!--如果是,直接进行-->    
<template is="WxEmojiView" data="{{item}}" />    
</block>    
</template>    
<!--循环模版-->    
<template name="wxParse8">    
<!--<template is="wxParse9" data="{{item}}" />-->    
<!--判断是否是标签节点-->    
<block wx:if="{{item.node == 'element'}}">    
<block wx:if="{{item.tag == 'button'}}">    
<button type="default" size="mini">    
<block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="">    
<template is="wxParse9" data="{{item}}" />    
</block>    
</button>    
</block>    
<!--li类型-->    
<block wx:elif="{{item.tag == 'li'}}">    
<view class="{{item.classStr}} wxParse-li" style="{{item.styleStr}}">    
<view class="{{item.classStr}} wxParse-li-inner">    
<view class="{{item.classStr}} wxParse-li-text">    
<view class="{{item.classStr}} wxParse-li-circle"></view>    
</view>    
<view class="{{item.classStr}} wxParse-li-text">    
<block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="">    
<template is="wxParse9" data="{{item}}" />    
</block>    
</view>    
</view>    
</view>    
</block>    
<!--video类型-->    
<block wx:elif="{{item.tag == 'video'}}">    
<template is="wxParseVideo" data="{{item}}" />    
</block>    
<!--img类型-->    
<block wx:elif="{{item.tag == 'img'}}">    
<template is="wxParseImg" data="{{item}}" />    
</block>    
<!--a类型-->    
<block wx:elif="{{item.tag == 'a'}}">    
<view bindtap="wxParseTagATap" class="wxParse-inline {{item.classStr}} wxParse-{{item.tag}}" data-src="{{item.attr.href}}" style="{{item.styleStr}}">    
<block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="">    
<template is="wxParse9" data="{{item}}" />    
</block>    
</view>    
</block>    
<block wx:elif="{{item.tag == 'br'}}">    
<template is="wxParseBr"></template>    
</block>    
<!--其他块级标签-->    
<block wx:elif="{{item.tagType == 'block'}}">    
<view class="{{item.classStr}} wxParse-{{item.tag}}" style="{{item.styleStr}}">    
<block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="">    
<template is="wxParse9" data="{{item}}" />    
</block>    
</view>    
</block>    
<!--内联标签-->    
<view wx:else class="{{item.classStr}} wxParse-{{item.tag}} wxParse-{{item.tagType}}" style="{{item.styleStr}}">    
<block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="">    
<template is="wxParse9" data="{{item}}" />    
</block>    
</view>    
</block>    
<!--判断是否是文本节点-->    
<block wx:elif="{{item.node == 'text'}}">    
<!--如果是,直接进行-->    
<template is="WxEmojiView" data="{{item}}" />    
</block>    
</template>    
<!--循环模版-->    
<template name="wxParse9">    
<!--<template is="wxParse10" data="{{item}}" />-->    
<!--判断是否是标签节点-->    
<block wx:if="{{item.node == 'element'}}">    
<block wx:if="{{item.tag == 'button'}}">    
<button type="default" size="mini">    
<block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="">    
<template is="wxParse10" data="{{item}}" />    
</block>    
</button>    
</block>    
<!--li类型-->    
<block wx:elif="{{item.tag == 'li'}}">    
<view class="{{item.classStr}} wxParse-li" style="{{item.styleStr}}">    
<view class="{{item.classStr}} wxParse-li-inner">    
<view class="{{item.classStr}} wxParse-li-text">    
<view class="{{item.classStr}} wxParse-li-circle"></view>    
</view>    
<view class="{{item.classStr}} wxParse-li-text">    
<block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="">    
<template is="wxParse10" data="{{item}}" />    
</block>    
</view>    
</view>    
</view>    
</block>    
<!--video类型-->    
<block wx:elif="{{item.tag == 'video'}}">    
<template is="wxParseVideo" data="{{item}}" />    
</block>    
<!--img类型-->    
<block wx:elif="{{item.tag == 'img'}}">    
<template is="wxParseImg" data="{{item}}" />    
</block>    
<!--a类型-->    
<block wx:elif="{{item.tag == 'a'}}">    
<view bindtap="wxParseTagATap" class="wxParse-inline {{item.classStr}} wxParse-{{item.tag}}" data-src="{{item.attr.href}}" style="{{item.styleStr}}">    
<block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="">    
<template is="wxParse10" data="{{item}}" />    
</block>    
</view>    
</block>    
<block wx:elif="{{item.tag == 'br'}}">    
<template is="wxParseBr"></template>    
</block>    
<!--其他块级标签-->    
<block wx:elif="{{item.tagType == 'block'}}">    
<view class="{{item.classStr}} wxParse-{{item.tag}}" style="{{item.styleStr}}">    
<block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="">    
<template is="wxParse10" data="{{item}}" />    
</block>    
</view>    
</block>    
<!--内联标签-->    
<view wx:else class="{{item.classStr}} wxParse-{{item.tag}} wxParse-{{item.tagType}}" style="{{item.styleStr}}">    
<block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="">    
<template is="wxParse10" data="{{item}}" />    
</block>    
</view>    
</block>    
<!--判断是否是文本节点-->    
<block wx:elif="{{item.node == 'text'}}">    
<!--如果是,直接进行-->    
<template is="WxEmojiView" data="{{item}}" />    
</block>    
</template>    
<!--循环模版-->    
<template name="wxParse10">    
<!--<template is="wxParse11" data="{{item}}" />-->    
<!--判断是否是标签节点-->    
<block wx:if="{{item.node == 'element'}}">    
<block wx:if="{{item.tag == 'button'}}">    
<button type="default" size="mini">    
<block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="">    
<template is="wxParse11" data="{{item}}" />    
</block>    
</button>    
</block>    
<!--li类型-->    
<block wx:elif="{{item.tag == 'li'}}">    
<view class="{{item.classStr}} wxParse-li" style="{{item.styleStr}}">    
<view class="{{item.classStr}} wxParse-li-inner">    
<view class="{{item.classStr}} wxParse-li-text">    
<view class="{{item.classStr}} wxParse-li-circle"></view>    
</view>    
<view class="{{item.classStr}} wxParse-li-text">    
<block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="">    
<template is="wxParse11" data="{{item}}" />    
</block>    
</view>    
</view>    
</view>    
</block>    
<!--video类型-->    
<block wx:elif="{{item.tag == 'video'}}">    
<template is="wxParseVideo" data="{{item}}" />    
</block>    
<!--img类型-->    
<block wx:elif="{{item.tag == 'img'}}">    
<template is="wxParseImg" data="{{item}}" />    
</block>    
<!--a类型-->    
<block wx:elif="{{item.tag == 'a'}}">    
<view bindtap="wxParseTagATap" class="wxParse-inline {{item.classStr}} wxParse-{{item.tag}}" data-src="{{item.attr.href}}" style="{{item.styleStr}}">    
<block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="">    
<template is="wxParse11" data="{{item}}" />    
</block>    
</view>    
</block>    
<block wx:elif="{{item.tag == 'br'}}">    
<template is="wxParseBr"></template>    
</block>    
<!--其他块级标签-->    
<block wx:elif="{{item.tagType == 'block'}}">    
<view class="{{item.classStr}} wxParse-{{item.tag}}" style="{{item.styleStr}}">    
<block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="">    
<template is="wxParse11" data="{{item}}" />    
</block>    
</view>    
</block>    
<!--内联标签-->    
<view wx:else class="{{item.classStr}} wxParse-{{item.tag}} wxParse-{{item.tagType}}" style="{{item.styleStr}}">    
<block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="">    
<template is="wxParse11" data="{{item}}" />    
</block>    
</view>    
</block>    
<!--判断是否是文本节点-->    
<block wx:elif="{{item.node == 'text'}}">    
<!--如果是,直接进行-->    
<template is="WxEmojiView" data="{{item}}" />    
</block>    
</template>    
<!--循环模版-->    
<template name="wxParse11">    
<!--<template is="wxParse12" data="{{item}}" />-->    
<!--判断是否是标签节点-->    
<block wx:if="{{item.node == 'element'}}">    
<block wx:if="{{item.tag == 'button'}}">    
<button type="default" size="mini">    
<block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="">    
<template is="wxParse12" data="{{item}}" />    
</block>    
</button>    
</block>    
<!--li类型-->    
<block wx:elif="{{item.tag == 'li'}}">    
<view class="{{item.classStr}} wxParse-li" style="{{item.styleStr}}">    
<view class="{{item.classStr}} wxParse-li-inner">    
<view class="{{item.classStr}} wxParse-li-text">    
<view class="{{item.classStr}} wxParse-li-circle"></view>    
</view>    
<view class="{{item.classStr}} wxParse-li-text">    
<block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="">    
<template is="wxParse12" data="{{item}}" />    
</block>    
</view>    
</view>    
</view>    
</block>    
<!--video类型-->    
<block wx:elif="{{item.tag == 'video'}}">    
<template is="wxParseVideo" data="{{item}}" />    
</block>    
<!--img类型-->    
<block wx:elif="{{item.tag == 'img'}}">    
<template is="wxParseImg" data="{{item}}" />    
</block>    
<!--a类型-->    
<block wx:elif="{{item.tag == 'a'}}">    
<view bindtap="wxParseTagATap" class="wxParse-inline {{item.classStr}} wxParse-{{item.tag}}" data-src="{{item.attr.href}}" style="{{item.styleStr}}">    
<block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="">    
<template is="wxParse12" data="{{item}}" />    
</block>    
</view>    
</block>    
<block wx:elif="{{item.tag == 'br'}}">    
<template is="wxParseBr"></template>    
</block>    
<!--其他块级标签-->    
<block wx:elif="{{item.tagType == 'block'}}">    
<view class="{{item.classStr}} wxParse-{{item.tag}}" style="{{item.styleStr}}">    
<block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="">    
<template is="wxParse12" data="{{item}}" />    
</block>    
</view>    
</block>    
<!--内联标签-->    
<view wx:else class="{{item.classStr}} wxParse-{{item.tag}} wxParse-{{item.tagType}}" style="{{item.styleStr}}">    
<block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="">    
<template is="wxParse12" data="{{item}}" />    
</block>    
</view>    
</block>    
<!--判断是否是文本节点-->    
<block wx:elif="{{item.node == 'text'}}">    
<!--如果是,直接进行-->    
<template is="WxEmojiView" data="{{item}}" />    
</block>    
</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>

模版的引入

详细讲解官方文档 微信小程序官方文档-模版引入

着重强调 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 template

B template

C template

A template

B template

C template

.../循环

实际场景下输出

A template

B template

C 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>
    </block>

</template>

致敬

这是开发中想到的一种笨办法,如果你有好的意见,或更好的解决方案,请告知我

欢迎star或pull相关https://github.com/icindy/wxParse 


以上就是微信小程序组件wxParse中的模版template使用方法的全部内容,希望这篇技术文档对大家的学习有所帮助,转发给身边的程序猿朋友,感谢各位大大支持:脚本之家 jb51.cc

微信小程序组件wxParse中的模版template使用方法 由脚本之家 jb51.cc 收集整理
本文版权归原作者所有,转载请注明出处并带上本文链接!

上一篇
微信小程序 仿jQuery插件 DOM操作插件
下一篇
微信小程序五星级评分效果

您可能感兴趣的小程序组件教程

小程序组件

微信小程序中使用redux

当然小程序中使用redux不是必须的,如果你的程序逻辑不是很复杂,无需用这个东西,redux就是管理全局状态的,如果你刚好很熟悉redux,并且很有必要使用这东西的话,那就非常好可以使用,作者集成插件到微信小程序中的