微信小程序开发之--”template模板“的应用

最新推荐文章于 2024-07-06 22:23:57 发布

樱成冢丶

最新推荐文章于 2024-07-06 22:23:57 发布

阅读量805

点赞数

分类专栏：微信小程序开发文章标签：前端微信小程序开发

本文链接：https://blog.csdn.net/qq_37994494/article/details/79676267

版权

本文介绍了微信小程序中如何定义和使用`template`模板。首先，通过创建`template`文件夹和`temp.wxml`文件定义模板，并使用`name`属性标识模板。每个文件可定义多个模板，通过`<template>`区分。接着，文章详细说明了如何在模板中渲染数据，使用ES6语法和展开运算符，并给出案例中引用js数据结构的示例。模板的使用包括通过数组下标引用和直接使用当前项。欢迎大家指正和讨论。

摘要由CSDN通过智能技术生成

第一步：定义模板

①：新建一个template文件夹用来管理项目中所有的模板（本文案例定义文件夹名为：temp）；
②、新建一个wxml文件来定义模板（本文案例定义文件夹名为：temp.wxml）；
③、使用name属性，作为模板的名字。然后在<template name='模板名称'>代码片段<template/>内定义代码片段。

<!--pages/temp/temp.wxml-->
<template name='list'>

    <view class='expertStyle'>

        <image class='expertPhoto' src='{
  {img}}'></image>
 
        <view class='expertInfo'>
            <view class='infoTop'>
              <view class='topName'>{
  {name}}</view>
              <view class='topType' wx:for="{
  {expertTitle}}" wx:key="*this">{
  {item.title}}</view>
            </view>

          <view class='infoMiddle'>{
  {info}}</view><
          <view class='infoBottom'>所在科室： {
  {keshi}} </view>
          <view class='infoBottom'>坐诊时间： {
  {time}} </view>
        </view>
    </v