mp-progress: реализация кругового индикатора прогресса для мини-программ

mp-progress — это инструмент, который позволяет создавать круговые индикаторы прогресса в мини-программах.

Зачем нужен mp-progress?

В настоящее время существует множество сторонних UI-компонентов для мини-приложений. Если стиль проекта близок к стороннему, то использование готовых библиотек компонентов может быть удобным решением. Однако если вы используете только несколько компонентов из большой библиотеки, установка всего пакета может быть нецелесообразной.

Цель mp-progress: создать небольшой по размеру файл (менее 7 КБ), который можно легко вызвать с помощью JavaScript и использовать с нативным тегом canvas. Это особенно полезно для проектов, где требуется высокий уровень контроля над реализацией.

Установка

Для установки mp-progress выполните следующую команду:

$ npm install mp-progress --save

Требования к базовой библиотеке

Согласно документации, поддерживаются версии базовой библиотеки 2.7.0 и выше. Рекомендуется использовать последнюю версию базовой библиотеки для достижения наилучших результатов.

Использование в нативных мини-программах WeChat

Чтобы использовать пакет npm в нативной мини-программе WeChat, необходимо выполнить дополнительную настройку. Подробные инструкции можно найти здесь: https://developers.weixin.qq.com/community/develop/article/doc/0008aecec4c9601e750be048d51c13.

Вызов компонента (простой и удобный способ)

Добавьте компонент в соответствующую страницу, инициализируйте данные и используйте компонент в файле wxml.

Обратите внимание, что этот способ не подходит для использования в среде wepy.

Пример кода:

{
  "navigationBarTitleText": "Главная",
  "usingComponents": {
    "mpProgress": "mp-progress/dist/component/mp-progress"
  }
}
...
// Способ использования параметров такой же, canvasSize по умолчанию равен 400*400
data = {
  config: {
    canvasSize: {
      width: 400,
      height: 400
    },
    percent: 100,
    barStyle: [{width: 20, fillStyle: '#f0f0f0'}, {width: 20, animate: true, fillStyle: [{position: 0, color: '#56B37F'}, {position: 1, color: '#c0e674'}]}],
    needDot: true,
    dotStyle: [{r: 20, fillStyle: '#ffffff', shadow: 'rgba(0,0,0,.15)'}, {r: 10, fillStyle: '#56B37F'}]
  },
  percentage: 10
}
...
<mpProgress config="{{config}}" percentage="{{percentage}}"></mpProgress>

Этот способ следует принципу двусторонней привязки данных. Когда страница изменяет значение percentage, mp-progress автоматически обновляет представление.

Вызов API (подходит для создания новых компонентов поверх mp-progress)

Этот метод подходит для среды wepy, но должен быть вызван в функции onReady.

Передаваемые единицы измерения — rpx. Например, если ширина canvas равна 400 rpx, передайте 400. Затем будет автоматически вычислен фактический размер.

import MpProgress from 'mp-progress';
...
// Инициализация
// Обратите внимание: в среде wepy вызов должен осуществляться в функции onReady
const mprogress = new MpProgress({
  target: this,
  canvasId: 'progress',
  canvasSize: {width: 400, height: 400},
  barStyle: [{width: 12, fillStyle: '#f0f0f0'}, {width: 12, fillStyle: [{position: 0, color: '#56B37F'}, {position: 1, цвет: '#c0e674'}]}]
});

// Начало рисования прогресса, 60 представляет 60%
mprogress.draw(60);

...
<canvas class="canvas" type="2d" id="progress"></canvas>

Режимы отображения

Эффект	Описание
	Нормальный режим (по умолчанию)
	Режим процента (достаточно передать процент, чтобы использовать его)

Параметры

Функция рисования

Учитывая, что индикатор выполнения может обновляться несколько раз на одной странице, после создания экземпляра компонента необходимо вручную вызвать функцию draw для рисования.

Другие примечания

• Как установить стиль конца линии дуги

Можно добавить параметр lineCap в любой элемент массива barStyle, например: barStyle: [{ширина: 12, lineCap: 'round', fillStyle: '#56B37F'}]. Допустимые значения lineCap можно посмотреть в документации.

• Должен работать на SDK версии 2.7.0 или выше

Компонент использует новейший метод рендеринга WeChat, который требует версии SDK не ниже 2.7.0.

• dotStyle

Если dotStyle содержит shadow, автоматически уменьшается радиус круговой диаграммы для обеспечения полного отображения shadow на всех точках.

• Анимация прогресса

Текущая анимация действует только в определении последнего элемента barStyle. Каждый кадр анимации составляет 2% от общей анимации.

• Отображение текста

Реализация кода может ссылаться на:

<view class="garage-status">
  <canvas class="canvas" type="2d" id="progress"></canvas>
  <view class="status-ctn">
    <view class="status-count">127/127</view>
    <view class="desc-text">Свободные парковочные места</view>
  </view>
</view>

• Обратная связь по вопросам

Изображение обратной связи можно посмотреть здесь:

<view class="feedback">
  ...
</view>