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

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

Историческая сводка:

задний план

Эта проблема, разработанная в ответ на требования к врезке из предыдущей проблемы, должна отображать врезные записи в виде списка, но апплет WeChat не имеет табличного компонента, что может быть официальным соображением. front-end разработка, таблица всегда была одним из самых сложных компонентов и не была реализована. Нет готовых компонентов для использования, и в настоящее время есть два решения этой проблемы:

  • 1) Встроенная страница h5, (ведь все h5table组件многочисленные)
  • 2) настроитьtable组件(изготовить колеса)

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

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

отображение эффекта табличного компонента

miniprogram-table-componentКомпонент пользовательской таблицы мини-программы

Чтобы использовать этот компонент, вам необходимо полагаться на версию 2.2.2 базовой библиотеки Mini Program и сборку инструментов разработчика npm. Для получения подробной информации см.Официальная документация по npm.

1. Базовая форма

2. Форма с узором «зебра»

3. Таблицы с разнесенными границами

4. Настройте быструю копию без данных

5. Настройте стиль заголовка таблицы

6. Фиксированный заголовок

7. Горизонтальное скольжение стола

8. Настройте стили строк и ячеек таблицы

Начать быстро

Простой апплет WeChattable组件Родился. Это свежо и тепло.После прочтения эффекта дисплея раньше, я представлю использование. Компонент пользовательской таблицы очень прост в использовании, то есть он используется по методу пакета npm и пользовательского компонента WeChat.

1. Установка и введение

  • Установить компоненты:
npm install --save miniprogram-table-component
  • Внедрение пользовательского компонента таблицы

Добавьте конфигурацию пользовательских компонентов recycle-view и recycle-item в файл конфигурации json страницы.

{
  "usingComponents": {
    "table-view": "../../../miniprogram_npm/miniprogram-table-component"
  }
}

Примечание. Путь к пакету npm. Если вы столкнулись с проблемой, что пакет не может быть найден здесь, вы можете проверить следующее微信小程序 npm 找到不到npm包的坑？

2. Используйте табличный компонент

Он используется там, где необходимо использовать страницу wxml, следующим образом:

<table-view 
    headers="{{tableHeader}}" 
    data="{{ row }}" 
    stripe="{{ stripe }}"
    border="{{ border }}"
/>

Используйте его там, где необходимо использовать страницу js, следующим образом:

Page({
  /**
   * 页面的初始数据
   */
  data: {
    tableHeader: [
      {
        prop: 'datetime',
        width: 150,
        label: '日期',
        color: '#55C355'
      },
      {
        prop: 'sign_in',
        width: 152,
        label: '上班时间'
      },
      {
        prop: 'sign_out',
        width: 152,
        label: '下班时间'
      },
      {
        prop: 'work_hour',
        width: 110,
        label: '工时'
      },
      {
        prop: 'statusText',
        width: 110,
        label: '状态'
      }
    ],
    stripe: true,
    border: true,
    outBorder: true,
    row: [
      {
          "id": 1,
          "status": '正常',
          "datetime": "04-01",
          "sign_in_time": '09:30:00',
          "sign_out_time": '18:30:00',
          "work_hour": 8,
      }, {
          "id": 2,
          "status": '迟到',
          "datetime": "04-02",
          "sign_in_time": '10:30:00',
          "sign_out_time": '18:30:00',
          "work_hour": 7,
      }, {
          "id": 29,
          "status": '正常',
          "datetime": "04-03",
          "sign_in_time": '09:30:00',
          "sign_out_time": '18:30:00',
          "work_hour": 8,
      }, {
          "id": 318,
          "status": '休息日',
          "datetime": "04-04",
          "sign_in_time": '',
          "sign_out_time": '',
          "work_hour": '',
      }, {
          "id": 319,
          "status": '正常',
          "datetime": "04-05",
          "sign_in_time": '09:30:00',
          "sign_out_time": '18:30:00',
          "work_hour": 8,
      }
    ],
    msg: '暂无数据'
  },

  /** 
   * 点击表格一行
   */
  onRowClick: function(e) {
    console.log('e: ', e)
  }
})

3. Конфигурация

Часть конфигурации в основном настраивает несколько свойств, а именно:

элемент конфигурации иллюстрировать Типы необязательное значение По умолчанию Необходимый
headers Заголовок таблицы, ширина столбца, атрибуты столбца Array {prop: 'datetime', width: 150, label: '日期'} [] yes
data данные списка таблиц Array [] no
stripe Будь то рисунок зебры boolean true/false false no
border Есть ли распорка boolean true/false false no
height Когда вертикального контента слишком много, вы можете установить заголовок фиксированной высоты. string auto no
msg Исправлена ​​ситуация отсутствия данных, отображение копии string 暂无数据～ no
header-row-class-name собственный стиль заголовка таблицы string no
row-class-name Настройка стилей строк таблицы string no
cell-class-name пользовательский стиль ячейки string no
bind:rowHandle Это событие запускается при нажатии на строку function no

Код, связанный с конфигурацией 🌰:

<table-view  
      header-row-class-name="header-class"
      row-class-name="row-class"
      cell-class-name="cell-class"
      headers="{{tableHeader}}" 
      data="{{ row }}" 
      stripe="{{ stripe }}"
      height="{{ height }}"
      border="{{ border }}"
      bind:rowClick="onRowClick"
      bind:cellClick="onCellClick" 
      no-data-msg="{{ msg }}"
/>

header-row-class-name,row-class-name,cell-class-nameОн поддерживает внешние стили через externalClasses и управляет стилем таблицы в родительском компоненте,externalClasses классы внешнего стиля, официальное описание. Пример исходного кода черезгитхаб-адресПроверить.

Реализация ямы, с которой сталкивается компонент пользовательской формы

Проблемы, из-за которых npm не может войти и не может опубликовать?

Пакет npm тоже был выпущен раньше, но я забылnpm loginЕсли вы не можете войти в систему, вам нужно изменить зеркало Taobao обратно на npm. Еще одна вещь, которую следует отметить, это то, что каждый выпуск должен быть обновлен.package.jsonНомер версии в файле.

Апплет WeChat npm не может найти пакет npm?

Когда компонент разрабатывается и вводится в использование, пакет npm находится, но я не могу его найти? Ловушка здесь в том, что npm апплета имеет особый способ его использования.

  • Сначала инициализируйте npm в корневом каталоге проекта:
npm init -f
  • Затем установите соответствующий пользовательский пакет компонентов.
npm install -production miniprogram-table-component

npm/cnpm/yarn добавить можно

  • В инструментах разработчика WeChat выберите «Настройки» -> «Настройки проекта» -> «Использовать модуль npm».

  • В инструментах разработчика WeChat, Tools -> Build npm, сборка будет генерироватьminiprogram_npmПапки, пакеты npm, используемые проектом, все здесь.

  • Согласно вашему собственному пути использования, отminiprogram_npmИмпортируйте необходимые пакеты.

исходный код табличного компонента

Время разработки спроса относительно короткое, и эффективность работы также максимально повышается, и большое количество времени используется для упаковки компонентов. Я люблю бросать, и это может быть сочтено уместным, чтобы увеличить сложность моих собственных проектов.Чем больше заниматься, тем быстрее технология будет развиваться.

Ссылаться на

Категории