微信小程序开发之模板的引用介绍

我们在开发微信小程序时，为了节省时间会在页面中引入共用的模板，使得页面中的某一小块有相同的功能，例如下图所示的每个页面都有搜索的功能，所以只要引入一个模板文件即可，可大大的节省写代码的时间和缩短修改该功能的时间，类似于网页的包含文件，假设当前的小程序页面为首页，即index/index.wxml文件。
 

    我们引入的代码如下：

<import src="/pages/top_search/index.wxml"/>，即引入pages中的top_search文件夹的index.wxml文件，
这只是引用文件，并未使用，所以无任何效果，由于已经引用了top_search/index.wxml，所以可以使用top_search模板，可以使用如下图所示的代码<template is=”top_search”></template>将文件插入在<view class="search_section">模板内容</view>中。
 

 

引入的文件的代码如下所示：


  即由<template name=”top_search”>页面内容</tempate>组成的引入文件的代码，在top_search/index.wxml中定义了一个叫top_serach的template, 上面的代码是将页面上data的数据传入到模板页面footer.wxml中，其中的页面上的代码is=”top_search”与 模板上的代码name=”top_search”是对应的，这也为了传递参数提供了条件。下面我们来看看top_search的文件夹，如下图所示：
 

需要特别说明的是，这个文件夹的js和wxss文件都是无法生效的，也就是在top_search/index.wxml中调用的方法，需要在调用的那个页面上的js文件上写方法，例如上图里有 bindtap='go_to_search'，其中的go_to_search方法你不能写在top_search/index.js里，因为我举例当前的页面是首页，所以应该写在index/index.js文件里，如下图所示：