小程序template使用

最新推荐文章于 2023-03-21 08:30:00 发布

有所执着

最新推荐文章于 2023-03-21 08:30:00 发布

阅读量674

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/lljxk2008/article/details/81099221

本文介绍如何在小程序中创建和使用模板来实现复用代码结构，提高开发效率。通过实例展示了如何定义模板数据并在不同页面中调用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

小程序模板使用的场景很多

比如前一个页面显示有多个缩略图片, 点击其中一个, 然后进入详情页面

在详情页面中展示具体的数据, 点击不同的图片进入后

展示格式相同, 展示的数据不同, 对于这种模式的开发就需要创建模板

模板是单独的wxml文件, 描述一堆wxml代码结构

如下创建模板:

<!--template.wxml-->
<template name='myTemplate'>
  <view>序号: {{index}}</view>
  <view>消息: {{msg}}</view>
  <view>时间: {{time}}</view>
</template>

现在要在index.wxml中使用此模板, 先在index.js中定义模板需要的数据(item, itemxxx)

// index.js
Page({
  data: {
    item:{
      index : 0,
      msg : "this is a template",
      time : "2016-09-15"
    },
    itemxx: {
      index: 1000,
      msg: "this is a template 1000",
      time: new Date()
    }
  }

在index.wxml中使用模板:

<!-- index.wxml -->
<import src="../template/template.wxml" />       <!-- 引入要使用的模板 -->
<view>
  <template is="myTemplate" data="{{...item}}"></template>
</view>

<!--这里可再次使用模板-->
<view>
  <template is="myTemplate" data="{{...itemxx}}"></template>
</view>

注: 定义模板时使用属性name给模板取名字, 使用模板时, 使用is属性表示要引用哪个模板

由于模板是独立存在的, 所以在不同的页面(index, index2页面都可以使用)

使用模板时, data属性表示要向模板中填充的值, 以对象展开的形式写: {{...对象名}}

如果data的值是数组, 则直接写: data={{数组名}}, 模板中使用{{item.属性名}}

这种data填写数组的形式, 其使用场景不同, 这种是在同一个页面中展示

还可以给模板写样式, 这样使用模板的时候, 样式也有了

模板只能有这两个种文件, 不能有template.js, template.json