微信小程序学习之template模板的使用

微信小程序模板与vue模板的差别

• 小程序模板 他有name表示该模板的名字，定义好后就可以在中间写代码了

  <template name="list">
  </template>
  

• vue的模板没有实质性的，vue只会把template里面的内容进行编译， vue的template就和微信小程序中的block一样，可以当标签使用但是在页面中不显示；

• 模板就相当于vue的组件,把一些公共的部件提取出来方便其他页面使用

如何使用呢

• 写好了如何使用

    <template name="list">
      <view>姓名：tom</view>
      <view>年龄:27</view>
    </template>
  

• 模板调用

  • 在当前页面中使用 is表示你使用的模板name对应的名字

      <template name="list">
        <view>姓名：tom</view>
        <view>年龄:27</view>
      </template>
      <template is="list"></template>
    

  • 动态添加data中的数据
    data是js文件中的data数据data:{student:{id:1,name:"wq",age:18}}, 如果data的值是对象就可以使用es6的解构data="{{...student}}"的方式, 在页面中就可以使用{{name}}{{age}}

      <template name="list">
          <view>姓名：{{student.name}}</view>
          <view>年龄:{{student.age}}</view>
      </template>
      <template is="list" data="{{student}}"></template>
    

  • 如果是数组对象则可以进行循环 这样就可以直接获取数据了

      <view wx:for={{studentList}}">
          <template is="list" data="{{...item}}"></template>
      </view>
    

  • 模板切换如果有两个模板 一个竖排显示list，一个横排显示text_list, 在data里面设置一个flag默认为竖排true，到时候想要横排就为false就行了

      <template name="list">
          <view>姓名：{{name}}</view>
          <view>年龄:{{age}}</view>
      </template>
      <template name="text_list">
          <text>姓名：{{name}}</text>
          <text>年龄:{{age}}</text>
      </template>
      <view wx:for={{studentList}}">
          <template is="{{flag?'list':'text_list'}}" data="{{...item}}"></template>
      </view>
    

  • 现在这是在本页面中使用，我们应该引入模板，先在项目中创建一个模板文件夹， 然后对应创建模板页面只需要.wxml的页面就行了,然后在你需要的页面中引入就行了， 使用import标签在找到想要引入的页面路径就行了

      <import src="/templates/studentList.wxml"/>
      <import src="/templates/studentText.wxml"/>
      <view wx:for="{{studentList}}">
        <template is="{{flag?'list':'text_list'}}" data="{{...item}}"></template>
      </view>