【小程序】自定义模板以及使用

小程序为了避免页面中重复使用代码的问题，提供了模板机制，把一些可以复用的代码片段放置在代码中进行定义，然后在页面中使用。

定义模板

新建一个可以存放模板的文件，比如将文件命名为template.html，代码如下：

<template name="prize">
    <view>
        <text>{
   
   {name}}</text>
    </view>
</template>

template模板是通过name属性来标识的。

使用模板

通过import将模板引入到使用模板的页面，src是模板文件的路径，并使用is属性来查找该模板并使用，然后将模板所需要的data传入它需要传入的值。代码如下：

<!--xx.wxml-->
<import src="item.wxml"/>
<template is="item" data="{
     
     {prize}}"/>

// xx.js
Page({
    
    
  data: {
    
    
    prize: {
    
    
      name: '奖品名称'
    }
  }
})

注意点：

1. 模板的is属性支持三元运算。
2. import有作用域的概念，即只会import目标文件中定义的template，而不会import目标文件import的template。