Как использовать шаблон шаблона апплета

Апплет WeChat

Хотя язык разработки апплета может работать только в апплете WeChat, его дизайн также следует основной особенности основного фреймворка интерфейса — компонентизации.Есть два способа реализации компонентизации в апплете:template 模版а такжеComponent 组件. Эти два метода подходят для разных сценариев.

  1. template 模版В основном используемый для отображения, шаблон не включает обработку событий, а логика событий, которую необходимо обработать, размещается на странице, вызывающей шаблон. Одинtemplate 模版содержит толькоwxml wxssдокумент.
  2. Component 组件Как отдельный функциональный модуль он может включать в себя не только отображение страниц, но и обработку событийной логики модуля. как страница,Component 组件может содержатьwxml wxss js jsonдокумент.

1. Создатьtemplateтрафарет

отличный отpageа такжеComponent, невозможно быстро создать в инструментах разработчикаtemplate 模版. Поэтому его нужно создавать отдельноwxss wxmlдокумент.

template.wxmlсинтаксис файла

Одинtemplate.wxmlиспользуется в файле<template>Тег содержит шаблон,template.wxmlфайл может содержать несколько<template>шаблон, использоватьnameатрибут в качестве имени шаблона.

В шаблоны можно принимать переменные, использовать{{}}экспонат. Передатель переменной передается страницей, вызывающей шаблон.

<template name="A">
    <text>template name: {{name}}</text>
</template>
<template name="B">
    <text>template name: {{name}} {{msg}}</text>
</template>

template.wxssФайл стиля шаблона

Шаблоны могут иметь собственные файлы стилей.

text{
    color: #cccccc;
}

2. Цитатыtemplateтрафарет

  1. templateНеобходимо использовать ссылки на шаблоны<import>Этикетка. этикеткаsrcАтрибут — это путь, по которому нужно сослаться на шаблон.
  2. templateИспользование шаблонов<template>Этикетка. использоватьisатрибут для различения шаблонов, определенных в файле шаблона.
  3. использоватьdataДанные переданы в шаблон.

index.wxml

<import src="../tpls/template.wxml" />

<view>
    <template is="A" data="{{name}}"/>
    <template is="B" data="{{name, msg}}"/>
<view>

3. Стиль эталонного шаблона

на странице вызоваwxmlпроцитировано вtemplate.wxmlПосле этого на стиль шаблона ссылаться не будут, его нужно вызывать в шапке страницыwxssупоминается отдельно вtemplate.wxssдокумент.

index.wxss

@import "./tpls/template.wxss"

4. Обработка событий в файлах шаблонов

Событие, определенное в шаблоне, должно быть выполнено на вызывающей странице.template.wxml

<template name="A">
    <text bindtap="handleTap">template name: {{name}}</text>
</template>

index.js

Page({
    data: {},
    handleTap() {
        console.log('template 模版 click')
    }
})

5. импорт имеет объем

Импорт имеет концепцию объема, то есть будет импортирован только шаблон, определенный в целевом файле, а шаблон, импортированный в целевой файл, не будет импортирован.Короче говоря, импорт не имеет рекурсивных характеристик.

Например: C относится к B, B относится к A, шаблон, определенный B, может использоваться в C, шаблон, определенный A, может использоваться в B, но C не может использовать шаблон, определенный A.

6. включить в шаблон шаблона

как будто с помощью<import src="xx/xx/xx.wxml"> <tempalte is="A" />Цитирование аналогично использованию шаблонов, вы также можете использовать<include src="xx/xx/xx.wxml />"для ссылки на шаблон.

нужно знать, это:

  1. использовать<include>При ссылке на файл шаблона блоки шаблона файла шаблона не могут быть разделены, поэтому используйте<include>В указанном файле шаблона может быть определен только один блок шаблона.
  2. include может добавлять объектные файлы, кроме<template/> <wxs/>Импорт всего внешнего кода эквивалентен его копированию во включаемое расположение.
<!-- index.wxml -->
<include src="header.wxml"/>

<view> body </view>

<include src="footer.wxml"/>

<!-- header.wxml -->
<view> header </view>

<!-- footer.wxml -->
<view> footer </view>
Категории