【微信小程序学习之路】----使用template模板所遇到的问题

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/tomatocc/article/details/80831436

官方文档的demo过于简单，本人尝试几次也没有弄懂，找了几个demo后才渐渐了解清楚小程序的模板是怎么玩的。并且展示一个简单的demo

• 首先来看我们的项目结构：主要用到index.js，index.wxml，temp.js，temp.wxml
  

• 首先，我们在根目录下创建一个文件夹：templates,用于存放模板页面（temp.wxml）和模板样式文件(temp.wxss)

• 然后我们对模板文件temp.wxml及进行编辑

<template name="staffName">
  <view wx:for="{{staffList}}">
   用户姓名：<view>{{item.lastName}}  {{item.firstName}}  </view>
  </view>   
</template>

其中：staffName：是该模板的名字， 中间的内容就是一个简单的渲染数组了，这里不多解释，很简单

• 然后我们在我们的index.wxml主页来引入该模板

<!--测试模板  通过该命令引入模板-->
<import src='../../templates/temp'/>
<template is="staffName" data="{{staffList}}"/>  

import就是为了导入模板文件，路径用的是绝对路径。 而第二行的 is=”” 这里面的参数就是我们前面定义的模板名称：staffName，而data后面的参数就是我们需要向模板传入的参数，这里的参数我们定义的是一个数组，下面我们就在index.js中为这个数组赋值。

Page({
  //用于渲染页面数据
  data: {
    staffList: [
      { lastName: '张', firstName: '三' }, { lastName: '李', firstName: '四' }
    ],
    title:'tom'
  }
})

• 最后，我们对我们的项目进行编译，效果如下：