微信小程序学习日志:模板引用简述

1、在同一个wxml文件创建和引用模板

先去template页面的js文件中定义一个item对象,该对象包含姓名、性别与学号

微信小程序学习日志:模板引用简述

创建一个模板利用template标签,template标签中的name属性表示这个模板的名称,引用时需要用到这个名称。

微信小程序学习日志:模板引用简述

引用时需要用到template的is属性,填入的是模板名称,表明引用的模版;data属性传入模板一个对象。“...”是扩展运算符,合理分配对象内容。

微信小程序学习日志:模板引用简述

编译得

微信小程序学习日志:模板引用简述


2、在不同的页面创建模板和引用

引用在其他页面创建的模板时,可以利用import和include标签,他们都是在标签内加上src=“目标内容的页面”。但不同的是import是只引入模板内容,include只引入非模板内容,并且include引入的非模板内容会立即运行。

现在先创建两个新的wxml文件:index1.wxml和index2.wxml

微信小程序学习日志:模板引用简述

微信小程序学习日志:模板引用简述

然后在template页面用import引入index1.wxml,并且引用index1中的oh_yeah模板;同时利用include引入index2.

微信小程序学习日志:模板引用简述

编译后如下

微信小程序学习日志:模板引用简述

可以看到,index1的非模板内容没有显示,而index2的非模板内容在执行include时便已编译,所以index2的内容在index1的上方。

但上述代码并没有引用index2的模板内容的语句,会不会是因为这个index2的模板内内容没显示呢?那好,我们在template页面下面加上引用index2模板内容的语句

<template is="oh_hi"></template>
然后编译,系统提示warnning,并没有发现oh_hi模板

微信小程序学习日志:模板引用简述

收工,睡觉。