创新互联百度小程序教程：引用

引用
- import
- include

引用

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

我们提供的服务有：成都网站设计、做网站、成都外贸网站建设公司、微信公众号开发、网站优化、网站认证、滨州ssl等。为上1000家企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务，是有科学管理、有技术的滨州网站制作公司

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>

上一篇：pdf为什么不能选择用wps打开

下一篇：及管理Linux进程的创建与管理：让生产力有效起飞（linux进程的创建）