一. template模板:
1. 模板創(chuàng)建：
建議單獨(dú)創(chuàng)建template目錄，在template目錄中創(chuàng)建管理模板文件。
由于模板只有wxml、wxss文件，而且小程序開發(fā)工具并不支持快速創(chuàng)建模板，因此就需要直接創(chuàng)建wxml、wxss文件了，一個(gè)template的模板文件和樣式文件只需要命名相同即可。如果模板較多，建議在template目錄下再創(chuàng)建子目錄，存放單獨(dú)的模板。


 
2. 模板文件：
template.wxml文件中能寫多個(gè)模板，用name區(qū)分：
復(fù)制代碼
1 <template name="demo"> 2 <view class='tempDemo'> 3 <text class='name'>FirstName: {{firstName}}, LastName: {{lastName}}</text> 4 <text class='fr' bindtap="clickMe" data-name="{{'Hello! I am '+firstName+' '+LastName+'!'}}"> clcikMe </text> 5 </view> 6 </template>
復(fù)制代碼
3. 樣式文件：


模板擁有自己的樣式文件（用戶自定義）。


1 /* templates/demo/index.wxss */ 2 .tempDemo{ 3  width:100%; 4 } 5 view.tempDemo .name{color:darkorange}
4. 頁面引用：


page.wxml


復(fù)制代碼
1 <!--導(dǎo)入模板--> 2 <import src="../../templates/demo/index.wxml" /> 3 <!--嵌入模板--> 4 <view> 5 <text>嵌入模板</text> 6 <template is="demo" data="{{...staffA}}"></template><!--傳入?yún)?shù)，必須是對(duì)象--> 7 <template is="demo" data="{{...staffB}}"></template><!--傳入?yún)?shù)，必須是對(duì)象--> 8 <template is="demo" data="{{...staffC}}"></template><!--傳入?yún)?shù)，必須是對(duì)象--> 9 </view>
復(fù)制代碼
page.wxss


1 @import "../../templates/demo/index.wxss" /*引入template樣式*/
page.js


復(fù)制代碼
 1 Page({  2 /**  3  * 頁面的初始數(shù)據(jù)  4 */  5  data: {  6 staffA: { firstName: 'Hulk', lastName: 'Hu' },  7 staffB: { firstName: 'Shang', lastName: 'You' },  8 staffC: { firstName: 'Gideon', lastName: 'Lin' }  9  }, 10  clickMe(e) { 11 wx.showToast({ title: e.currentTarget.dataset.name, icon: "none", duration: 100000 }) 12  } 13  ...... 14 })
復(fù)制代碼
備注：


一個(gè)模板文件中可以有多個(gè)template,每個(gè)template均需定義name進(jìn)行區(qū)分，頁面調(diào)用的時(shí)候也是以name指向?qū)?yīng)的template;


template模板沒有配置文件(.json)和業(yè)務(wù)邏輯文件（.js）,所以template模板中的變量引用和業(yè)務(wù)邏輯事件都需要在引用頁面的js文件中進(jìn)行定義；


template模板支持獨(dú)立樣式，需要在引用頁面的樣式文件中進(jìn)行導(dǎo)入；


頁面應(yīng)用template模板需要先導(dǎo)入模板 <import src="../../templates/demo/index.wxml" /> ，然后再嵌入模板 <template is="demo" data="{{...staffA}}"></template> 

以上是由福州網(wǎng)站建設(shè)的小編為你分享了"微信小程序template模板"文章，如果你在這方面有什么問題，隨時(shí)聯(lián)系我們