前言

最近10幾天都在學(xué)習(xí)小程序的開發(fā)，遇到了一些問題和筆記有趣的東西，今天總結(jié)了一下，和大家分享

1.小程序中的template模塊使用

在一個(gè)月黑風(fēng)高的夜晚，我突然發(fā)現(xiàn)一個(gè)很有意思的東西，那就是template模塊，它可以將你定義的一個(gè)HTML5模塊包住，然后利用template，在你的小程序任意一個(gè)頁(yè)面使用，這樣極大的減少了程序中的復(fù)制-粘貼，復(fù)制-粘貼(一般用于需要循環(huán)使用的界面)。下面就用我自己的一個(gè)template模塊來(lái)講解下。

第一步：創(chuàng)建頁(yè)面

在pages里面創(chuàng)建存儲(chǔ)你template模塊的頁(yè)面，便于其他頁(yè)面對(duì)其的引用

1. "pages/index/index",
2. "pages/find/find",
3. "pages/gift/gift",
4. "pages/activity/activity",
5. "pages/common/list",//存儲(chǔ)template模塊的頁(yè)面
6. "pages/white/white"

第二步：創(chuàng)建template模塊

template模塊實(shí)例

1. <template name="job_list">
2. <view class="br"></view>
3. <navigator url="../white/white" class="page_appmsg"> //點(diǎn)擊跳轉(zhuǎn)
4. <view class="page">
5. <view class="page__hd ">
6. <image class="page__thumb" src="{{image}}" mode="aspectFill"/>
7. <view class="page__hd_title">
8. <view class="page__hd_title title">{{title}}</view>
9. <view class="page__hd_title school">{{school}}</view>
10. <view class="page__hd_title request">
11. <text class="page__hd_title pink">{{pink}}</text>
12. <text class="page__hd_title time">{{time}}</text>
13. <view class="page__hd_title cool"><i class="iconfont icon-zan1 active"></i>{{cool}}</view>
14. </view>
15. </view>
16. </view>
17. <view class='page__ft'>
18. <i class="iconfont icon-jian-copy active"></i>{{page__ft}}}
19. </view>
20. </view>
21. </navigator>
22. </template>

在你需要重復(fù)使用的html用一個(gè)標(biāo)簽包起來(lái)，并給它取個(gè)名字 。  （當(dāng)然了，還有WXSS的編寫，這里因?yàn)椴皇呛苤匾揖筒环懦鰜?lái)了）  完成了這步，你就可以盡情的在你需要這個(gè)模板的頁(yè)面引用這個(gè)模塊了。

第三步：在各個(gè)頁(yè)面引用template模塊

①在你想要引用的界面的WXSS和WXML上引用template的wxml和wxss，

1. @import '../common/list.wxss';
2. <import src="../common/list.wxml" />

②在你需要的盒子里面添加template標(biāo)簽，你想要引用那個(gè)template模塊，就在is里面填哪個(gè)模塊的名字

1. <template is="job_list" data="{{jobs}}"/>

如果你是在一個(gè)循環(huán)里面引用的template就需要改為data="{{...item}}"如：

1. <block wx:for="{{jobs}}" wx:key="{{index}}">
2. <template is="job_list" data="{{...item}}"/>
3. </block>

代碼：

1. <import src="../common/list.wxml" />
2. <view class="swiper-tab">
3. <view class="swiper-tab-item {{activeIndex==0?'active':''}}" data-current="0" bindtap="clickTab">活動(dòng)</view>
4. <view class="swiper-tab-item {{activeIndex==1?'active':''}}" data-current="1" bindtap="clickTab">視頻</view>
5. <view class="swiper-tab-item {{activeIndex==2?'active':''}}" data-current="2" bindtap="clickTab">直播</view>
6. </view>
7. <swiper current='{{activeIndex}}' bindchange="swiperTab">
8. <swiper-item>
9. <view class="swiper-item__content">
10. <block wx:for="{{jobs}}" wx:key="{{index}}">
11. <template is="job_list" data="{{...item}}"/>
12. </block>
13. </view>
14. </swiper-item>
15. <swiper-item>
16. <view class="swiper-item__content">
17. <block wx:for="{{jobs}}" wx:key="{{index}}">
18. <template is="job_list" data="{{...item}}"/>
19. </block>
20. </view>
21. </swiper-item>
22. <swiper-item>
23. <view class="swiper-item__content">
24. <block wx:for="{{jobs}}" wx:key="{{index}}">
25. <template is="job_list" data="{{...item}}"/>
26. </block>
27. </view>
28. </swiper-item>
29. </swiper>

效果圖：