小程序--引用公共模板方法/共同header/footer

微信小程序中，若是幾個頁面中須要引用同一個header/footer，當定義了公共模板時，有兩種引用方法以下：

方法一：在公共模板中定義template元素，利用<import/> 方法 ,這種方式只會顯示公共模板的template裏面的內容，以外的內容不會顯示

wxml:

<import src='公共模板地址'/>

<template is='模板裏面template定義的name名稱' data='{{引入的數據1，引入數據2}}'></template> 注意：這裏的data='{{引入的數據1，引入數據2}}' 是在template中要提取js文件中的data數據裏面的key名字，不然沒法顯示

公共模板的wxml:在公共模板中必須定義每個template的的name的名字，不然引用的時候沒法得知引用具體某一個；

<template name='header'><!--必須有有name否則import方式沒法判斷到底要引用哪個tempalte-->
{{title.header}}<!--這個數據只是提取要引用的文件的裏面js裏面定義的對應的數據，若是在其餘文件中定義不在要引用的文件中無效-->
</template>

要引用的文件js定義數據：

data: {
title:{header:'這是template的header部分',footer:'這是template的footer部分',other:'這是tempalt外部部分'}
}

頁面結果：

 

 方法二:

<include src="公共模板地址"/>這種方式是引入了模板中除了tempalte之外的全部內容。
<include src="../../template/footer.wxml"/> 

公共模板的wxml:

{{title.other}}

js定義的數據：

 title:{header:'news裏面的的header',footer:'這是template的footer部分'}

頁面結果：

 

總結：import方式和imclude方式的不一樣在於前者僅引用公共模板中的template裏面的內容後者僅引用template之外的內容，顯而易見，include方式更簡單一些，在wxml中只須要一句話便可。