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