小程序--引用公共模板方法/共同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中只需要一句話即可。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM