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