• 引用
  • import
  • include

引用

SWAN 可以通过import和include来引用模板文件。

import

通过import和template配合使用，可以将代码分离以及复用。

代码示例

在开发者工具中打开

在开发者工具中打开

在 WEB IDE 中打开

• 首先，在person-card.swan中定义了一个叫person-card的template：

 


  
<!-- person-card.swan-->

  
<template name="person-card">

  
 <view>

  
 <text>位置: {{pos}}</text>

  
 <text>姓名: {{name}}</text>

  
 </view>

  
</template>

 

• 然后，在index.swan里引用文件person-card.swan，并使用它的模板：

 


  
<!-- index.swan-->

  
<import src="./person-card.swan" />

  
<template is="person-card" data="{{person}}" />

 

 


  
// index.js

  
Page({

  
 data: {

  
 person: {

  
 pos: 'Baidu',

  
 name: 'SWAN'

  
 }

  
 }

  
});

 

import 具有递归的特性。 例如：C 引用 B，B 引用 A，在 C 中可以使用 B 定义的 template，在 B 中可以使用 A 定义的 template ，C 也可以使用 A 定义的 template

代码示例

在开发者工具中打开

在开发者工具中打开

在 WEB IDE 中打开

 


  
<!-- templateA.swan-->

  
<template name="A">

  
 <text> A template </text>

  
</template>

 

 


  
<!-- templateB.swan-->

  
<import src="../templateA/templateA.swan"/>

  


  
<template name="B">

  
 <text> B template </text>

  
</template>

  


  
<template is="A"/>

 

 


  
<!-- templateC.swan-->

  
<import src="../templateB/templateB.swan"/>

  


  
<template is="A"/>

  


  
<template is="B"/>

 

include

通过include可以将目标模板整个（除了 template）引入到当前的位置，相当于inline。

代码示例

在开发者工具中打开

在开发者工具中打开

在 WEB IDE 中打开

 


  
<!-- index.swan-->

  
<include src="header.swan" />

  
<view class="index">body</view>

 

 


  
<!-- header.swan-->

  
<view class="header">header</view>

 

include 可以将目标文件除了<template/>外的整个代码引入，相当于是拷贝到 include 位置，如：

代码示例

在开发者工具中打开

在开发者工具中打开

在 WEB IDE 中打开

 


  
<!-- index.swan -->

  
<include src="header.swan"/>

  
<view> body </view>

  
<include src="footer.swan"/>

 

 


  
<!-- header.swan -->

  
<view> header </view>

 

 


  
<!-- footer.swan -->

  
<view> footer </view>