小程序中模板使用template

╰半橙微兮° 2022-06-01 04:07 192阅读 0赞

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

创建 template.wxml

![SouthEast][]

<template name="msgItem">
      <view>
      <text> {
       {index}}: {
       {msg}} </text>
      <text> Time: {
       {time}} </text>
     </view>
    </template>
    
    <template is="msgItem" data="{
       {...item}}"/>
    <template is="msgItem" data="{
       {...item}}"/>
    <template is="msgItem" data="{
       {...item}}"/>
    
    <template name="odd">
      <view>{
       {motto}} </view>
    </template>
    <template name="o">
      <view> even </view>
    </template>
    
    
    <block wx:for="{
       {[1, 2, 3, 4,5]}}">
      <template is="{
       {item % 2 == 0 ? 'o' : 'odd'}}" />
    </block>

在需要用到template的地方先引入 <import src="../templates/template.wxml" >

<import src="../templates/template.wxml"/>

调用代码

<view class="usermotto">
        <template is="odd" data="{
       {...msg}}"></template>
      </view>
    </view>
    
    <view>
        <template is="odd" data="{
       {...msg}}"></template>
    </view>

![SouthEast 1][]

**<template is=''  "    data=" "></template>   此时的is用来进行判断  data是要传入模板中的数据...eg   ...(spread运算符) **

**要注意import作用域，其仅仅引用目标文件中template。如：C import B，B import A，在C中可以使用B定义的template，在B中可以使用A定义的template，但是C不能使用A定义的template。**

[SouthEast]: /images/20220601/3bdf60f745e143afaa037d63d198223a.png
[SouthEast 1]: /images/20220601/c58f70fc57e14127b8b540e0836b4832.png

发表评论取消回复

表情：

评论列表（有 0 条评论，192人围观）

还没有评论，来说两句吧...

相关阅读

相关模板templates的使用

　　目录　　模板及其渲染　　模板查找路径　　DTL模板语法　　常用的模板标签　　DTL常用过滤器　　模块结构优化　　加载静态文件　　视图函数只是

落日映苍穹つ/ 2023年09月24日 07:56/ 0 赞/ 105 阅读

相关小程序使用模板

使用模板：  <import src="../productList/productList.wxml"></import>

骑猪看日落/ 2023年01月12日 14:55/ 0 赞/ 160 阅读

相关微信小程序自定义模板template

示例：创建目录和文件： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZ

亦凉/ 2022年10月29日 03:14/ 0 赞/ 222 阅读

相关小程序中模板使用template

WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用。创建 template.wxml ![SouthEast][] <!

╰半橙微兮°/ 2022年06月01日 04:07/ 0 赞/ 193 阅读

相关微信小程序模板template总结

没有看过微信小程序template的同学们可以先去[官网][Link 1]上了解一下。以下是对template的几点总结：一、 template，是一个wxml文件，

àì夳堔傛蜴生んèń/ 2022年05月22日 07:09/ 0 赞/ 193 阅读

相关字符串模板、模板字符串、Vue中使用template等等。

1：模板字符串传统的JS语言，输出模板是这样写的： $('result').append( 'There are <b>' + baske

青旅半醒/ 2022年05月10日 08:20/ 0 赞/ 288 阅读

相关微信小程序----模板（template）

贴一个链接 [https://blog.csdn.net/m0\_38082783/article/details/78909416][https_blog.csdn.net

川长思鸟来/ 2022年04月21日 14:28/ 0 赞/ 239 阅读

相关小程序定义并使用模板template

1. 先说一下template和component的区别： template包含wxml和wxss，component包含wxml、wxss、js、json。从他们的结构就不

素颜马尾好姑娘i/ 2021年10月29日 09:24/ 0 赞/ 277 阅读

相关 Node.js 中使用art-template模板

安装art-template模板，在想要安装的目录下打开命令行，输入 npm install art-template 创建js文件 // 加载模板

电玩女神/ 2021年09月20日 09:24/ 0 赞/ 283 阅读

相关微信小程序 template模板引用、include引用

作用:其他wxml文件能直接使用模板定义好的html内容 template模板引用: 1、创建.wxml <template

女爷i/ 2021年07月24日 20:13/ 0 赞/ 528 阅读