小程序的template是一個模版功能,在創建一個template后,其他的頁面可以引用,相比component較簡單、方便!
template只需要兩個文件,一個wxss文件和wxml文件,也只有這兩個功能起作用,只用於顯示,json和js文件創建了也無效。
下面是簡易教程
1、新建兩個文件,template.wxml和template.wxss,在wxml里面定義template,取名為msg-template (名字自定義)
2、在其他文件通過<import src="template.wxml"/>引入到文件,用template標簽引用,其中is是在template的name值
現在就可以看到效果了
3、寫template.wxss,在引入文件的wxss中@import "./template/template.wxss";引入templage.wxss
template.wxssd中設置顏色為
結果是
(引入的wxss和原文件的wxss是通用的,分開寫是為了方便管理,注意在模板樣式取名加模板名用以區分,避免混淆),如果取名相同,可能會引起沖突
4、向模板傳值,在引用文件的template標簽上通過data="{{data}}"傳值,模板中通過傳的參數名取值
結果
模板中取值的名字可以自定義,也可以多個傳值
結果
5、template.wxss中可以綁定事件,由於模板沒有自己的js文件,所以的處理事件在引用文件中。
總結:template模板就是把統一的一些代碼放在另一個文件供引用。wxss可以分出來管理,最后使用的時候都是在同一個文件里處理。邏輯處理、數據處理都是在引用文件中。
我是剛入門不久的前端工程師,內容寫的可能不是那么精簡、清楚,我會慢慢改進排版以及內容,希望各位多多指點,多多支持,謝謝
(ps: 如果有剛加入前端這個行業的,比較迷茫的同學,歡迎進群交流,希望不嫌棄的同行或者大佬加群大家一起交流,相信未來會更好
web技術交流群(往全棧發展的)
815957915)