第6课 微信小程序模板的引入与使用：

第6课 微信小程序模板的引入与使用：

在template1.wxml中自定义一个wxml模板：

<template>定义模板标签</template>

在template1.wxss中为模板设置wxss样式：

在index1.wxml页面内引入模板：

<!-- wxml内引入自定义的模板 路径 -->
<import src="../template1/template1.wxml" />

在index1.wxss页面内引入模板样式：

/* wxss内引入自定义的模板样式 路径 */
@import "../template1/template1.wxss"

——————————————————

若只想创建与引入模板查看上面部分即可

——————————————————

以下是模板渲染数据的实际应用：

template1.wxml代码：

<!-- template标签用来创建模板 name="article":模板的名称为article -->
<template name="article">
  <view class="title">{{title}}</view>
  <view class="content">{{content}}</view>
</template>

template1.wxss代码：

/* 这是templata1.wxss文件 引入模板时也需要引入wxss样式 */
.title{
  background-color: pink;
}
.content{
  background-color: green;
}

index1.js代码：

// pages/index1/index1.js
Page({
  /*data页面的初始数据*/
  data: {
    news:[  //模拟新闻数据
      {
        title: "新闻1",
        content: "新闻1的内容"
      },
      {
        title: "新闻2",
        content: "新闻2的内容"
      },
      {
        title: "新闻3",
        content: "新闻3的内容"
      },
    ]
  }
})

index1.wxml代码：

<!-- 引入自定义的模板 -->
<import src="../template1/template1.wxml" />
<text>我的页面</text>
<!-- 引入name为article的模板 for遍历data中的news数据 通过data属性传递给模板-->
<template is="article" wx:for="{{news}}" data="{{...item}}" />

index1.wxss代码：

/* pages/index1/index1.wxss */
/* 引入模板的wxss样式 */
@import "../template1/template1.wxss"

运行效果如下：