Template的使用技巧总结


一、Template的组成

Template 只由 wxmlwxss两个文件组成,jsjson均无作用。

二、Template的使用

Template可以理解为直接将源码替换到这个地方,所以除了在 引用页面(使用Template的页面) 里引用Template的wxml之外,引用页面也需要引用Template的wxss

  1. 在引用页面的wxml里引用Template的wxml
<!-- 注意这个标签结尾一定要加反斜杠 -->
<import src="Template.wxml所在的相对地址/绝对地址" /> 

<template is="template设置的name" data="传入的data" />
  1. 在引用页面的wxss里引用Template的wxss
@import "Template.wxss所在的相对地址/绝对地址"

三、Template里面引用资源

Template里面引用images这种资源时要注意 相对路径/绝对路径,因为Template本质是 将源码加入引用的页面,如果引用的页面和Template所在的目录不是同一级,相对路径就会出错,所以这里推荐凡是Template里面引用的资源一律使用绝对路径

四、Template里的数据传递

Template数据传递

注意第一个Template里的data加了...

五、多组数据使用多层嵌套的Template

在开发微信小程序的过程中遇到这样一个问题,即 多组同种不同键 的数据 要绑定到 多层嵌套的Template里时,会遇到data名称不符的问题。看下面例子:

代码片段(说明已经卸载注释里面了):

  1. 代码一

  2. 代码二

  3. 代码片段三

问题:
现在外面有多种 不同键名 的同类数据,这里究竟填哪个名字啊?有没有什么办法让代码二wx:for只需要填一个统一的键名?

解jio方案一之 循环for-item一统template:

采用循环的方式,设置wx:for-item让传入的键名都相同

  1. 示例代码一
  2. 示例代码二

这里,所有的键名都统一叫item,不会有其他的情况,解决了键名不一样的问题。

解jio方案二之 ...展开嵌套{}一统template:

本解决方案采用 加一层{},再用...展开的办法 解决不同名的问题,一脸懵逼的小伙伴们不要急,下面就是示例

  1. 示例代码一
  2. 示例代码二
  3. 示例代码三

解释一下,原来是这样的结构:

{
    top250:[...],
    inTheater:[...],
    comingSoon:[...]
}

后来变成这样的结构,外面的键名不一样,展开后的键名是一样的:

{
    top250:{movies:[...]},
    inTheater:{movies:[...]},
    comingSoon:{movies:[...]}
}

然后问题就变成了如何展开top250comingSoon等键了,微信小程序提供了...,使用方式就像步骤三里的一样,在前面加三个点,就能拨开外层的{},直接把里面的内容往下面传

总结
其实两个方案都有异曲同工之妙,都是往Template里面传相同的键名,第一种方案比较直接,直接用wx:for-item指定一个键名,然后循环设置;第二种比较麻烦,要修改js,将数据多加一层,然后里面的键名仍都保持一样,一旦展开里面的键名也就一样了


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM