Пользовательские компоненты программы WeChat Mini

Апплет WeChat

предисловие

Поскольку апплет WeChat был выпущен 19 января, можно сказать, что некоторые люди счастливы, а некоторые обеспокоены. Работники фронтенда, которые когда-то возлагали на него всевозможные ожидания, однажды сказали в мистере Чжане: «Нет», «Нет». ", мелкие и средние разочарования.
Но как легкое прикладное средство удобство, которое оно приносит нашим разработчикам, понятно.
Большая функция пользовательских компонентов также поддерживается базовой библиотекой мини-программы версии 1.6.3, и более низкая версия должна быть совместима После поиска в Интернете множества пользовательских компонентов мини-программы WeChat я, кажется, обнаружил, что есть не очень хорошее введение в него, поэтому сегодня блоггер здесь также хочет тщательно представить всем эту пользовательскую функцию апплета WeChat.Если что-то не так, пожалуйста, поправьте меня, спасибо!(╹▽╹)

Используйте пользовательские компоненты

Сценарий применения:
Когда мы разрабатываем наш проект, мы обнаружим, что одни и те же функциональные модули иногда используются на разных страницах.В это время мы можем извлечь эти же части и установить их как отдельную «страницу», а затем, когда мы захотим, это может следует ссылаться там, где он применяется.Вышеизложенное является моим личным пониманием пользовательских компонентов.Пожалуйста, прочитайте следующее для конкретных методов.

1. Создайте пользовательские компоненты

Как я уже говорил выше, пользовательский компонент на самом деле похож на страницу, поэтому, когда мы его пишем, он должен быть похож на страницу дизайна, сjson wxml wxss jsэти четыре файла.

Здесь блогер представит пользовательские компоненты в виде кейсов для написания.

1. Предварительная подготовка
1. Сначала создайте новый файл с именемwxcomponentс проект,
2. Создайте страницу в папке pagescomponentsПапка для хранения всех наших пользовательских компонентов.
3. Создайте папку в папке компонентовcptпапка для храненияcptЭтот пользовательский компонент и создайте соответствующие файлы конфигурации соответственно, как показано ниже:

component.png
component.png

2. Объявление пользовательского компонента
быть вcpt.jsonСделайте объявление пользовательского компонента, то есть сообщите разработчику, что это компонент:

{
  "component": true
}

3. Структура компонентов дизайна
Запишите шаблон компонента в файл wxml и добавьте стиль компонента в файл wxss:
файл cpt.wxml

<!-- 这是自定义组件的内部WXML结构 -->
<view class="inner">
  {{innerText}}
  <button bindtap='customMethod'>点击</button>
  <slot></slot>
</view>

файл cpt.wxss

/* 这里的样式只应用于这个自定义组件 */
.inner {
  color: red;
}

`здесь пока можно игнорировать.

И пользовательские компоненты не должны использоваться для добавления идентификаторов к заметкам или использования селекторов атрибутов и селекторов имен тегов при разработке структуры.
Это связано с тем, что компонент повторно используется нами, и на странице разрешен только один идентификатор.

Четыре: регистрация компонентов

в пользовательских компонентахjsВ файле вам нужно использовать Component() для регистрации компонента и предоставления определения свойства компонента, внутренних данных и пользовательских методов, таких как в cpt.js:

Component({
  properties: {
    // 这里定义了innerText属性，属性值可以在组件使用时指定
    innerText: {
      type: String,
      value: 'default value',
    }
  },
  data: {
    // 这里是一些组件内部数据
    someData: 1
  },
  methods: {
    // 这里是一个自定义方法
    customMethod: function () {
      console.log('customMethod')
    }
  }
})

Пятое: используйте пользовательские компоненты
Здесь для простоты я буду напрямую использовать встроенную страницу журналов для вызова пользовательского компонента.
Во-первых, вы должны сослаться на объявление на странице, где вы хотите использовать компонент..jsonдокумент.
как вlogs.jsonсередина:

{
  "navigationBarTitleText": "查看启动日志",
  "usingComponents": {
    "component-tag-name": "../components/cpt/cpt"
  }
}

Далее мы можем использовать пользовательские компоненты на странице так же, как и другие компоненты.
Например, я использую в logs.wxml:

<!--logs.wxml-->
<view class="container log-list">
  <!-- 以下是对一个自定义组件的引用 -->
  <component-tag-name inner-text="Some text"></component-tag-name>
</view>

Перейдите на страницу журналов, как показано ниже:

result.png
result.png

Шесть: использовать слот
В приведенном выше примере тег записан в cpt.wxml.Когда мы обращаемся к компоненту cpt, если мы не пишем другое содержимое в теге компонента, тег не будет отображаться.

То есть, если мы изменим logs.wxml выше:

<!--logs.wxml-->
<view class="container log-list">
  <!-- 以下是对一个自定义组件的引用 -->
  <component-tag-name inner-text="Some text">
    <view>这里是插入到组件slot中的内容</view>
  </component-tag-name>
</view>

Просмотрите страницу журналов на этом этапе:

slot.png
slot.png

а также<slot></slot>Где находится местоположение, также определяется вами при разработке компонента cpt.
В приведенном выше примере я будуslotпомещатьbuttonпод:

<!-- 这是自定义组件的内部WXML结构 -->
<view class="inner">
  {{innerText}}
  <button bindtap='customMethod'>点击</button>
  <slot></slot>
</view>

Вы также можете разместить его в другом месте для достижения различных эффектов.

Семь: используйте несколько слотов
Обычно в компоненте есть только одинslot, но иногда наши пользовательские компоненты могут использовать более одногоslot, не бойтесь, наш апплет WeChat также может позволить вам это сделать.
Когда вам нужно использовать несколько слотов, вы можете объявить и включить их в компоненте js.
1. Объявите в cpt.json (файл json вашего пользовательского компонента)

Component({
  options: {
    multipleSlots: true // 在组件定义时的选项中启用多slot支持
  },
  properties: { /* ... */ },
  methods: { /* ... */ }
})

2. На данный момент вы можете использовать несколько слотов в wxml этого компонента, отличающихся разными именами:

<!-- 这是自定义组件的内部WXML结构 -->
<view class="inner">
  <slot name="header"></slot>    <-- 一定要记得使用name属性 -->
  {{innerText}}
  <button bindtap='customMethod'>点击</button>
  <slot name="footer"></slot>
</view>

3. При использовании используйте атрибут слота для вставки узлов в разные слоты.

<!--logs.wxml-->
<view class="container log-list">
  <!-- 以下是对一个自定义组件的引用 -->
  <component-tag-name inner-text="Some text">
    <view slot="header">头部的内容</view>
    <view slot="footer">底部的内容</view>
  </component-tag-name>
</view>

послесловие

В мини-программах WeChat можно использовать множество пользовательских компонентов, таких как жизненный цикл компонентов, события и т. д. Для получения дополнительной информации см.официальная документация.

Категории