小程序模板网

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

作者:Di,来自原文地址 
本文相关文章:跳坑《一百三十七》模版template使用 
模板 
WXML提供模板(template),可以在模板中定义代码片段,然后在不同的地方调用。

 

介绍及使用方法:

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

 

看看微信的模版官方用法

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

 

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

模版的引入

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

 

  1. <!-- A.wxml -->
  2. <template name="A">
  3. <text> A template </text>
  4. </template>
  5.  
  6. <!-- B.wxml -->
  7. <import src="a.wxml"/>
  8. <template name="B">
  9. <text> B template </text>
  10. </template>
  11.  
  12. <!-- C.wxml -->
  13. <import src="b.wxml"/>
  14. <template is="A"/>
  15. <!-- Error! Can not use tempalte when not import A. -->
  16. <template is="B"/>
 

循环使用测试

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

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

 

  1. <template name="A">
  2. <text> A template </text>
  3. </template>
  4.  
  5. <template name="B">
  6. <text> B template </text>
  7. </template>
  8.  
  9. <template name="C">
  10. <text> C template </text>
  11. </template>

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

 

  1. A template
  2. B template
  3. C template
  4. A template
  5. B template
  6. C template
  7. .../循环

实际场景下输出

 

  1. A template
  2. B template
  3. C template

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

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

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

 

  1. <template name="wxParse0">
  2. <!--判断是否是标签节点-->
  3. <block wx:if="{{item.node == 'element'}}">
  4.  
  5. <block wx:if="{{item.tag == 'button'}}">
  6. <button type="default" size="mini" >
  7. <block wx:for="{{item.child}}" wx:for-item="item">
  8. <template is="wxParse1" data="{{item}}"/>
  9. </block>
  10. </button>
  11. </block>
  12. <!--li类型-->
  13. <block wx:elif="{{item.tag == 'li'}}">
  14. <view class="wxParse-li">
  15. <view class="wxParse-li-inner">
  16. <view class="wxParse-li-text">
  17. <text class="wxParse-li-circle"></text>
  18. </view>
  19. <view class="wxParse-li-text">
  20. <block wx:for="{{item.child}}" wx:for-item="item">
  21. <template is="wxParse1" data="{{item}}"/>
  22. </block>


易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/23407.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询