投稿

小程序模板平台推荐（小程序模板平台有哪些）

用户投稿 • • 网络资讯 • 阅读 605

一、定义模板

微信小程序内在<template/>内定义代码片段，使用name属性，作为模板的名字进行定义模板。示例代码如下：

//wxml
<!-- 定义模板，模板名称为msgItem -->
<template name="msgItem">
  <view>
    <text>{{item.index}}:{{item.msg}}</text>
    <text>Time:{{item.time}}</text>
  </view>
</template>
//js
Page({
  data:{
    item:{
      index:1,
      msg:"这是一个模板",
      time:"2022年6月7日"
    }
  }
})

二、使用模板

在WXML文件里，使用is属性，声明需要使用的模板。示例代码如下：

//wxml
<!-- 使用模板，调用模板msgItem -->
<template is="msgItem" data="{{item}}"/>

编译后的结果如下：

小程序模板平台推荐（小程序模板平台有哪些）

三、模板当中的三元判断

微信小程序内在<template/>内定义代码片段，使用is属性可以使用三元运算语法，来动态决定具体需要渲染哪个模板。具体示例代码如下：

//wxml
<!-- 定义模板，模板名称为OddNumber、EvenNumbers -->
<template name="OddNumber">
  <view>这是一个奇数</view>
</template>

<template name="EvenNumbers">
  <view>这是一个偶数</view>
</template>

<!-- 使用模板，调用模板OddNumber、EvenNumbers -->
<block wx:for="{{[1,2,3,4,5,6,7,8,9,10]}}">
  <template is="{{item%2==0? 'EvenNumbers':'OddNumber'}}"/>
</block>

具体编译结果如下：

小程序模板平台推荐（小程序模板平台有哪些）

本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 sumchina520@foxmail.com 举报，一经查实，本站将立刻删除。
如若转载，请注明出处：https://www.sumedu.com/faq/238799.html
赞 (0)
用户投稿
0 0
上一篇 2022年8月8日 22:07
下一篇 2022年8月8日 22:14

相关推荐