J9国际集团|Home

135-2716-3909
网站建设资讯详细

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

发表日期:2026-07-31 09:47:29   作者来源:陈应信   浏览:3189   标签:微信小程序开发    
我们在开□□发微信小□□程序时,为了节省□□□□时间会在□□页面中引□□入共用的□□□模板,使得页面◤中的某一·小块有相□□□同的功能,例如下图◥所示的每□□□□个页面都□□有搜索的□□□□功能,所以只要□□□□引入一个●模板文件♦即可,可大大的□□□节省写代□□□码的时间□□和缩短修□□□改该功能□□的时间,类似于网△页的包含□□□文件,假设当前□□□的小程序◎页面为首□□页,即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>中。
 
html代码

 

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

tempalte
  即由<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文件里,如下图所□□示:
 

js


 
 
如没特殊注明,文章均为J9国际集团原创,转载请注明来自https://www.lyzhuzao.com/news/6776.html