微信小程序模板template简单用法示例

什么是小程序模板？

小程序模板是一种可复用的代码结构，可以在多个页面中使用。它包含了一些 HTML、CSS、JavaScript 代码，用于渲染页面元素。

如何使用小程序模板？

在微信小程序中，使用小程序模板需要遵循以下步骤：

1. 在 *.wxml 文件中引入模板：使用 wxml 标签的 import 属性，将需要引入的模板的文件路径填写到 import 属性中。（假设需要引入名为 templateName 的模板，该模板文件名为 template.wxml）

<import src="path/to/template.wxml" />

1. 在 *.wxml 文件中使用模板：使用 wxml 标签的 template 属性，将需要使用的模板的名称填写到 template 属性中。

<template is="templateName"></template>

1. 在模板文件(template.wxml)中编写代码：可以在模板文件中编写 HTML、CSS等代码，用于渲染页面元素。需要使用 wxml 标签的 data 属性，将数据渲染到模板中。

<template name="templateName">
  <view>
    <text>{{data}}</text>
  </view>
</template>

1. 在 .js 文件中设置数据：需要在 .js 文件中定义数据，并将数据绑定到模板的 data 属性中。

Page({
  data: {
    data: 'Hello, World!'
  }
})

示例一

模板文件(template1.wxml)

<template name="template1">
  <view>
    <text>{{title}}</text>
    <text>{{content}}</text>
  </view>
</template>

页面文件(page1.wxml)

<import src="path/to/template1.wxml" />
<template is="template1" data="{{title: '标题', content: '内容'}}"></template>

*.js 文件(page1.js)

Page({
  data: {
    title: '标题',
    content: '内容',
  }
})

示例二

模板文件(template2.wxml)

<template name="template2">
  <view>
    <text>{{title}}</text>
    <image src="{{imageUrl}}"></image>
  </view>
</template>

页面文件(page2.wxml)

<import src="path/to/template2.wxml" />
<template is="template2" data="{{title: '标题', imageUrl: 'https://example.com/image.jpg'}}"></template>

*.js 文件(page2.js)

Page({
  data: {
    title: '标题',
    imageUrl: 'https://example.com/image.jpg',
  }
})

以上是小程序模板的简单用法示例，希望对您有所帮助。