深入解析小程式template模板的使用方法

這篇文章帶大家詳細了解一下小程式template模板的用法，希望對大家有幫助！

WXML提供模板（template），可以在模板中定義程式碼片段，然後在不同的地方呼叫。 【相關學習推薦：小程式開發教學】

前言

你將收穫

• 小程式模板怎麼用

• 小程式範本資料和事件的處理

• 小程式範本的一些注意事項及最佳化

模板的基本使用

建立範本檔案

在page裡面建立一個template資料夾，可以利用小程式開發工具【新建Page】快速建立檔案

註：呼叫模板的時候，起作用的只有wxml和wxss文件，模板中的JS文件是不起作用的。模板中的邏輯都要在呼叫的檔案中處理。

建立檔案可依自己專案設計，並非固定如此

#定義範本

在<template></template> 內定義程式碼片段，使用name 屬性，作為模板的名字。

<template name="msgItem">
    <view>
        <text class="info">这是一个msg模板</text>
    </view>
</template>

使用模板

在wxml中要使用模板，有兩步驟

1）、聲明，關鍵 import 標籤

2）、使用，關鍵 is屬性

<!-- index.wxml -->

<!-- 声明需要使用的模板文件 -->
<import src ="../template/template.wxml"/>

<!--使用-->
<template is="msgItem"/>

這裡is的名字和模板name命名的保持一致

模板的wxss

如果模板有自己的wxss，如我們的template.wxss文件，則需要在呼叫模板的文件（如範例的index.wxss）導入，否則不會生效

/**index.wxss**/
@import "../template/template.wxss";

#歸納：

• wxss導入wxss中
• wxml導入wxml中
• js無效

##模板的資料傳遞

【呼叫的wxml】透過

data給模板傳值

<!-- index.wxml -->

<template is="msgItem" data="{{...item}}"/>

item是在呼叫的js中定義好的

<!-- index.js -->

Page({
  data: {
    item: {
       title: &#39;模板&#39;,
       msg: &#39;this is a template&#39;,
    }
  }
})

在模板直接使用

<!-- template.wxml -->

<template name="msgItem">
    <view>
        <text class="info">
            {{title}}: {{msg}}
        </text>
    </view>
</template>

如果有傳遞多個參數，則用逗號隔開

<template is="msgItem" data="{{data1, data2}}"/>

##」模版檔案中的是【呼叫模板的js檔】裡的事件。

定義在自己的

template.js
• 並不會生效

<!--template.wxml-->

<template name="msgItem">
    <view>
        <text class="info" bindtap="handleTap">
            {{title}}: {{msg}}
        </text>
    </view>
</template>

<!-- index.js -->

handleTap() {
    console.log(&#39;template 模版 click&#39;)
  },

優化範本事件

如果是模板公用的方法，在每個呼叫的檔案都要把方法寫一遍，就會有很多重複的程式碼，我們可以如下改進一下。 （雖然

template

模板不能直接使用自己的js，但是我們可以把方法統一寫在template.js文件裡，然後在使用模板的文件js裡面引入一下。）

在任意js檔案統一定義方法

<!-- template.js -->

const template = {
    handleTap() {
        console.log(&#39;template 模版 click&#39;)
    }
}

export default template;

在需要使用的地方導入即可

// index.js
import template from '../template/template';

Page({
  handleTap:template.handleTap
})

關於js檔案中的資料傳遞

在

template.js

裡可以直接拿到index.js檔案的整個data

template模板和Component元件的異同

相同點

#都是為了實現程式碼的複用

• 都不能單獨呈現，必須依附顯示在頁面

區別

template模板

：輕量級，主要是展示，沒有設定檔(.json)和業務邏輯檔（.js）,所以template模板中的變數引用和業務邏輯事件都需要在【引用模板的頁面js】檔案中進行定義；

Component元件

：有自己的業務邏輯，由4個檔案構成，與page類似，但是js檔案和json檔案與頁面不同。

選擇

如果只是展示，使用template就夠了；

• ##如果涉及到的業務邏輯互動比較多，最好使用component元件；

• import 的作用域

import 有作用域的概念，也就是只會在import 目標檔中定義的template，而不會import 目標檔import 的template。

C import B import A

//C能用B，B能用A，但是C不能用A

參考資料：微信小程式template範本

https://developers.weixin.qq.com/miniprogram/dev/reference /wxml/template.html

更多程式相關知識，請造訪：程式設計影片！ ！

以上是深入解析小程式template模板的使用方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！