微信小程序 WXML提供了import和include引用方式

使用import和include引用方式的微信小程序開(kāi)發(fā)

微信小程序WXML提供了兩種文件引用方式：import和include，方便開(kāi)發(fā)者模塊化管理代碼。

---

1. 使用import引用template

import可以在當(dāng)前文件中嵌入目標(biāo)文件定義的template，使得這個(gè)template可以在當(dāng)前文件內(nèi)被使用。

以在item.wxml中定義一個(gè)名為item的template為例：

  
    <!-- item.wxml -->
    <template name="item">
      <text>{{text}}</text>
    </template>
  

在index.wxml中引用item.wxml，可以使用item模板：

  
    <import src="item.wxml"/>
    <template is="item" data="{{text: 'forbar'}}"/>
  

1.1 import的作用域

import有作用域的概念。即只會(huì)import目標(biāo)文件中定義的template，而不會(huì)import目標(biāo)文件import的template。

例如：C import B，B import A，在C中可以使用B定義的template，在B中可以使用A定義的template，但是C不能使用A定義的template。

  
    <!--A.wxml-->
    <template name="A">
      <text>A template</text>
    </template>
  

  
    <!--B.wxml-->
    <import src="a.wxml"/>
    <template name="B">
      <text>B template</text>
    </template>
  

  
    <!--C.wxml-->
    <import src="b.wxml"/>
    <template is="A"/> <!-- Error! Can not use tempalte when not import A. -->
    <template is="B"/>
  

2. 使用include引用代碼片段

include可以將目標(biāo)文件（除了<template/>）的整個(gè)代碼引入到當(dāng)前位置。這種方式適合在多個(gè)頁(yè)面中使用相同的代碼片段，如頁(yè)面頭部和底部布局等。

例如，在header.wxml中定義頁(yè)面頭部布局代碼片段：

  
    <!-- header.wxml -->
    <view>header</view>
  

同樣，在footer.wxml中定義頁(yè)面底部布局代碼片段：

  
    <!-- footer.wxml -->
    <view>footer</view>
  

在index.wxml中使用include引入頭部和底部的代碼片段：

  。。。。。。

<本文由himall原創(chuàng)，商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)標(biāo)明：himall原創(chuàng)>