怎樣使用小程序template模板

怎樣使用小程序template模板，針對這個問題，這篇文章詳細介紹了相對應的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。

WXML提供模板（template），可以在模板中定義代碼片段，然后在不同的地方調用。

模板的基本使用

創建模板文件

在page里面創建一個template文件夾，可以利用小程序開發工具【新建Page】快速創建文件

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

創建文件可根據自己項目設計，并非固定如此

定義模板

在<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: '模板',
       msg: 'this is a template',
    }
  }
})

在模板直接使用

<!-- 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('template 模版 click')
  },

優化模板事件

如果是模板公用的方法，在每個調用的文件都要把方法寫一遍，會有很多重復的代碼，我們可以如以下改進一下。 （雖然template模板不能直接使用自己的js，但是我們可以把方法統一寫在template.js文件里，然后在使用模板的文件js里面引入一下。）

在任意js文件統一定義方法

<!-- template.js -->

const template = {
    handleTap() {
        console.log('template 模版 click')
    }
}

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模板問題的解答就分享到這里了，希望以上內容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關注億速云行業資訊頻道了解更多相關知識。