微信小程序中,如果幾個頁面中需要引用同一個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中只需要一句話即可。