微信小程序-template模板使用

最新推荐文章于 2025-04-17 11:41:31 发布

前端向朔

最新推荐文章于 2025-04-17 11:41:31 发布

阅读量9.3w

点赞数 11

分类专栏：微信小程序入门实战文章标签：小程序 template 模板样式

本文链接：https://blog.csdn.net/u013778905/article/details/59646241

版权

本文详细介绍了微信小程序中如何使用template模板，从定义模板、模板的使用到模板样式的设置，帮助开发者实现代码复用，提升开发效率。通过在template文件夹创建模板文件，定义name属性，使用is属性结合data进行渲染，以及在对应的wxss文件中控制模板样式。

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

如下图，我在做华企商学院小程序的时候，课程搜索结果页和课程列表页结构是完全一样的，这时就非常适合使用模板来完成页面搭建。实现一次定义，到处使用。

这里写图片描述

模板

一、定义模板

1、新建一个template文件夹用来管理项目中所有的模板；
2、新建一个courseList.wxml文件来定义模板；
3、使用name属性，作为模板的名字。然后在<template/>内定义代码片段。

注意：
a.可以看到一个.wxml文件中可以定义多个模板，只需要通过name来区分；
b.模板中的数据都是展开之后的属性。

<template name="courseLeft">
    <navigator url="../play/play?courseUuid={
   {
   courseUuid}}&isCompany={
   {
   isCompany}}">
        <view class="item mr26">
            <image src="{
   {
   imagePath}}" mode="aspectFill"></image>
            <view class="course-title">
                <text class="title">{

最低0.47元/天解锁文章